chore: Исправлен конфиг biome, добавлено правило для отслеживания необъявленных переменных

biome.json

@@ -3,8 +3,17 @@
   "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
   "files": { "includes": ["src/**/*", "*.js", "*.json"] },
   "formatter": { "enabled": true, "indentStyle": "space", "indentWidth": 2, "lineWidth": 120 },
-  "linter": { "enabled": true, "rules": { "preset": "recommended" } },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUndeclaredVariables": "error"
+      }
+    }
+  },
   "javascript": {
+    "globals": ["describe", "it", "expect"],
     "formatter": {
       "quoteStyle": "single",
       "semicolons": "always",

src/config.js

@@ -10,3 +10,6 @@ export const BALL_INITIAL_ANGLE = 180;
 
 export const BRICK_WIDTH = 40;
 export const BRICK_HEIGHT = 10;
+
+export const BRICK_ROW_AMOUNT = 5;
+export const BRICK_COLUMN_AMOUNT = 20;

src/entities/paddle/paddle.js

@@ -16,14 +16,21 @@ export class Paddle {
   }
 
   /**
-   * Ограничивает минимальные и максимальные координаты положения ракетки на оси X
+   * Изменяет X координату ракетки, ограничивая минимальные и максимальные координаты
-   * @param {number} containerWidth ширина игрового поля
+   * @param {number} x новая X координата
+   * @param {number} minX минимальное положение на оси X
+   * @param {number} maxX максимальное положение на оси X
    */
-  clampTo(containerWidth) {
+  moveTo(x, minX, maxX) {
-    if (this.x <= 0) {
+    switch (true) {
-      this.x = 0;
+      case minX !== undefined && x <= minX:
-    } else if (this.x >= containerWidth - this.width) {
+        this.x = minX;
-      this.x = containerWidth - this.width;
+        return;
+      case maxX !== undefined && x >= maxX - this.width:
+        this.x = maxX - this.width;
+        return;
+      default:
+        this.x = x;
     }
   }
 }

src/game.js

@@ -12,6 +12,7 @@ import {
 import { Ball } from './entities/ball/ball';
 import { layBricks } from './entities/brick/layBricks/layBricks';
 import { Paddle } from './entities/paddle/paddle';
+import { tick } from './lib/tick/tick';
 
 /**
  * Класс игры c информацией о всех игровых сущностях

src/lib/tick/tick.js

@@ -91,7 +91,7 @@ export function tick(game, containerWidth, containerHeight, deltaTime) {
       ball.x >= paddle.x &&
       ball.x <= paddle.x + paddle.width
     ) {
-      verticalSpeed *= -1;
+      ball.verticalSpeed *= -1;
     }
   } catch (err) {
     console.error(err);

src/main.js

@@ -4,15 +4,19 @@ import {
   BALL_INITIAL_ANGLE,
   BALL_RADIUS,
   BALL_SPEED,
+  BRICK_COLUMN_AMOUNT,
   BRICK_HEIGHT,
+  BRICK_ROW_AMOUNT,
   BRICK_WIDTH,
   CONTAINER_HEIGHT,
   CONTAINER_WIDTH,
   PADDLE_HEIGHT,
   PADDLE_WIDTH,
 } from './config';
+import { Game } from './game';
 import { calculateCollision } from './lib/calculateCollision/calculateCollision';
 import { calculateDirection } from './lib/calculateDirection/calculateDirection';
+import { createGameView, syncronizeViewsWithGame } from './view';
 
 (async () => {
   // Create a new application
@@ -35,95 +39,19 @@ import { calculateDirection } from './lib/calculateDirection/calculateDirection'
 
   app.stage.addChild(container);
 
-  const paddle = new Graphics().rect(0, CONTAINER_HEIGHT - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT).fill('#fff000');
+  const game = new Game(BRICK_COLUMN_AMOUNT, BRICK_ROW_AMOUNT);
-  container.addChild(paddle);
+  const views = createGameView(game, container);
 
   container.on('pointermove', (event) => {
     const localPosition = container.toLocal(event.global);
-
+    game.paddle.moveTo(localPosition.x, 0, CONTAINER_WIDTH);
-    if (localPosition.x < CONTAINER_WIDTH - PADDLE_WIDTH) {
-      paddle.x = localPosition.x;
-    }
   });
 
-  const bricksRow = Array.from({ length: Math.floor(CONTAINER_WIDTH / BRICK_WIDTH) }).map((_, index) => {
+  console.log(game.paddle.x, game.paddle.y);
-    const brick = new Graphics().rect(0, 0, BRICK_WIDTH, BRICK_HEIGHT).fill('#000fff');
-    brick.x = index * BRICK_WIDTH;
-    brick.y = 1;
-    container.addChild(brick);
-    return brick;
-  });
-
-  const ball = new Graphics().circle(0, 0, BALL_RADIUS).fill('#ffffff');
-  ball.x = 100;
-  ball.y = 100;
-  container.addChild(ball);
-
-  const leftBoundary = BALL_RADIUS;
-  const rightBoundary = CONTAINER_WIDTH - BALL_RADIUS;
-  const topBoundary = BALL_RADIUS;
-  const bottomBoundary = CONTAINER_HEIGHT - BALL_RADIUS;
-  const paddleTop = CONTAINER_HEIGHT - PADDLE_HEIGHT;
-  const bricksBottom = BRICK_HEIGHT;
-
-  let horizontalSpeed = BALL_SPEED * Math.cos(BALL_INITIAL_ANGLE);
-  let verticalSpeed = -1 * BALL_SPEED * Math.sin(BALL_INITIAL_ANGLE);
 
   app.ticker.add((time) => {
-    // Базоввое взаимодействие мяча и кирпича
+    game.update(time.deltaTime);
-    for (let i = bricksRow.length - 1; i >= 0; i--) {
+    syncronizeViewsWithGame(views, game);
-      const currentBrick = bricksRow[i];
+    console.log(game.paddle.x, game.paddle.y);
-      const brickLeft = currentBrick.x;
-      const brickRight = currentBrick.x + BRICK_WIDTH;
-      const brickTop = currentBrick.y;
-      const brickBottom = currentBrick.y + BRICK_HEIGHT;
-
-      const ballLeft = ball.x - BALL_RADIUS;
-      const ballRight = ball.x + BALL_RADIUS;
-      const ballTop = ball.y - BALL_RADIUS;
-      const ballBottom = ball.y + BALL_RADIUS;
-
-      const ballObject = { left: ballLeft, right: ballRight, top: ballTop, bottom: ballBottom };
-      const brickObject = { left: brickLeft, right: brickRight, top: brickTop, bottom: brickBottom };
-
-      const isCollided = calculateCollision(ballObject, brickObject);
-      const directions = calculateDirection(ballObject, brickObject);
-
-      if (isCollided && directions !== null) {
-        horizontalSpeed *= directions[0];
-        verticalSpeed *= directions[1];
-
-        container.removeChild(currentBrick);
-        currentBrick.destroy();
-        bricksRow.splice(i, 1);
-
-        break;
-      }
-    }
-
-    // Не даем мячу выйти за границы стен слева / справав и меняем направление
-    if (ball.x <= leftBoundary || ball.x >= rightBoundary) {
-      ball.x = ball.x <= leftBoundary ? leftBoundary : rightBoundary;
-      horizontalSpeed *= -1;
-    }
-
-    // Не даем мячу выйти за границы стен сверху / снизу и меняем направление
-    if (ball.y <= topBoundary || ball.y >= bottomBoundary) {
-      ball.y = ball.y <= topBoundary ? topBoundary : bottomBoundary;
-      verticalSpeed *= -1;
-    }
-
-    // Базоввое взаимодействие мяча и ракетки
-    if (
-      verticalSpeed > 0 &&
-      ball.y + BALL_RADIUS >= paddleTop &&
-      ball.x >= paddle.x &&
-      ball.x <= paddle.x + PADDLE_WIDTH
-    ) {
-      verticalSpeed *= -1;
-    }
-
-    ball.x += horizontalSpeed * time.deltaTime;
-    ball.y += verticalSpeed * time.deltaTime;
   });
 })();

src/view.js

@@ -0,0 +1,92 @@
+import { Container, Graphics } from 'pixi.js';
+import { Ball } from './entities/ball/ball';
+import { Brick } from './entities/brick/brick';
+import { Paddle } from './entities/paddle/paddle';
+import { Game } from './game';
+
+/**
+ * Создает визуальное отображение мяча с помощью Pixi.js
+ * @param {Ball} ball экземпляр класса мяч
+ */
+function createBallView(ball) {
+  return new Graphics().circle(0, 0, ball.radius).fill('#ffffff');
+}
+
+/**
+ * Создает визуальное отображение ракетки с помощью Pixi.js
+ * @param {Paddle} paddle экземпляр класса ракетка
+ */
+function createPaddleView(paddle) {
+  return new Graphics().rect(0, 0, paddle.width, paddle.height).fill('#fff000');
+}
+
+/**
+ * Создает визуальное отображение кирпича с помощью Pixi.js
+ * @param {Brick} brick экземпляр класса кирпич
+ */
+function createBrickView(brick) {
+  return new Graphics().rect(0, 0, brick.width, brick.height).fill('#000fff');
+}
+
+/**
+ * Создает визуальное отображение всех сущностей в игре с помощью Pixi.js и добавляет в контейнер
+ * @param {Game} game экземпляр класса игра
+ * @param {Container} container контейнер Pixi.js
+ */
+export function createGameView(game, container) {
+  try {
+    const ball = createBallView(game.ball);
+    container.addChild(ball);
+
+    const paddle = createPaddleView(game.paddle);
+    container.addChild(paddle);
+
+    const bricks = game.bricks.map((row) =>
+      row.map((brick) => {
+        const brickView = createBrickView(brick);
+        container.addChild(brickView);
+        return brickView;
+      }),
+    );
+
+    return {
+      ball,
+      paddle,
+      bricks,
+    };
+  } catch (err) {
+    console.error(err);
+    return null;
+  }
+}
+
+/**
+ * Синхронизирует отображение сущностей Pixi.js с логикой игры (координаты и тд.)
+ * @param {object} views объект с визуальными отображениями сущностей игры
+ * @param {Game} game экземпляр класса игра
+ */
+export function syncronizeViewsWithGame(views, game) {
+  try {
+    if (!(game instanceof Game)) {
+      throw new Error('Аргумент game должен быть экземпляром класса Game');
+    }
+
+    views.ball.x = game.ball.x;
+    views.ball.y = game.ball.y;
+
+    views.paddle.x = game.paddle.x;
+    views.paddle.y = game.paddle.y;
+
+    for (let i = 0; i < game.bricks.length; i++) {
+      for (let j = 0; j < game.bricks[i].length; j++) {
+        const brick = game.bricks[i][j];
+        const brickView = views.bricks[i][j];
+        brickView.x = brick.x;
+        brickView.y = brick.y;
+        brickView.visible = brick.alive;
+      }
+    }
+  } catch (err) {
+    console.error(err);
+  }
+}