код на тетрис на inoi

Код на тетрис на inoi

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

Влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, влево, влево, влево, вправо, вниз, вправо, вниз, влево, влево, вниз, влево, влево, влево, вверх, вниз, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо.

Пользуйтесь на здоровье, кому поможет, не забудьте сказать спасибо:)

Источник

Внимание, Секретные коды к тетрису

Геймерам на заметку! Вы догадывались что они есть, но не подозревали, что все так сложно! Смотрим!

Влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, влево, влево, влево, вправо, вниз, вправо, вниз, влево, влево, вниз, влево, влево, влево, вверх, вниз, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево, вправо, вниз, вправо, вниз, влево, вправо, вниз, вниз, вниз, влево.

Источник

Tetris на javascript (в 30+ строк)

1. Получаем фигурки
Все фигурки хранятся в переменной fs=«1111:01|01|01|01*011|110:010|011|001*. » в виде строки. Чтобы получить массив фигур — делаем split(‘*’), далее в каждой фигуре есть от 1-го (для «палки») до 4-х (для L, Г и «пирамидки») состояния (чтобы их можно было переворачивать) — они разделены «:» — соответственно чтобы получить одно состояние — split(‘:’). Допустим получили «пирамидку» — «010|111», здесь делаем split(‘|’) — и получаем уже конечный двумерный массив для одного состояния одной фигуры. «0»- пустое пространство (не нужно отрисовывать), «1» — нужно рисовать.

2. Всё перемещение фигур делается двумя функциями — «стереть фигуру» и «попытаться построить».
При любых перемещениях вправо-влево или вниз, или даже переворот фигуры — сначала стираем текущую отображаемую фигуру, потом пытаемся построить фигуру на новом месте — если при постройке какой-то из квадратиков вылазит за край «стакана», или попадает на место, где уже есть заполненный квадратик от предыдущих фигур — стираем «активную фигуру», и стоим ее на предыдущем месте.

3. Перемещения делаются с клавиатуры. По таймеру просто вызывается функция, которая обрабатывает нажатия с клавиатуры с кодом кнопки ВНИЗ. При каждом вызове таймаута — время до вызова уменьшается.

4. Если не удалось переместить фигуру вниз — значит она уперлась в предыдущие фигуры или дно. В таком случае проверяем нет ли заполненных строк, и рисуем новую фигуру вверху стакана. Если вверху стакана нарисовать фигуру не удалось — игра закончена!

Источник

Тетрис на JavaScript

Стильный и цветной.

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

В чём идея

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

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

Если вдруг не знаете, как это работает, вот фрагмент с чемпионата мира по тетрису:

Код не мой

Код, который мы разбираем в этом проекте, написал американский разработчик Стивен Ламберт:

В этой статье мы объясним, как этот код работает.

Неожиданная сложность

Самое главное при программировании такой игры — это как-то хранить содержимое игрового экрана и учитывать движение фигур.

Если бы мы писали эту игру на Unreal Engine или Unity, первым интуитивным решением было бы сделать для блоков какую-то сущность типа объекта. У него были бы свойства — например, конфигурация. Может быть, мы бы захотели потом сделать взрывающиеся объекты или объекты с заморозкой, объекты с повышенной скоростью, отравленные объекты или что-то ещё в таком духе.

Но есть нюанс: смысл объекта в том, что он неделимый. А в «Тетрисе» все объекты запросто делятся, когда мы «закрываем линию». У какой-нибудь Т-образной фигуры может запросто пропасть хвостик, а у Z-образной фигуры — нижняя перекладина.

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

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

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

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

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

Подготовка страницы

Игра будет работать на HTML-странице с помощью элемента Canvas — это холст, на котором мы можем рисовать произвольные фигуры через JavaScript.

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

Всё остальное сделаем скриптом. Добавим тэг сразу после того, как нарисовали холст, и начнём писать содержимое скрипта.

Заводим переменные и константы

Пока что всё просто:

Генерируем выпадающие фигуры

Первое, что нам понадобится для этого, — функция, которая выдаёт случайное число в заданном диапазоне. По этому числу мы будем выбирать фигуры.

Теперь мы можем создать последовательность из выпадающих фигур. Логика будет такая:

Последний этап в этом блоке — получить из игровой последовательности, которую мы только что сделали, следующую фигуру, которая у нас появится. Мы должны знать, что это за фигура; как она рисуется; откуда она начинает движение. Обратите внимание: на выходе мы получаем не только двумерный массив с фигурой, а ещё и название и её координаты. Название нам нужно для того, чтобы знать, каким цветом рисовать фигуру.

Движение, вращение и установка фигуры на место

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

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

Если проверка не прошла, то мы не делаем последнее движение, и фигура просто продолжает падать вниз. Если ей некуда падать и она упёрлась в другие, то нам нужно зафиксировать это в игровом поле. Это значит, что мы записываем в массив, который отвечает за поле, нашу матрицу фигуры, пропуская ноли и записывая только единицы.

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

Что будет, когда мы проиграем

Когда фигура при окончательной установке вылезает за границы игрового поля, это значит, что мы проиграли. За это у нас отвечает флаг gameOver, и его задача — остановить анимацию игры.

Чтобы было понятно, что игра закончена, выведем надпись GAME OVER! прямо поверх игрового поля:

Обрабатываем нажатия на клавиши

Всё как в обычном тетрисе: стрелки влево и вправо двигают фигуру, стрелка вверх поворачивает её на 90 градусов, а стрелка вниз ускоряет падение.

Единственное, о чём нужно не забыть — после каждого нажатия вызвать проверку, можно ли так двигать фигуру или нет.

Запускаем движения и анимацию

Смысл главного цикла игры такой:

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

Последнее, что нам осталось сделать, — запустить игру:

Готовый результат можно посмотреть на странице с игрой.

Что дальше

У нас есть игра, но нет важных элементов:

Сделаем это в другой версии игры, а пока отменяйте планы, сегодня мы играем в бесконечный тетрис.

Источник

🎮Тетрис на JavaScript: разбираем возможности языка через геймификацию

Тетрис на JavaScript + изучение современных возможностей языка

Лучший способ узнавать новое и закреплять полученные знания – практика. Лучшая практика в программировании – создание игр. Лучшая игра в мире – Тетрис. Сегодня мы будем узнавать новое в процессе написания тетриса на javaScript.

В конце руководства у нас будет полностью функционирующая игра с уровнями сложности и системой очков. По ходу дела разберемся с важными игровыми концепциями, вроде графики и игрового цикла, а также научимся определять коллизии блоков и изучим возможности современного JavaScript (ES6):

Весь код проекта вы можете найти в github-репозитории.

Тетрис

Эта всемирно известная игра появилась в далеком 1984 году. Придумал ее русский программист Алексей Пажитнов. Правила очень просты и известны каждому. Сверху вниз падают фигурки разной формы, которые можно вращать и перемещать. Игрок должен складывать их внизу игрового поля. Если получается заполнить целый ряд, он пропадает. Игра заканчивается, когда башня из фигурок достигает верха игрового поля.

Тетрис – великолепный выбор для первого знакомства с гейм-разработкой. Он достаточно прост для программирования, но в то же время содержит все принципиальные игровые элементы. К тому же в нем максимально простая графика.

Структура проекта

Для удобства разобьем весь проект на отдельные файлы:

Сразу же подключим все нужное в index.html:

Создание каркаса

Для отрисовки графики будем использовать холст – элемент HTML5 canvas. Добавим его в html-файл с инфраструктурой будущей игры:

Теперь в главном скрипте проекта main.js нужно найти элемент холста и получить контекст 2D для рисования:

Здесь мы используем установленные ранее константные значения.

Метод scale используется, чтобы избежать постоянного умножения всех значений на BLOCK_SIZE и упростить код.

Оформление

Для оформления такой ретро-игры идеально подходит пиксельный стиль, поэтому мы будем использовать шрифт Press Start 2P. Подключите его в секции head :

Теперь добавим основные стили в style.css :

Для разметки используются системы CSS Grid и Flexbox.

Вот, что у нас получилось:

Пустое игровое поле

Игровое поле

Поле состоит из клеточек, у которых есть два состояния: занята и свободна. Можно было бы просто представить клетку булевым значением, но мы собираемся раскрасить каждую фигурку в свой цвет. Лучше использовать числа: пустая клетка – 0, а занятая – от 1 до 7, в зависимости от цвета.

Само поле будет представлено в виде двумерного массива (матрицы). Каждый ряд – массив клеток, а массив рядов – это, собственно, поле.

Для создания пустой матрицы поля и заполнения ее нулями используются методы массивов: Array.from() и Array.fill().

Теперь создадим экземпляр класса Board в основном файле игры.

Функция play будет вызвана при нажатии на кнопку Play. Она очистит игровое поле с помощью метода reset :

Для наглядного представления матрицы удобно использовать метод console.table:

Тетрамино

Каждая фигурка в тетрисе состоит из четырех блоков и называется тетрамино. Всего комбинаций семь – дадим каждой из них имя (I, J, L, O, S, T, Z) и свой цвет:

Для удобства вращения каждое тетрамино будет представлено в виде квадратной матрицы 3х3. Например, J-тетрамино выглядит так:

Для представления I-тетрамино потребуется матрица 4×4.

Заведем отдельный класс Piece для фигурок, чтобы отслеживать их положение на доске, а также хранить цвет и форму. Чтобы фигурки могли отрисовывать себя на поле, нужно передать им контекст рисования:

Итак, нарисуем первое тетрамино на поле:

Активная фигурка сохраняется в свойстве board.piece для удобного доступа.

Первое тетрамино на поле

Управление с клавиатуры

Передвигать фигурки по полю (влево, вправо и вниз) можно с помощью клавиш-стрелок.

Перечисления

Вычисляемые имена свойств

Теперь нужно сопоставить коды клавиш и действия, которые следует выполнить при их нажатии.

ES6 позволяет добавлять в объекты свойства с вычисляемыми именами. Другими словами, в имени свойства можно использовать переменные и даже выражения.

Для установки такого свойства нужны квадратные скобки:

Для перемещения тетрамино мы будем стирать старое отображение и копировать его в новых координатах. Чтобы получить эти новые координаты, сначала скопируем текущие, а затем изменим нужную ( x или y ) на единицу.

Так как координаты являются примитивными значениями, мы можем использовать spread-оператор, чтобы перенести их в новый объект. В ES6 существует еще один механизм копирования: Object.assign().

В объекте moves теперь хранятся функции вычисления новых координат для каждой клавиши. Получить их можно так:

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

Теперь добавим обработчик для события keydown:

Метод board.valid() будет реализован в следующем разделе. Его задача – определять допустимость новых координат на игровом поле.

board.js Управление с клавиатуры

Обнаружение столкновений

Если бы фигурки тетриса могли проходить сквозь друг друга, а также сквозь пол и стены игрового поля, игра не имела бы смысла. Важно проверить возможные столкновения элементов перед изменением их положения.

Возможные столкновения одного тетрамино:

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

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

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

Пустые клетки матрицы тетрамино при этом не учитываются.

Если проверка прошла удачно, передвигаем фигурку в новое место.

Обнаружение столкновений

Теперь мы можем добавить возможность ускоренного падения (hard drop) фигурок при нажатии на пробел. Тетрамино при этом будет падать пока не столкнется с чем-нибудь.

Вращение

Фигурки можно вращать относительно их «центра масс»:

Вращение тетрамино относительно центра

Чтобы реализовать такую возможность, нам понадобятся базовые знания линейной алгебры. Мы должны транспонировать матрицу, а затем умножить ее на матрицу преобразования, которая изменит порядок столбцов.

Вращение тетрамино в двумерном пространстве

На JavaScript это выглядит так:

Эту функцию можно использовать для вращения фигурок, но перед началом манипуляций с матрицей, ее нужно скопировать, чтобы не допускать мутаций. Вместо spread-оператора, который работает лишь на один уровень в глубину, мы используем трюк с сериализацией – превратим матрицу в JSON-строку, а затем распарсим ее.

Теперь при нажатии на клавишу Вверх, активная фигурка будет вращаться:

constants.js main.js Вращение фигурки при нажатии на клавишу Вверх

Случайный выбор фигурок

Чтобы каждый раз появлялись разные фигурки, придется реализовать рандомизацию, следуя стандарту SRS (Super Rotation System).

Добавим цвета и формы фигурок в файл constants.js:

Теперь нужно случайным образом выбрать порядковый номер тетрамино:

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

Добавим в класс Piece метод spawn :

piece.js

Игровой цикл

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

RequestAnimationFrame

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

Таймер

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

Для начала создадим объект для хранения нужной информации:

В цикле мы будем обновлять это состояние и отрисовывать текущее отображение:

main.js board.js

Заморозка состояния

При достижении активной фигуркой низа игрового поля, ее нужно «заморозить» в текущем положении и создать новое активное тетрамино.

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

Добавим метод для отрисовки целого поля (с уже «замороженными» тетрамино):

Обратите внимание, что теперь объекту игрового поля тоже нужен контекст рисования, не забудьте передать его:

main.js Отрисовка уже размещенных тетрамино

Очистка линий

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

Добавим в класс Board метод для проверки, не собрана ли целая линия, которую можно удалить, и удаления всех таких линий:

Его нужно вызывать каждый раз после «заморозки» активного тетрамино при достижении низа игрового поля:

board.js Удаление собранных рядов

Система баллов

Чтобы сделать игру еще интереснее, нужно добавить баллы за сбор целых рядов.

Чем больше рядов собрано за один цикл, тем больше будет начислено очков.

При каждом изменении счета нужно обновлять данные на экране. Для этого мы обратимся к возможностям метапрограммирования в JavaScript – Proxy.

Прокси позволяет отслеживать обращение к свойствам объекта, например, для их чтения (get) или обновления (set) и реализовывать собственную логику:

Добавим логику начисления очков в обработчик события keydown :

и в метод очистки собранных рядов:

board.js

Уровни

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

Напишем отдельную функцию resetGame, в которую поместим всю логику для начала новой игры:

Теперь нужно немного обновить логику начисления очков за собранные линии. С каждым уровнем очков должно быть больше.

При сборке каждых десяти рядов, уровень будет повышаться, а скорость – увеличиваться.

Завершение игры

Игра завершается, когда пирамида фигурок достигает самого верха игрового поля.

main.js Сообщение об окончании игры

Следующая фигура

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

Получим его контекст для рисования и установим размеры:

Осталось внести изменения в метод board.drop :

Теперь игрок знает, какое тетрамино будет следующим, и может выстраивать стратегию игры.

Подсказка о следующей фигурке

Источник