src/config.js

@@ -22,6 +22,7 @@ export const BRICK_HEIGHT = 10;
 
 export const BRICK_ROW_AMOUNT = 5;
 export const BRICK_COLUMN_AMOUNT = 20;
+export const BRICK_POINTS_AMOUNT = { 1: 10, 2: 30 };
 
 export const PERK_WIDTH = 16;
 export const PERK_HEIGHT = 16;

src/game.js

@@ -27,6 +27,7 @@ export class Game {
    */
   constructor(levels) {
     this.livesAmount = 3;
+    this.score = 0;
     this.status = 'in_process';
     this.levels = levels;
     this.currentLevel = 0;

src/lib/processBrickCollision/processBrickCollision.js

@@ -1,4 +1,4 @@
-import { PERK_DROP_CHANCE, PERK_HEIGHT, PERK_WIDTH } from '../../config';
+import { BRICK_POINTS_AMOUNT, PERK_DROP_CHANCE, PERK_HEIGHT, PERK_WIDTH } from '../../config';
 import { Ball } from '../../entities/ball/ball';
 import { Game } from '../../game';
 import { calculateAABBCollision } from '../calculateAABBCollision/calculateAABBCollision';
@@ -55,6 +55,10 @@ export function processBrickCollision(game, ball) {
       ball.verticalSpeed *= directions[1];
       brick.kill();
 
+      if (!brick.alive) {
+        game.score += BRICK_POINTS_AMOUNT[brick.type] ?? 0;
+      }
+
       if (!brick.alive && Math.random() < PERK_DROP_CHANCE) {
         const perk = spawnRandomPerk(
           brick.x + brick.width / 2 - PERK_WIDTH / 2,

src/main.js

@@ -84,7 +84,7 @@ import {
     syncronizeViewsWithGame(views, game);
 
     if (game.status === 'over' || game.status === 'completed') {
-      showEndScreen(game.status === 'completed' ? 'Победа!' : 'Игра окончена!');
+      showEndScreen(game.status === 'completed' ? 'Победа!' : 'Игра окончена!', game.score);
       app.ticker.stop();
     }
   });
@@ -93,11 +93,12 @@ import {
 /**
  * Показывает финальный экран с сообщением и кнопкой рестарта (перезагрузка страницы).
  * @param {string} message текст результата игры
+ * @param {number} score итоговые очки
  */
-function showEndScreen(message) {
+function showEndScreen(message, score) {
   const overlay = document.createElement('div');
   overlay.className = 'end-screen';
-  overlay.innerHTML = `<p>${message}</p><button class="button" type="button">Начать заново</button>`;
+  overlay.innerHTML = `<p>${message}</p><p>Очки: ${score}</p><button class="button" type="button">Начать заново</button>`;
   overlay.querySelector('button').addEventListener('click', () => location.reload());
   document.body.appendChild(overlay);
 }

src/view.js

@@ -224,7 +224,7 @@ export function syncronizeViewsWithGame(views, game) {
       throw new Error('Аргумент game должен быть экземпляром класса Game');
     }
 
-    views.header.text = `Уровень: ${game.currentLevel + 1}   Количество жизней: ${game.livesAmount}`;
+    views.header.text = `Уровень: ${game.currentLevel + 1}   Количество жизней: ${game.livesAmount}   Очки: ${game.score}`;
 
     for (const ball of game.balls) {
       const ballView = views.balls.get(ball);