src/main.js

@@ -33,6 +33,13 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV
 
   const textures = await Assets.load([
     '/sprites/fire_ball_1.png',
+    '/sprites/fire_ball_2.png',
+    '/sprites/fire_ball_3.png',
+    '/sprites/fire_ball_4.png',
+    '/sprites/fire_ball_5.png',
+    '/sprites/fire_ball_6.png',
+    '/sprites/fire_ball_7.png',
+    '/sprites/fire_ball_8.png',
     '/sprites/background_1.png',
     '/sprites/paddle.png',
     '/sprites/block_1.png',

src/view.js

@@ -1,4 +1,4 @@
-import { Container, Graphics, NineSliceSprite, Sprite, Text } from 'pixi.js';
+import { AnimatedSprite, Container, Graphics, NineSliceSprite, Sprite, Text } from 'pixi.js';
 import { CONTAINER_HEIGHT, CONTAINER_WIDTH } from './config';
 import { Ball } from './entities/ball/ball';
 import { Brick } from './entities/brick/brick';
@@ -12,11 +12,23 @@ import { Game } from './game';
  * @param {object} textures объект с текстурами для визуального отображения
  */
 function createBallView(ball, textures) {
-  const texture = textures['/sprites/fire_ball_1.png'];
+  const ballFrames = [
-  const ballSprite = new Sprite(texture);
+    textures['/sprites/fire_ball_1.png'],
+    textures['/sprites/fire_ball_2.png'],
+    textures['/sprites/fire_ball_3.png'],
+    textures['/sprites/fire_ball_4.png'],
+    textures['/sprites/fire_ball_5.png'],
+    textures['/sprites/fire_ball_6.png'],
+    textures['/sprites/fire_ball_7.png'],
+    textures['/sprites/fire_ball_8.png'],
+  ];
+
+  const ballSprite = new AnimatedSprite(ballFrames);
+  ballSprite.animationSpeed = 0.15;
   ballSprite.anchor.set(0.5);
   ballSprite.width = ball.radius * 2;
   ballSprite.height = ball.radius * 2;
+  ballSprite.play();
 
   return ballSprite;
 }