src/main.js

@@ -38,7 +38,7 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV
 
   app.stage.addChild(container);
 
-  const textures = await Assets.load(['/sprites/fire_ball_1.png', '/sprites/background_1.png']);
+  const textures = await Assets.load(['/sprites/fire_ball_1.png', '/sprites/background_1.png', '/sprites/paddle.png']);
 
   const game = new Game(LEVELS);
   const views = createGameView(game, container, textures);

src/view.js

@@ -1,4 +1,4 @@
-import { Container, Graphics, Sprite, Text } from 'pixi.js';
+import { 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';
@@ -23,9 +23,14 @@ function createBallView(ball, texture) {
 /**
  * Создает визуальное отображение ракетки с помощью Pixi.js
  * @param {Paddle} paddle экземпляр класса ракетка
+ * @param {unknown} texture текстура ракетки
  */
-function createPaddleView(paddle) {
+function createPaddleView(paddle, texture) {
-  return new Graphics().rect(0, 0, paddle.width, paddle.height).fill('#fff000');
+  const paddleSprite = new NineSliceSprite({ texture, leftWidth: 150, rightWidth: 150, topHeight: 0, bottomHeight: 0 });
+  paddleSprite.width = paddle.width;
+  paddleSprite.height = paddle.height;
+
+  return paddleSprite;
 }
 
 /**
@@ -92,7 +97,7 @@ export function createGameView(game, container, textures) {
       balls.set(ball, ballView);
     }
 
-    const paddle = createPaddleView(game.paddle);
+    const paddle = createPaddleView(game.paddle, textures['/sprites/paddle.png']);
     container.addChild(paddle);
 
     const bricks = game.bricks.map((brick) => {
@@ -124,10 +129,7 @@ export function createGameView(game, container, textures) {
  */
 export function managePerkViewsLifetime(views, game, container) {
   if (views.paddle.width !== game.paddle.width) {
-    container.removeChild(views.paddle);
+    views.paddle.width = game.paddle.width;
-    views.paddle.destroy();
-    views.paddle = createPaddleView(game.paddle);
-    container.addChild(views.paddle);
   }
 
   for (const [ball, ballView] of views.balls) {