src/main.js

@@ -18,21 +18,14 @@ import { Game } from './game';
 import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeViewsWithGame } from './view';
 
 (async () => {
-  // Create a new application
   const app = new Application();
-
-  // Initialize the application
   await app.init({ background: '#1099bb', width: CONTAINER_WIDTH, height: CONTAINER_HEIGHT });
-
-  // Append the application canvas to the document body
   document.body.appendChild(app.canvas);
 
-  // Create and add a container to the stage
   const container = new Container({
     eventMode: 'static',
     hitArea: app.screen,
   });
-
   container.x = 0;
   container.y = 0;
 
@@ -73,5 +66,22 @@ import { createGameView, managePerkViewsLifetime, rebuildBrickViews, syncronizeV
     }
     managePerkViewsLifetime(views, game, container, textures);
     syncronizeViewsWithGame(views, game);
+
+    if (game.status === 'over' || game.status === 'completed') {
+      showEndScreen(game.status === 'completed' ? 'Победа!' : 'Игра окончена!');
+      app.ticker.stop();
+    }
   });
 })();
+
+/**
+ * Показывает финальный экран с сообщением и кнопкой рестарта (перезагрузка страницы).
+ * @param {string} message текст результата игры
+ */
+function showEndScreen(message) {
+  const overlay = document.createElement('div');
+  overlay.className = 'end-screen';
+  overlay.innerHTML = `<p>${message}</p><button class="button" type="button">Начать заново</button>`;
+  overlay.querySelector('button').addEventListener('click', () => location.reload());
+  document.body.appendChild(overlay);
+}

src/style.css

@@ -10,3 +10,32 @@ canvas {
   display: block;
   object-fit: contain;
 }
+
+.end-screen {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 3rem;
+  font-family: sans-serif;
+  font-weight: 700;
+}
+
+.end-screen button {
+  color: #ffffff;
+  font-size: 1.5rem;
+  font-family: sans-serif;
+  padding: 0.5rem 1.5rem;
+  cursor: pointer;
+
+  transition: all 0.2s ease-out;
+}
+
+.end-screen button:hover {
+  color: #ffffff88;
+}