slots draft

scr/.gitignore

@@ -0,0 +1 @@
+/pixi.js*

scr/05/app.js

@@ -1,50 +1,59 @@
 let app = new PIXI.Application({ width: 400, height: 400, backgroundColor: 0x2a2a3a });
 document.body.appendChild(app.view);
 
-let cirleVisible = true;
+// Переменная отвечает, запущена ли игра
+let running = false;
+const REEL_WIDTH = 60;
+const SYMBOL_SIZE = 50;
 
-const shapeCircle = new PIXI.Graphics();
-const shapeRect = new PIXI.Graphics();
+// Создаём колёса
+const reels = [];
+const reelContainer = new PIXI.Container();
 
-shapeCircle.lineStyle(4, 0x101024, 1);
-shapeCircle.beginFill(0xec8a4b, 1);
-shapeCircle.drawCircle(app.screen.width / 2, app.screen.height / 2, 50);
-shapeCircle.endFill();
+for (let i = 0; i < 4; i++) {
+  const rc = new PIXI.Container();
+  rc.x = i * REEL_WIDTH;
+  reelContainer.addChild(rc);
 
-shapeRect.lineStyle(2, 0x101024, 1);
-shapeRect.beginFill(0xDE3249);
-shapeRect.drawRect(app.screen.width / 2 - 100, app.screen.height - 100, 200, 50);
-shapeRect.endFill();
+  const reel = {
+    container: rc,
+    symbols: [],
+    position: 0,
+    previousPosition: 0,
+    blur: new PIXI.filters.BlurFilter(),
+  };
 
-shapeRect.interactive = true;
-shapeRect.cursor = 'pointer';
-shapeRect.on('mouseover', (event) => {
-  basicText.style.fill = 0xffffff;
-});
-shapeRect.on('mouseout', (event) => {
-  basicText.style.fill = 0;
-});
-shapeRect.on('click', (event) => {
-  cirleVisible = cirleVisible ? false : true;
-  // shapeCircle.visible = shapeCircle.visible ? false : true;
-});
+  reel.blur.blurX = 0;
+  reel.blur.blurY = 0;
+  rc.filters = [reel.blur];
 
-const basicText = new PIXI.Text('On / Off');
+  // Build the symbols
+  for (let j = 0; j < 4; j++) {
+    const symbol = new PIXI.Sprite.from('/assets/chest.png');
+    // Scale the symbol to fit symbol area.
+    symbol.y = j * SYMBOL_SIZE;
+    symbol.scale.x = symbol.scale.y = Math.min(SYMBOL_SIZE / symbol.width, SYMBOL_SIZE / symbol.height);
+    symbol.x = Math.round((SYMBOL_SIZE - symbol.width) / 2);
+    reel.symbols.push(symbol);
+    rc.addChild(symbol);
+  }
+
+  reels.push(reel);
+}
+
+const basicText = new PIXI.Text('SPIN!');
 basicText.anchor.set(0.5);
+basicText.style.weight = 'bold';
+basicText.style.fill = 0xfff8c0;
 basicText.x = app.screen.width / 2;
-basicText.y = app.screen.height - 75;
+basicText.y = app.screen.height - 50;
 
-app.ticker.add((delta) => {
-  if (cirleVisible) {
-    if (shapeCircle.alpha < 1) {
-      shapeCircle.visible = true;
-      shapeCircle.alpha += 0.05;
-    }
-  }
-  else {
-    if (shapeCircle.alpha > 0) shapeCircle.alpha -= 0.05;
-    else shapeCircle.visible = false;
-  }
+basicText.interactive = true;
+basicText.buttonMode = true;
+basicText.addListener('click', () => {
+  //
 });
 
-app.stage.addChild(shapeCircle, shapeRect, basicText);
+reelContainer.x = app.screen.width / 2 - (reelContainer.width / 2);
+reelContainer.y = app.screen.height / 2 - (reelContainer.height / 2);
+app.stage.addChild(reelContainer, basicText);