src/main.js

@@ -38,8 +38,10 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV
 
   app.stage.addChild(container);
 
+  const textures = await Assets.load(['/sprites/fire_ball_1.png']);
+
   const game = new Game(LEVELS);
-  const views = createGameView(game, container);
+  const views = createGameView(game, container, textures);
   let currentLevel = game.currentLevel;
 
   container.on('pointermove', (event) => {

src/view.js

@@ -1,4 +1,4 @@
-import { Container, Graphics, Text } from 'pixi.js';
+import { Container, Graphics, Sprite, Text } from 'pixi.js';
 import { Ball } from './entities/ball/ball';
 import { Brick } from './entities/brick/brick';
 import { Paddle } from './entities/paddle/paddle';
@@ -8,9 +8,15 @@ import { Game } from './game';
 /**
  * Создает визуальное отображение мяча с помощью Pixi.js
  * @param {Ball} ball экземпляр класса мяч
+ * @param {unknown} texture текстура мяча
  */
-function createBallView(ball) {
-  return new Graphics().circle(0, 0, ball.radius).fill('#ffffff');
+function createBallView(ball, texture) {
+  const ballSprite = new Sprite(texture);
+  ballSprite.anchor.set(0.5);
+  ballSprite.width = ball.radius * 2;
+  ballSprite.height = ball.radius * 2;
+
+  return ballSprite;
 }
 
 /**
@@ -64,8 +70,9 @@ function createPerkView(perk) {
  * Создает визуальное отображение всех сущностей в игре с помощью Pixi.js и добавляет в контейнер
  * @param {Game} game экземпляр класса игра
  * @param {Container} container экземпляр класса контейнер Pixi.js
+ * @param {object} textures объект с текстурами для визуального отображения
  */
-export function createGameView(game, container) {
+export function createGameView(game, container, textures) {
   try {
     const header = new Text({ style: { fill: '#ffffff', fontSize: 16 } });
     header.x = 8;
@@ -74,7 +81,7 @@ export function createGameView(game, container) {
 
     const balls = new Map();
     for (const ball of game.balls) {
-      const ballView = createBallView(ball);
+      const ballView = createBallView(ball, textures['/sprites/fire_ball_1.png']);
       container.addChild(ballView);
       balls.set(ball, ballView);
     }