В предыдущей части я сделал рабочую игру, уложившись в чуть более килобайта. Я уже побил результат оригинальной версии по размеру, правда там была кое-какая графика, которой здесь нет.
Но зато в в этой части я добавил то, чего не было в оригинальной версии: нормальное управление, и сейчас добавлю ещё подсчет очков и показ следующей фигуры.
Подсчет очков
Я завел ещё одну переменную, чтобы хранить в ней набранные очки. Ничего особенного, но нужно показывать очки на экране. У элемента canvas в Javascript есть какие-то методы, чтобы рисовать текст, но я решил пойти другим путём и рисовать цифры самостоятельно, в своём стиле.
По технологии это практически не отличается от рисования фигур Тетриса, закодированных двоичными числами. Цифры тоже будут закодированы. Кажда цифра шириной 8 пикселов и высотой 15 пикселов. Чтобы закодировать графику для одной цифры, нужно 15 байт.
Я нарисовал все цифры вот в таком виде:
Потом достал калькулятор и стал руками переписывать каждый байт, но что-то мне подсказало, что это будет длиться слишком долго. Поэтому я написал скрипт на языке PHP, который берёт картинку, ищет в ней черные кубики и переводит всё в нужные мне числа.
Получился массив, где каждые 15 чисел – это одна цифра.
Чтобы вывести цифру на экран, я поступаю с ней так же, как с фигурой Тетриса – побитно проверяю и рисую квадратики в тех местах, где встречается 1. Но только квадратики гораздо мельче, 2*2 пиксела.
Пришлось писать для этого отдельную функцию.
Следующая фигура
Чтобы нарисовать фигуру в другом месте, а не в стакане, пришлось немного переделать функцию рисования. С самой фигурой все просто – завёл ещё одну переменную, в которой хранится номер следующей фигуры. Когда подходит очередь, этот номер копируется в активную фигуру, а переменная снова получает случайное значение.
Теперь игра выглядит вот так:
В несжатом виде она всё еще занимает 3989 байт, места ещё довольно много, поэтому я хочу сделать какой-то необычный графический эффект для исчезновения кубиков. Например, чтобы они сгорали в огне. Но это требует предварительной разработки, так что пока закрываю эту задачу и вернусь к ней позже, когда будет готов эффект. А про эффекты буду делать свои материалы.
Посмотреть готовый код и проверить его работу можно онлайн.