The Homer Drums - браузерная игра⁠⁠

Привет, Пикабу!

Сначала небольшая видеодемонстрация того, о чём пойдёт речь:

А теперь, собственно, само описание.

Вероятно, кто-то из вас мог когда-то видеть coub https://coub.com/view/13u3n70o:

Данный coub является фрагментом эпизода Симпсонов "Jazzy and the Pussycats" (сезон 18, эпизод 2). Ссылка на википедию: https://en.wikipedia.org/wiki/Jazzy_and_the_Pussycats. Мне так понравилась эта “ударная установка”, что я воссоздал её и воплотил в виде одностраничного сайта https://thehomerdrums.xyz/

Видеофрагмент серии был сконвертирован в gif и импортирован в Photoshop, где каждый кадр стал отдельным слоем. Рисовать я не умею, зато умею пользоваться инструментами “Перо” и “Заливка”:) В видео ударная установка никогда не умещалась в один кадр целиком. В фотошопе мне удалось собрать все части воедино. Неподвижные элементы ударной установки образовали фон для игрового поля сайта. Каждого из семи “Гомеров” обводил покадрово. Таким образом, было получено семь наборов спрайтов. Кое-что всё-таки пришлось дорисовать самому: одну из ножек для левой барабанной стойки и рот для Гомера с бас-бочки.

С извлечением и нарезкой звуков никаких трудностей не возникло.

На сайте анимацию и звук запрограммировал при помощи jQuery (JavaScript).

Я практически не занимался адаптацией сайта под мобильные устройства - лучше всего он будет смотреться на мониторе мака или ПК. Если игровая область не помещается на экране целиком, то просто немного уменьшите масштаб страницы при помощи Ctrl + “-“. Если соотношение сторон смартфона/планшета приблизительно 16:9, то и на них ударная установка будет выглядеть вполне достойно.

Данная разработка сделана чисто по приколу и никакой смысловой нагрузки не несёт :)
Приятной игры!