diff --git a/public/sprites/block_1.png b/public/sprites/block_1.png new file mode 100644 index 0000000..484e54b Binary files /dev/null and b/public/sprites/block_1.png differ diff --git a/public/sprites/block_2.png b/public/sprites/block_2.png new file mode 100644 index 0000000..f483564 Binary files /dev/null and b/public/sprites/block_2.png differ diff --git a/public/sprites/block_3.png b/public/sprites/block_3.png new file mode 100644 index 0000000..f8ec2cd Binary files /dev/null and b/public/sprites/block_3.png differ diff --git a/src/main.js b/src/main.js index e11a339..c86af81 100644 --- a/src/main.js +++ b/src/main.js @@ -38,7 +38,14 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV app.stage.addChild(container); - const textures = await Assets.load(['/sprites/fire_ball_1.png', '/sprites/background_1.png', '/sprites/paddle.png']); + const textures = await Assets.load([ + '/sprites/fire_ball_1.png', + '/sprites/background_1.png', + '/sprites/paddle.png', + '/sprites/block_1.png', + '/sprites/block_2.png', + '/sprites/block_3.png', + ]); const game = new Game(LEVELS); const views = createGameView(game, container, textures); @@ -57,7 +64,7 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV game.update(time.deltaTime); if (game.currentLevel !== currentLevel) { - rebuildBrickViews(views, game, container); + rebuildBrickViews(views, game, container, textures); currentLevel = game.currentLevel; } managePerkViewsLifetime(views, game, container); diff --git a/src/view.js b/src/view.js index 0d09cef..3e9652f 100644 --- a/src/view.js +++ b/src/view.js @@ -37,19 +37,14 @@ function createPaddleView(paddle, texture) { * Создает визуальное отображение кирпича с помощью Pixi.js * @param {Brick} brick экземпляр класса кирпич * @returns {Graphics} графическое отображение кирпича + * @param {unknown} textures текстуры блоков */ -function createBrickView(brick) { - const brickView = new Graphics().rect(0, 0, brick.width, brick.height); +function createBrickView(brick, textures) { + const brickSprite = new Sprite(textures[brick.type - 1]); + brickSprite.width = brick.width; + brickSprite.height = brick.height; - switch (brick.type) { - case 2: - return brickView.fill('#00ff00'); - case 3: - return brickView.fill('#ff00ff'); - case 1: - default: - return brickView.fill('#000fff'); - } + return brickSprite; } /** @@ -100,8 +95,14 @@ export function createGameView(game, container, textures) { const paddle = createPaddleView(game.paddle, textures['/sprites/paddle.png']); container.addChild(paddle); + const bricksTextures = [ + textures['/sprites/block_1.png'], + textures['/sprites/block_2.png'], + textures['/sprites/block_3.png'], + ]; + const bricks = game.bricks.map((brick) => { - const brickView = createBrickView(brick); + const brickView = createBrickView(brick, bricksTextures); container.addChild(brickView); return brickView; }); @@ -210,13 +211,19 @@ export function syncronizeViewsWithGame(views, game) { * @param {object} views объект с визуальными отображениями сущностей игры * @param {Game} game экземпляр класса игра * @param {Container} container экземпляр класса контейнер Pixi.js + * @param {object} textures объект с текстурами для визуального отображения */ -export function rebuildBrickViews(views, game, container) { +export function rebuildBrickViews(views, game, container, textures) { for (const brickView of views.bricks) { container.removeChild(brickView); brickView.destroy(); } + const bricksTextures = [ + textures['/sprites/brick_1.png'], + textures['/sprites/brick_2.png'], + textures['/sprites/brick_3.png'], + ]; views.bricks = game.bricks.map((brick) => { const brickView = createBrickView(brick); container.addChild(brickView);