Пользователь
0,0
рейтинг
20 ноября 2013 в 16:18

Разработка → Еще один Tetris на JS (~30 «условных» строк) из песочницы

Воодушевленный последними постами на Хабре по теме написания минималистичных игр в 30 строк, решил и я попробовать «вставить свои 5 копеек», точнее, 30 строк js-кода. Наиболее подходящей кандидатом мне показался тетрис, к тому же, всегда было интерестно понять и реализовать его алгоритм, да всё руки не доходили.



Итак, к концу бессонной ночи, в мире появился еще один очередной клон тетриса. С небольшой натяжкой он втискивается в заданные рамки (30 строк), но строки эти, всё же длиннее, чем мне бы лично хотелось. Желающие опробовать в действии и посмотреть код, могут сделать это здесь.

Особенности реализации:
  • Управление стрелками на клавиатуре
  • Повышение уровня сложности каждые 5 строк
  • Прогрессивный подсчет очков в зависимости от количества заполенных строк за раз и уровня сложности
  • «Честный» поворот блоков по часовой стрелке
  • «Отскок» блока при повороте от препятствий
  • Разноцветные блоки
  • Генерация разметки игрового поля js-кодом


Игровое поле построено на основе таблицы, а отрисовка блоков осуществляется за счет изменения цвета фона конкретной ячейки. Манипуляции с DOM производятся за счет Table object, который входит в DOM 0, и предоставляет возможность обращаться к строкам и ячейкам напрямую через коллекции rows и cells соотвественно. Таким образом, нет необходимости искать элементы по их айдишникам или же классам. В виду того, что внутреннее представление игрового поля хранится в виде двухмерного массива чисел (значения определяют цвет ячейки), мы имеем прямое соответствие данных и их представления — и там, и там к каждой конкретной ячейке можно обратиться по её x и y. Изначально игровое поле пусто — массивы забиты нулями, а ячейки не имеют фона.

Генерация html поля изначально занимала больше десятка строк, так как была реализована в виде цикла 2-ной вложенности и пачки вызовов document.createElement и т.д. Ближе к финалу реализации основного алгоритма игры, это очень сильно стало бросаться в глаза. Конечно, можно было бы сразу вставить таблицу в хтмл, но это было как-то не спортивно, да и просто лень, потому, было принято решение отказаться от использования функций предоставляемых DOM для создания новых элементов, в пользу старого доброго innerHTML и склейки таблицы из строк. Для конкатенации и повторения строк используются метод Array.join и тот факт, что инициализация конструктора массива целым числом, даёт в результате массив наполненный указанным количеством undefined-ов. Подобным же образом генерируется и двухмерный массив для внутреннего представления поля.

Описания всех типов блоков, а их в классическом тетрисе 7 шт, хранятся в виде массивов точек, содержащих смещения относительно «центра» самого блока — вокруг этой точки и происходит вращение, а сам алгоритм вращения был выведен по большей части эмпирическим путем после часа-двух ломания головы по этому вопросу. Возможно, кто-то из читателей, обоснует и объяснит более научным образом полученые результаты, а пока вкратце основная идея: имеются 4 положения блока, полученые путём его поворота на 90 градусов на каждом шаге, и координаты составляющих его точек преобразуются таким образом:

  1. ( x, y )
  2. ( -y, x )
  3. ( -x, -y )
  4. ( y, -x )


В действительности, только 3 фигуры можно вращать во всех 4 направлениях, остальные — только 2, а кубик так и вообще невращаем. Вернее, алгоритм их способен провернуть, но только выглядит это не слишком красиво, потому, часть поворотов для конкретных фигур ограничена и их описания упорядочено соотвествующих образом («кубик», «палка», 2 зигзага ...).

В целях компактности кода, активно использовались побитовые И, так как позволяют реализовать проверку четности/нечетности в очень лаконичном виде (проверка состояния младшего бита), а также вместе с проверкой 2-го и 3-го бита в некоторых выражениях. К примеру, это используется в обработчике нажатия клавиш и алгоритме поворота блока.

Данная «реинкарнация» тетриса строилась по собирательному образу, уходящему корнями в моё детство, частично что-то заимствуя от самого первого для меня варианта на «ПК-01 Львів» начала 90-х, китайских Brick Game и Dendy середины 90-х прошлого, и, возможно, несколько более поздних отложений времён J2ME и Windows Mobile, начала этого века. Другие возможные совпадения абсолютно случайны, и автор не несёт за них никакой ответственности.
@gheadcutter
карма
0,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (6)

  • +6
    Да купите вы уже домен 30lines.ru или .com или .io или какой-нибудь не занятый и меряйтесь там письками количеством и качеством кода.
    • +3
      Кто-то уже это сделал.
      • 0
        Забавно, значит идея украдена
      • 0
        странно не нашел там тетрис, нашел только его аналог(вместо фигур цифры или символы) но никак не творение автора.
  • +7
    Горшочек не вари
    • 0
      Про горшочек тоже уже было :)

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