Как страница для пасхалки завлекает меня все сильнее и сильнее.

Речь идет о странице с игрой Тетрис Онлайн. Поиграть можно тут: https://ip-gamers.net/gaming/tetris/. Регистрация не требуется. Ничего особенного простой тетрис.

Изначально я просто взял самый простой код на github, ибо суть страницы не в тетрисе, а в пасхалке.
Если зайти на эту страницу, именно закрыть и открыть ее по новой (Простое обновление странички не сработает), не играя в тетрис сразу ввести определенный код, то можно активировать скрытое видео, кусочек из фильма Free Guy.

Но чего-то меня затянул именно тетрис.
Сначала я увидел, что когда игрок управляет тетромино стрелочками, страница тоже двигается. Поэтому пришлось добавлять в тетрис блокировку клавиш:

document.addEventListener('keydown', function(e) {
  if (gameOver) return;

  e.preventDefault(); // Отменяем стандартное поведение браузера

  if (e.which === 37 || e.which === 39) {
    const col = e.which === 37
      ? tetromino.col - 1
      : tetromino.col + 1;

    if (isValidMove(tetromino.matrix, tetromino.row, col)) {
      tetromino.col = col;
    }
  }
  if (e.which === 32) {
      let row = tetromino.row;
      while (isValidMove(tetromino.matrix, row + 1, tetromino.col)) {
        row++;
      }
      tetromino.row = row;
      placeTetromino();
      return;
    }

  if (e.which === 38) {
    const matrix = rotate(tetromino.matrix);
    if (isValidMove(matrix, tetromino.row, tetromino.col)) {
      tetromino.matrix = matrix;
    }
  }

  if(e.which === 40) {
    const row = tetromino.row + 1;

    if (!isValidMove(tetromino.matrix, row, tetromino.col)) {
      tetromino.row = row - 1;

      placeTetromino();
      return;
    }

    tetromino.row = row;
  }
});

Далее я хотел сделать таблицу лидеров для тетриса, но подумал, что для моего трафика она и не очень то нужна, поэтому я просто вывел текущий счет уничтоженных линий и текущую скорость над тетрисом.

<audio id="bgMusic" loop>
  <source src="{media="6"}" type="audio/mpeg">
</audio>

<center>
  <div id="game-container" style="border: 2px solid #000; padding: 10px;">
    <div id="score-container" style="display: flex; justify-content: center; align-items: flex-start;">
      <div id="score-wrapper" style="text-align: right;">
        <span id="score" style="font-size: 18px; color: #fff;"></span><br>
        <span id="rows" style="font-size: 14px; color: #fff;"></span><br>
        <span id="level" style="font-size: 14px; color: #fff;"></span>
      </div>
    </div>
    <canvas width="320" height="640" id="game" style="background-color: #212429;"></canvas>
    <a href="https://ip-gamers.net/topic/3218-podderzhka-igry-tetris-onlajn/" style="display: block; margin-top: 10px; text-align: center; text-decoration: none;">Перейти к основной теме поддержки</a>
  </div>
</center>

Как вы видите, помимо вывода текущего счета, я добавил еще фоновую музыку.

const bgMusic = document.getElementById('bgMusic');
bgMusic.volume = 0.6;
bgMusic.play();

Над звуком я пока еще только начал работать, надо сделать еще остановку фоновой музыки при проигрыше, какой ни будь лажовый сэмпл при проигрыше, надо добавить еще звук поворотов тетромино и звук уничтоженных линий.

Саму же фоновую музыку, я взял на ютубе, мне пришлось склеить два ремикса, я думаю этого достаточно. Не думаю что кто-то справится и сможет проиграть дольше…

Вообще идеи в голове появляются и появляются и в итоге, мой тетрис становится лучше и лучше.

А картинок в посте нет, потому что ЧИТАЙТЕ! Картинки хоть и привлекают людей, но все же, я консервативен…

+ 1. Фоновая музыка теперь при проигрыше будет останавливаться.
Для этого мы добавляем bgMusic.pause(); в функцию:

function showGameOver() {
  cancelAnimationFrame(rAF);
  bgMusic.pause();
  gameOver = true;
  context.fillStyle = 'black';
  context.globalAlpha = 0.75;
  context.fillRect(0, canvas.height / 2 - 30, canvas.width, 60);
  context.globalAlpha = 1;
  context.fillStyle = 'white';
  context.font = '36px monospace';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillText('108??', canvas.width / 2, canvas.height / 2);
}

2. А для добавления звуков приземлившихся тетромино. Мы в самое начало кода добавляем:

const lineClearSound = document.getElementById('lineClearSound');

Затем помещаем это lineClearSound.play(); в функцию:

function placeTetromino() {
  lineClearSound.play(); // Воспроизводим звук уничтожения линии
  for (let row = 0; row < tetromino.matrix.length; row++) {
    for (let col = 0; col < tetromino.matrix[row].length; col++) {
      if (tetromino.matrix[row][col]) {
        if (tetromino.row + row < 0) {
          return showGameOver();
        }
        playfield[tetromino.row + row][tetromino.col + col] = tetromino.name;
      }
    }
  }

+ Соответственно мы не забываем подключить новый звук на самой странице с игрой:

<audio id="lineClearSound">
  <source src="{media="7"}" type="audio/mpeg">
</audio>

+ По тому же принципу добавляем звук проигрыша в showGameOver()