arkanoid/src/view.js

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);
  }
}