diff --git a/src/main.js b/src/main.js index 04620bb..5aa3915 100644 --- a/src/main.js +++ b/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 = `
${message}
`; + overlay.querySelector('button').addEventListener('click', () => location.reload()); + document.body.appendChild(overlay); +} diff --git a/src/style.css b/src/style.css index 4d5e079..7f94cc7 100644 --- a/src/style.css +++ b/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; +}