diff --git a/public/sprites/perk_1.png b/public/sprites/perk_1.png new file mode 100644 index 0000000..b26d7cb Binary files /dev/null and b/public/sprites/perk_1.png differ diff --git a/public/sprites/perk_2.png b/public/sprites/perk_2.png new file mode 100644 index 0000000..0390515 Binary files /dev/null and b/public/sprites/perk_2.png differ diff --git a/public/sprites/perk_3.png b/public/sprites/perk_3.png new file mode 100644 index 0000000..6e85156 Binary files /dev/null and b/public/sprites/perk_3.png differ diff --git a/public/sprites/perk_4.png b/public/sprites/perk_4.png new file mode 100644 index 0000000..dd1d541 Binary files /dev/null and b/public/sprites/perk_4.png differ diff --git a/src/main.js b/src/main.js index c86af81..04620bb 100644 --- a/src/main.js +++ b/src/main.js @@ -45,6 +45,10 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV '/sprites/block_1.png', '/sprites/block_2.png', '/sprites/block_3.png', + '/sprites/perk_1.png', + '/sprites/perk_2.png', + '/sprites/perk_3.png', + '/sprites/perk_4.png', ]); const game = new Game(LEVELS); @@ -67,7 +71,7 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV rebuildBrickViews(views, game, container, textures); currentLevel = game.currentLevel; } - managePerkViewsLifetime(views, game, container); + managePerkViewsLifetime(views, game, container, textures); syncronizeViewsWithGame(views, game); }); })(); diff --git a/src/view.js b/src/view.js index 3e9652f..de776d6 100644 --- a/src/view.js +++ b/src/view.js @@ -51,20 +51,34 @@ function createBrickView(brick, textures) { * Создает визуальное отображение бонуса с помощью Pixi.js * @param {Perk} perk экземпляр класса бонус * @returns {Graphics} графическое отображение бонуса + * @param {object} textures текстуры блоков */ -function createPerkView(perk) { - const perkView = new Graphics().rect(0, 0, perk.width, perk.height); +function createPerkView(perk, textures) { + let texture; switch (perk.type) { case 'slow': - return perkView.fill('#00ffff'); + texture = textures['/sprites/perk_1.png']; + break; case 'wide': - return perkView.fill('#0f0f0f'); + texture = textures['/sprites/perk_2.png']; + break; case 'life': - return perkView.fill('#f0f0f0'); + texture = textures['/sprites/perk_3.png']; + break; + case 'clone': + texture = textures['/sprites/perk_3.png']; + break; default: - return perkView.fill('#ffffff'); + texture = textures['/sprites/perk_1.png']; + break; } + + const perkSprite = new Sprite(texture); + perkSprite.width = perk.width; + perkSprite.height = perk.height; + + return perkSprite; } /** @@ -127,8 +141,9 @@ export function createGameView(game, container, textures) { * @param {object} views объект с визуальными отображениями сущностей игры * @param {Game} game экземпляр класса игра * @param {Container} container экземпляр класса контейнер Pixi.js + * @param {object} textures объект с текстурами для визуального отображения */ -export function managePerkViewsLifetime(views, game, container) { +export function managePerkViewsLifetime(views, game, container, textures) { if (views.paddle.width !== game.paddle.width) { views.paddle.width = game.paddle.width; } @@ -159,7 +174,7 @@ export function managePerkViewsLifetime(views, game, container) { for (const perk of game.perks) { if (!views.perks.has(perk)) { - const perkView = createPerkView(perk); + const perkView = createPerkView(perk, textures); container.addChild(perkView); views.perks.set(perk, perkView); }