src/entities/ball/ball.js

@@ -16,7 +16,7 @@ export class Ball {
     this.radius = radius;
     this.verticalSpeed = verticalSpeed;
     this.horizontalSpeed = horizontalSpeed;
-    this.isOut = false;
+    this.status = 'idle';
 
     this.defaultX = x;
     this.defaultY = y;
@@ -36,11 +36,20 @@ export class Ball {
   /**
    * Возвращает значения к дефолтным
    */
-  reset() {
-    this.x = this.defaultX;
-    this.y = this.defaultY;
+  reset(x = this.defaultX, y = this.defaultY) {
+    this.x = x;
+    this.y = y;
     this.verticalSpeed = this.defaultVerticalSpeed;
     this.horizontalSpeed = this.defaultHorizontalSpeed;
-    this.isOut = false;
+    this.status = 'idle';
+  }
+
+  /**
+   * Запускает мяч с ракетки - переводит из ожидания в игру
+   */
+  launch() {
+    if (this.status === 'idle') {
+      this.status = 'moving';
+    }
   }
 }

src/game.js

@@ -29,15 +29,17 @@ export class Game {
     this.currentLevel = 0;
     this.maxLevel = levels.length - 1;
 
+    this.paddle = new Paddle(0, CONTAINER_HEIGHT - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT);
     this.ball = new Ball(
-      CONTAINER_WIDTH / 2 - BALL_RADIUS / 2,
-      CONTAINER_HEIGHT / 2 - BALL_RADIUS / 2,
+      0,
+      0,
       BALL_RADIUS,
       BALL_SPEED * Math.cos(toRadians(BALL_INITIAL_ANGLE)),
       -1 * BALL_SPEED * Math.sin(toRadians(BALL_INITIAL_ANGLE)),
     );
-    this.paddle = new Paddle(0, CONTAINER_HEIGHT - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT);
     this.bricks = layBricks(this.levels[this.currentLevel], BRICK_WIDTH, BRICK_HEIGHT);
+
+    this._placeBallOnPaddle();
   }
 
   /**
@@ -49,15 +51,21 @@ export class Game {
       return;
     }
 
+    // Пока мяч не запущен - держим его на ракетке и не считаем физику
+    if (this.ball.status === 'idle') {
+      this._placeBallOnPaddle();
+      return;
+    }
+
     tick(this, CONTAINER_WIDTH, CONTAINER_HEIGHT, deltaTime);
 
-    if (this.ball.isOut) {
+    if (this.ball.status === 'out') {
       this.livesAmount -= 1;
 
       if (this.livesAmount === 0) {
         this.status = 'over';
       } else {
-        this.ball.reset();
+        this._placeBallOnPaddle();
       }
 
       return;
@@ -88,7 +96,14 @@ export class Game {
    * Запускает переход на новый уровень, возвращает мяч в дефоотное положение и отрисовывает кирпичи по карте уровня.
    */
   _proceedToNextLevel() {
-    this.ball.reset();
+    this._placeBallOnPaddle();
     this.bricks = layBricks(this.levels[this.currentLevel], BRICK_WIDTH, BRICK_HEIGHT);
   }
+
+  /**
+   * Ставит мяч по центру ракетки
+   */
+  _placeBallOnPaddle() {
+    this.ball.reset(this.paddle.x + this.paddle.width / 2, this.paddle.y - this.ball.radius);
+  }
 }

src/lib/tick/tick.js

@@ -61,7 +61,7 @@ export function tick(game, containerWidth, containerHeight, deltaTime) {
 
     // Проверяем выход за границу стены снизу
     if (ball.y >= bottomBoundary) {
-      game.ball.isOut = true;
+      game.ball.status = 'out';
       return;
     }
 

src/main.js

@@ -49,6 +49,10 @@ import { createGameView, rebuildBrickViews, syncronizeViewsWithGame } from './vi
     game.paddle.moveTo(localPosition.x, 0, CONTAINER_WIDTH);
   });
 
+  container.on('pointerdown', () => {
+    game.ball.launch();
+  });
+
   app.ticker.add((time) => {
     game.update(time.deltaTime);