diff --git a/public/sprites/paddle.png b/public/sprites/paddle.png new file mode 100644 index 0000000..87ef471 Binary files /dev/null and b/public/sprites/paddle.png differ diff --git a/src/main.js b/src/main.js index 1570587..e11a339 100644 --- a/src/main.js +++ b/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); diff --git a/src/view.js b/src/view.js index 11d0ebe..0d09cef 100644 --- a/src/view.js +++ b/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) { - return new Graphics().rect(0, 0, paddle.width, paddle.height).fill('#fff000'); +function createPaddleView(paddle, texture) { + 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.destroy(); - views.paddle = createPaddleView(game.paddle); - container.addChild(views.paddle); + views.paddle.width = game.paddle.width; } for (const [ball, ballView] of views.balls) {