Файл: Курсовой проект По дисциплине По теме.docx

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

Листинге 5 – Отрисовка фигур

function getNextTetromino() { if (tetrominoSequence.length === 0) { //если ее нет, то генерируем новую generateSequence(); } const name = tetrominoSequence.pop(); //первая фигура из массива const matrix = tetrominos[name]; //матрица для отрисовки фигуры // I и 0 выпадают из центра, осталььные чуть левее const col = playfield[0].length / 2 - Math.ceil(matrix[0].length / 2); const row = name === 'I' ? -1 : -2; return { name: name, // название фигуры matrix: matrix, // матрица с фигурой row: row, // текущая строка col: col // текущий столбец }; }

В тетрисе фигуры можно вращать на 90⁰ по часовой стрелке сколь угодно раз. Так как наши фигуры – это двумерные массивы, то реализация поворота выглядит следующим образом:

Листинг 6 – Поворот фигуры

function rotate(matrix) { const N = matrix.length - 1; const result = matrix.map((row, i) => row.map((val, j) => matrix[N - j][i]) ); return result; }

Как только фигура встала на место, нужно проверить получился целый ряд или нет. Если получилась строка, то удаляем ее и сдвигаем все содержимое над ней на одну строку вниз. Такую проверку делаем каждый раз при установке фигуры и начинаем с нижнего ряда, поднимаясь вверх.

Листинг 7 – Проверка ряда

function placeTetromino() { 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; } } } for (let row = playfield.length - 1; row >= 0; ) { if (playfield[row].every(cell => !!cell)) { // если ряд заполнен, то удаляем строку(и) for (let r = row; r >= 0; r--) { for (let c = 0; c < playfield[r].length; c++) { playfield[r][c] = playfield[r-1][c]; } } } else { row--; //переходим к следующему ряду } } tetromino = getNextTetromino(); }

Фигуры в игре перемещаются путем нажатия на клавиши: стрелки влево/вправо двигают фигуру в влево/вправо, стрелка вверх поворачивает фигуру на 90⁰, стрелка вниз ускоряет падение фигуры.

Когда фигура при окончательной установке вылезает за границы игрового поля, это значит, что мы проиграли. В этот момент на экране появляется сообщение «Game Over!», анимация игры останавливается.

---

Далее запускаем и тестируем приложение. Смысл главного цикла игры такой:

- на каждом кадре мы очищаем игровое поле и отрисовываем его заново с учетом упавших фигур;

- рисуем текущую фигуру в том месте, где она находится в данный момент.

Так как кадры меняются быстро (35 кадров в секунду), мы не заметим постоянного очищения и отрисовки (рисунок 1).

Рисунок 1 – Итоговое приложение

заключение

По итогу разработки мы получили веб-приложение, адаптированное для компьютера и мобильного пользования. Приложение разработано на сервисе Web Storm. Работа написана на языке JavaScript и HTML.

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

Список использованных источников

1 Тетрис (игра) [Электронный ресурс] / Авторы Википедии // Википедия, свободная энциклопедия – Электрон. дан. – [Сан-Франциско] : Фонд Викимедиа, 2021 – Режим доступа : https://ru.wikipedia.org/wiki/Тетрис , свободный (дата обращения : 24.12.2021). – Загл. с экрана.

2 2D collision detection [Electronic resource] / MDN web docs – Electronic. res. – [Mountain View] : Mozilla Foundation, 2005-2020 – Mode of access : https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection, free (date of order : 24.12.2021). – Title from screen.

---