Сделал примитивный раннер на JS

Пришла идея сделать клон гугловского динозаврика, чтобы хоть немного попрактиковаться в JS. Как оказалось в ходе работы, про JS я не знал ничего, кроме базовой работы с числами и переменными, даже о такой штуке, как <canvas> пришлось гуглить и методом тыка разбираться, как работают отдельные её нюансы.

Так как рисую я не очень, то изначальная версия игры выглядела вот так:

В общем-то изначальный задум был как раз в том, чтобы играться с кодом, а не затирать пеинт до дыр. Но когда я общался с HR-ом и разговор зашёл о том, чем я занимаюсь, будучи безработным, пришлось показать это творение, на что она сказала "О, прикольно! Мы когда искали jun-ов по JS, то у нас было похожее тестовое задание. Только там у ребят игры были из картинок, а не палочек". Ну, я не стал вдаваться в технические особенности и объяснять, что тут тоже используются картинки, просто они нарисованы за 30 секунд, а не скачаны со стоков за те же 30 секунд, а если бы вся игра строилась на отрисовывании отдельных палочек, то это кукушкой можно было бы двинуться, описывая каждый вектор и его движения... Но для себя я понял, что внешний вид сильно влияет на первое впечатление.
PS: Вероятно, в той фразе было просто задето моё самолюбие.

Так начались мои попытки в пиксель-арт. До этого я думал, что пиксель-арт - это довольно просто: не умеешь рисовать, так просто поставь три пикселя в ряд и скажи, что это дерево. На деле же оказалось, что придётся перепробовать 64 комбинации расстановки этих трёх пикселей, пока ты не дойдёшь до результата "Что ж, это хоть немного похоже на дерево".

Если вы вдруг надумаете лезть в пиксель-арт, вот пара советов:
1. Это может оказаться дольше и сложнее, чем казалось изначально.
2. Если сразу посмотреть любой туториал про линии в пиксель-арте - это хорошо сэкономит время.
3. Большинство вещей можно сделать, сжаф рефы из интернета и обмазав контуры. Останется только подшлифовать линии (смотри п.2) и поиграться со цветами. Это тоже хорошо экономит время.
4. Всё же в пиксель-арт сможет любой сыч.

Про техническую составляющую даже не знаю, что рассказать. Берём <canvas>, прикручиваем к нему скрипт, в скрипте рисуем человечка и двигаем всё относительно него по горизонтали. Всё, ключевой мейлстоун достигнут, ура! Дальше по очереди прикручиваем все свистелки-перделки, вроде условия столкновения с монстром и т.д. по алгоритму: придумал фичу -> подумал, как её можно было бы реализовать -> погуглил, как делается задуманное -> попробовал, потестил -> ещё погуглил в попытках разобраться, почему не заработало с первого раза -> попробовал, потестил -> хз, почему заработало, но можно идти дальше.

Звук прыжка и поражения взял тут:

В целом, на работу с кодом, пожалуй, ушло времени не больше, чем на работу с графонием. Кстати, игра сделана в HD с фреймрейтом в 60fps, но если кто считает, что это не раскроет в полной мере мощности его графического вычислительного монстра, может выгрузить игру и переделать под 8k240fps. ;)

Если есть конкретные вопросы, в которых я мог бы помочь - велком в комменты. Если есть объективная критика - тоже буду рад.