Воодушевленный последними постами на Хабре по теме написания минималистичных игр в 30 строк, решил и я попробовать «вставить свои 5 копеек», точнее, 30 строк js-кода. Наиболее подходящей кандидатом мне показался тетрис, к тому же, всегда было интерестно понять и реализовать его алгоритм, да всё руки не доходили.
Итак, к концу бессонной ночи, в мире появился еще один очередной клон тетриса. С небольшой натяжкой он втискивается в заданные рамки (30 строк), но строки эти, всё же длиннее, чем мне бы лично хотелось. Желающие опробовать в действии и посмотреть код, могут сделать это здесь.
Особенности реализации:
Игровое поле построено на основе таблицы, а отрисовка блоков осуществляется за счет изменения цвета фона конкретной ячейки. Манипуляции с DOM производятся за счет Table object, который входит в DOM 0, и предоставляет возможность обращаться к строкам и ячейкам напрямую через коллекции rows и cells соотвественно. Таким образом, нет необходимости искать элементы по их айдишникам или же классам. В виду того, что внутреннее представление игрового поля хранится в виде двухмерного массива чисел (значения определяют цвет ячейки), мы имеем прямое соответствие данных и их представления — и там, и там к каждой конкретной ячейке можно обратиться по её x и y. Изначально игровое поле пусто — массивы забиты нулями, а ячейки не имеют фона.
Генерация html поля изначально занимала больше десятка строк, так как была реализована в виде цикла 2-ной вложенности и пачки вызовов document.createElement и т.д. Ближе к финалу реализации основного алгоритма игры, это очень сильно стало бросаться в глаза. Конечно, можно было бы сразу вставить таблицу в хтмл, но это было как-то не спортивно, да и просто лень, потому, было принято решение отказаться от использования функций предоставляемых DOM для создания новых элементов, в пользу старого доброго innerHTML и склейки таблицы из строк. Для конкатенации и повторения строк используются метод Array.join и тот факт, что инициализация конструктора массива целым числом, даёт в результате массив наполненный указанным количеством undefined-ов. Подобным же образом генерируется и двухмерный массив для внутреннего представления поля.
Описания всех типов блоков, а их в классическом тетрисе 7 шт, хранятся в виде массивов точек, содержащих смещения относительно «центра» самого блока — вокруг этой точки и происходит вращение, а сам алгоритм вращения был выведен по большей части эмпирическим путем после часа-двух ломания головы по этому вопросу. Возможно, кто-то из читателей, обоснует и объяснит более научным образом полученые результаты, а пока вкратце основная идея: имеются 4 положения блока, полученые путём его поворота на 90 градусов на каждом шаге, и координаты составляющих его точек преобразуются таким образом:
В действительности, только 3 фигуры можно вращать во всех 4 направлениях, остальные — только 2, а кубик так и вообще невращаем. Вернее, алгоритм их способен провернуть, но только выглядит это не слишком красиво, потому, часть поворотов для конкретных фигур ограничена и их описания упорядочено соотвествующих образом («кубик», «палка», 2 зигзага ...).
В целях компактности кода, активно использовались побитовые И, так как позволяют реализовать проверку четности/нечетности в очень лаконичном виде (проверка состояния младшего бита), а также вместе с проверкой 2-го и 3-го бита в некоторых выражениях. К примеру, это используется в обработчике нажатия клавиш и алгоритме поворота блока.
Данная «реинкарнация» тетриса строилась по собирательному образу, уходящему корнями в моё детство, частично что-то заимствуя от самого первого для меня варианта на «ПК-01 Львів» начала 90-х, китайских Brick Game и Dendy середины 90-х прошлого, и, возможно, несколько более поздних отложений времён J2ME и Windows Mobile, начала этого века. Другие возможные совпадения абсолютно случайны, и автор не несёт за них никакой ответственности.
Итак, к концу бессонной ночи, в мире появился еще один очередной клон тетриса. С небольшой натяжкой он втискивается в заданные рамки (30 строк), но строки эти, всё же длиннее, чем мне бы лично хотелось. Желающие опробовать в действии и посмотреть код, могут сделать это здесь.
Особенности реализации:
- Управление стрелками на клавиатуре
- Повышение уровня сложности каждые 5 строк
- Прогрессивный подсчет очков в зависимости от количества заполенных строк за раз и уровня сложности
- «Честный» поворот блоков по часовой стрелке
- «Отскок» блока при повороте от препятствий
- Разноцветные блоки
- Генерация разметки игрового поля js-кодом
Игровое поле построено на основе таблицы, а отрисовка блоков осуществляется за счет изменения цвета фона конкретной ячейки. Манипуляции с DOM производятся за счет Table object, который входит в DOM 0, и предоставляет возможность обращаться к строкам и ячейкам напрямую через коллекции rows и cells соотвественно. Таким образом, нет необходимости искать элементы по их айдишникам или же классам. В виду того, что внутреннее представление игрового поля хранится в виде двухмерного массива чисел (значения определяют цвет ячейки), мы имеем прямое соответствие данных и их представления — и там, и там к каждой конкретной ячейке можно обратиться по её x и y. Изначально игровое поле пусто — массивы забиты нулями, а ячейки не имеют фона.
Генерация html поля изначально занимала больше десятка строк, так как была реализована в виде цикла 2-ной вложенности и пачки вызовов document.createElement и т.д. Ближе к финалу реализации основного алгоритма игры, это очень сильно стало бросаться в глаза. Конечно, можно было бы сразу вставить таблицу в хтмл, но это было как-то не спортивно, да и просто лень, потому, было принято решение отказаться от использования функций предоставляемых DOM для создания новых элементов, в пользу старого доброго innerHTML и склейки таблицы из строк. Для конкатенации и повторения строк используются метод Array.join и тот факт, что инициализация конструктора массива целым числом, даёт в результате массив наполненный указанным количеством undefined-ов. Подобным же образом генерируется и двухмерный массив для внутреннего представления поля.
Описания всех типов блоков, а их в классическом тетрисе 7 шт, хранятся в виде массивов точек, содержащих смещения относительно «центра» самого блока — вокруг этой точки и происходит вращение, а сам алгоритм вращения был выведен по большей части эмпирическим путем после часа-двух ломания головы по этому вопросу. Возможно, кто-то из читателей, обоснует и объяснит более научным образом полученые результаты, а пока вкратце основная идея: имеются 4 положения блока, полученые путём его поворота на 90 градусов на каждом шаге, и координаты составляющих его точек преобразуются таким образом:
- ( x, y )
- ( -y, x )
- ( -x, -y )
- ( y, -x )
В действительности, только 3 фигуры можно вращать во всех 4 направлениях, остальные — только 2, а кубик так и вообще невращаем. Вернее, алгоритм их способен провернуть, но только выглядит это не слишком красиво, потому, часть поворотов для конкретных фигур ограничена и их описания упорядочено соотвествующих образом («кубик», «палка», 2 зигзага ...).
В целях компактности кода, активно использовались побитовые И, так как позволяют реализовать проверку четности/нечетности в очень лаконичном виде (проверка состояния младшего бита), а также вместе с проверкой 2-го и 3-го бита в некоторых выражениях. К примеру, это используется в обработчике нажатия клавиш и алгоритме поворота блока.
Данная «реинкарнация» тетриса строилась по собирательному образу, уходящему корнями в моё детство, частично что-то заимствуя от самого первого для меня варианта на «ПК-01 Львів» начала 90-х, китайских Brick Game и Dendy середины 90-х прошлого, и, возможно, несколько более поздних отложений времён J2ME и Windows Mobile, начала этого века. Другие возможные совпадения абсолютно случайны, и автор не несёт за них никакой ответственности.