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);

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 объект с визуальными отображениями сущностей игры