src/main.js

@@ -38,7 +38,14 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV
 
   app.stage.addChild(container);
 
-  const textures = await Assets.load(['/sprites/fire_ball_1.png', '/sprites/background_1.png', '/sprites/paddle.png']);
+  const textures = await Assets.load([
+    '/sprites/fire_ball_1.png',
+    '/sprites/background_1.png',
+    '/sprites/paddle.png',
+    '/sprites/block_1.png',
+    '/sprites/block_2.png',
+    '/sprites/block_3.png',
+  ]);
 
   const game = new Game(LEVELS);
   const views = createGameView(game, container, textures);
@@ -57,7 +64,7 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV
     game.update(time.deltaTime);
 
     if (game.currentLevel !== currentLevel) {
-      rebuildBrickViews(views, game, container);
+      rebuildBrickViews(views, game, container, textures);
       currentLevel = game.currentLevel;
     }
     managePerkViewsLifetime(views, game, container);

src/view.js

@@ -37,19 +37,14 @@ function createPaddleView(paddle, texture) {
  * Создает визуальное отображение кирпича с помощью Pixi.js
  * @param {Brick} brick экземпляр класса кирпич
  * @returns {Graphics} графическое отображение кирпича
+ * @param {unknown} textures текстуры блоков
  */
-function createBrickView(brick) {
+function createBrickView(brick, textures) {
-  const brickView = new Graphics().rect(0, 0, brick.width, brick.height);
+  const brickSprite = new Sprite(textures[brick.type - 1]);
+  brickSprite.width = brick.width;
+  brickSprite.height = brick.height;
 
-  switch (brick.type) {
+  return brickSprite;
-    case 2:
-      return brickView.fill('#00ff00');
-    case 3:
-      return brickView.fill('#ff00ff');
-    case 1:
-    default:
-      return brickView.fill('#000fff');
-  }
 }
 
 /**
@@ -100,8 +95,14 @@ export function createGameView(game, container, textures) {
     const paddle = createPaddleView(game.paddle, textures['/sprites/paddle.png']);
     container.addChild(paddle);
 
+    const bricksTextures = [
+      textures['/sprites/block_1.png'],
+      textures['/sprites/block_2.png'],
+      textures['/sprites/block_3.png'],
+    ];
+
     const bricks = game.bricks.map((brick) => {
-      const brickView = createBrickView(brick);
+      const brickView = createBrickView(brick, bricksTextures);
       container.addChild(brickView);
       return brickView;
     });
@@ -210,13 +211,19 @@ export function syncronizeViewsWithGame(views, game) {
  * @param {object} views объект с визуальными отображениями сущностей игры
  * @param {Game} game экземпляр класса игра
  * @param {Container} container экземпляр класса контейнер Pixi.js
+ * @param {object} textures объект с текстурами для визуального отображения
  */
-export function rebuildBrickViews(views, game, container) {
+export function rebuildBrickViews(views, game, container, textures) {
   for (const brickView of views.bricks) {
     container.removeChild(brickView);
     brickView.destroy();
   }
 
+  const bricksTextures = [
+    textures['/sprites/brick_1.png'],
+    textures['/sprites/brick_2.png'],
+    textures['/sprites/brick_3.png'],
+  ];
   views.bricks = game.bricks.map((brick) => {
     const brickView = createBrickView(brick);
     container.addChild(brickView);