src/main.js

@@ -45,6 +45,10 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV
     '/sprites/block_1.png',
     '/sprites/block_2.png',
     '/sprites/block_3.png',
+    '/sprites/perk_1.png',
+    '/sprites/perk_2.png',
+    '/sprites/perk_3.png',
+    '/sprites/perk_4.png',
   ]);
 
   const game = new Game(LEVELS);
@@ -67,7 +71,7 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV
       rebuildBrickViews(views, game, container, textures);
       currentLevel = game.currentLevel;
     }
-    managePerkViewsLifetime(views, game, container);
+    managePerkViewsLifetime(views, game, container, textures);
     syncronizeViewsWithGame(views, game);
   });
 })();

src/view.js

@@ -51,20 +51,34 @@ function createBrickView(brick, textures) {
  * Создает визуальное отображение бонуса с помощью Pixi.js
  * @param {Perk} perk экземпляр класса бонус
  * @returns {Graphics} графическое отображение бонуса
+ * @param {object} textures текстуры блоков
  */
-function createPerkView(perk) {
+function createPerkView(perk, textures) {
-  const perkView = new Graphics().rect(0, 0, perk.width, perk.height);
+  let texture;
 
   switch (perk.type) {
     case 'slow':
-      return perkView.fill('#00ffff');
+      texture = textures['/sprites/perk_1.png'];
+      break;
     case 'wide':
-      return perkView.fill('#0f0f0f');
+      texture = textures['/sprites/perk_2.png'];
+      break;
     case 'life':
-      return perkView.fill('#f0f0f0');
+      texture = textures['/sprites/perk_3.png'];
+      break;
+    case 'clone':
+      texture = textures['/sprites/perk_3.png'];
+      break;
     default:
-      return perkView.fill('#ffffff');
+      texture = textures['/sprites/perk_1.png'];
+      break;
   }
+
+  const perkSprite = new Sprite(texture);
+  perkSprite.width = perk.width;
+  perkSprite.height = perk.height;
+
+  return perkSprite;
 }
 
 /**
@@ -127,8 +141,9 @@ export function createGameView(game, container, textures) {
  * @param {object} views объект с визуальными отображениями сущностей игры
  * @param {Game} game экземпляр класса игра
  * @param {Container} container экземпляр класса контейнер Pixi.js
+ * @param {object} textures объект с текстурами для визуального отображения
  */
-export function managePerkViewsLifetime(views, game, container) {
+export function managePerkViewsLifetime(views, game, container, textures) {
   if (views.paddle.width !== game.paddle.width) {
     views.paddle.width = game.paddle.width;
   }
@@ -159,7 +174,7 @@ export function managePerkViewsLifetime(views, game, container) {
 
   for (const perk of game.perks) {
     if (!views.perks.has(perk)) {
-      const perkView = createPerkView(perk);
+      const perkView = createPerkView(perk, textures);
       container.addChild(perkView);
       views.perks.set(perk, perkView);
     }