diff --git a/public/sprites/fire_ball_1.png b/public/sprites/fire_ball_1.png new file mode 100644 index 0000000..45ebc0e Binary files /dev/null and b/public/sprites/fire_ball_1.png differ diff --git a/public/sprites/fire_ball_2.png b/public/sprites/fire_ball_2.png new file mode 100644 index 0000000..f6ad171 Binary files /dev/null and b/public/sprites/fire_ball_2.png differ diff --git a/public/sprites/fire_ball_3.png b/public/sprites/fire_ball_3.png new file mode 100644 index 0000000..99b9b10 Binary files /dev/null and b/public/sprites/fire_ball_3.png differ diff --git a/public/sprites/fire_ball_4.png b/public/sprites/fire_ball_4.png new file mode 100644 index 0000000..15f71a4 Binary files /dev/null and b/public/sprites/fire_ball_4.png differ diff --git a/public/sprites/fire_ball_5.png b/public/sprites/fire_ball_5.png new file mode 100644 index 0000000..06454a5 Binary files /dev/null and b/public/sprites/fire_ball_5.png differ diff --git a/public/sprites/fire_ball_6.png b/public/sprites/fire_ball_6.png new file mode 100644 index 0000000..5c6dfe3 Binary files /dev/null and b/public/sprites/fire_ball_6.png differ diff --git a/public/sprites/fire_ball_7.png b/public/sprites/fire_ball_7.png new file mode 100644 index 0000000..3e59b16 Binary files /dev/null and b/public/sprites/fire_ball_7.png differ diff --git a/public/sprites/fire_ball_8.png b/public/sprites/fire_ball_8.png new file mode 100644 index 0000000..518d7d0 Binary files /dev/null and b/public/sprites/fire_ball_8.png differ diff --git a/src/main.js b/src/main.js index 21961f7..ff1a50d 100644 --- a/src/main.js +++ b/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) => { diff --git a/src/view.js b/src/view.js index 6647d04..5e3c7fb 100644 --- a/src/view.js +++ b/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); }