diff --git a/public/sprites/background_2.png b/public/sprites/background_2.png new file mode 100644 index 0000000..e1280b8 Binary files /dev/null and b/public/sprites/background_2.png differ diff --git a/public/sprites/background_3.png b/public/sprites/background_3.png new file mode 100644 index 0000000..22b89c6 Binary files /dev/null and b/public/sprites/background_3.png differ diff --git a/src/main.js b/src/main.js index 9eb044b..1fc7025 100644 --- a/src/main.js +++ b/src/main.js @@ -15,7 +15,13 @@ import { } from './config'; import { LEVELS } from './const/levels'; import { Game } from './game'; -import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeViewsWithGame } from './view'; +import { + createGameView, + managePerkViewsLifetime, + rebuildBrickViews, + syncronizeViewsWithGame, + updateBackgroundView, +} from './view'; (async () => { const app = new Application(); @@ -41,6 +47,8 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV '/sprites/fire_ball_7.png', '/sprites/fire_ball_8.png', '/sprites/background_1.png', + '/sprites/background_2.png', + '/sprites/background_3.png', '/sprites/paddle.png', '/sprites/block_1.png', '/sprites/block_2.png', @@ -69,6 +77,7 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV if (game.currentLevel !== currentLevel) { rebuildBrickViews(views, game, container, textures); + updateBackgroundView(views, game, textures); currentLevel = game.currentLevel; } managePerkViewsLifetime(views, game, container, textures); diff --git a/src/view.js b/src/view.js index 6910a95..ebd816e 100644 --- a/src/view.js +++ b/src/view.js @@ -101,6 +101,21 @@ function createPerkView(perk, textures) { return perkSprite; } +/** + * Возвращает текстуру фона для текущего уровня или дефолтную текстуру фона + * @param {Game} game экземпляр класса игра + * @param {object} textures объект с текстурами для визуального отображения + */ +function backgroundTextureForLevel(game, textures) { + const levelBackground = textures[`/sprites/background_${game.currentLevel + 1}.png`]; + + if (!levelBackground) { + return textures['/sprites/background_1.png']; + } + + return levelBackground; +} + /** * Создает визуальное отображение всех сущностей в игре с помощью Pixi.js и добавляет в контейнер * @param {Game} game экземпляр класса игра @@ -109,7 +124,7 @@ function createPerkView(perk, textures) { */ export function createGameView(game, container, textures) { try { - const background = new Sprite(textures['/sprites/background_1.png']); + const background = new Sprite(backgroundTextureForLevel(game, textures)); background.width = CONTAINER_WIDTH; background.height = CONTAINER_HEIGHT; container.addChildAt(background, 0); @@ -138,6 +153,7 @@ export function createGameView(game, container, textures) { const perks = new Map(); return { + background, header, balls, paddle, @@ -235,6 +251,16 @@ export function syncronizeViewsWithGame(views, game) { } } +/** + * Меняет текстуру фона под текущий уровень игры. + * @param {object} views объект с визуальными отображениями сущностей игры + * @param {Game} game экземпляр класса игра + * @param {object} textures объект с текстурами для визуального отображения + */ +export function updateBackgroundView(views, game, textures) { + views.background.texture = backgroundTextureForLevel(game, textures); +} + /** * Пересоздает отображения кирпичей под текущий уровень игры. * @param {object} views объект с визуальными отображениями сущностей игры