Ну вот и закончена еще одна мини-игра «Волк и яйца» на JavaScript. Это игра про волка из мультсериала «Ну погоди», который прыгает с корзинкой и ловит яйца из под курицы. Если вы родом из 80 — 90 х, то наверняка помните советскую игру электроника. Так вот, для тех кто не помнит, это была независимая черно-белая консоль, если можно так сказать, на двух батарейках(таблетках) и имела четыре кнопки управления. На то время — это была довольна крутая штука, так как игровые приставки типа Dendy и Sega только собирались входить в моду в нашей стране. Эта советская игрушка мне очень нравилась, так что сейчас пройти мимо такой замечательной идеи — реализовать данную игру на скрипте, я просто не смог.
Обработка графики
Считаю уместным упомянуть о графике, которую я использовал, в данной мини-игре. Так как мои навыки в дизайнерском ремесле не самые лучшие, то все графические элементы были взяты из поисковика. Обработку графики я производил средствами графического редактора Pixso. Также на помощь мне пришли онлайн сервисы для конвертации изображения, сжатия, умной замены цвета и умного удаления фона. После некоторых манипуляций и нескольких часов потраченного времени у меня в пользовании оказались необходимые мне изображения, в формате PNG, с нужными размерами и прозрачным фоном.
Спрайты для «Волк и яйца»
Для правильной загрузки изображения волка, при изменении его положения в игровом процессе, я создал один файл с 6-ю спрайтами. Это исключает возможные мелькания изображения, особенно в начале игры, так как спрайт загружается в память и компьютер работает с одним файлом. Управление отображаемой частью спрайта происходит путем изменения класса. Это значит, что для каждого класса свой background-position со смещением в процентах. Этот способ очень прост и универсален, поэтому я его часто использую.
Скрипт
Что касается скрипта, то скрипт получился довольно простой. Каких то сложностей и проблем не было. Но из особенностей, хочу отметить, что потребовалась одна функция из «советов бывалых» на StackOverflow, которая удаляет все существующие таймеры в event loop. Данная функция потребовалась для удаления таймеров для тех яиц, которые катились в момент выигрыша или паузы. Сами яйца в DOM удаляются с помощью метода remove(). А таймеры с помощью функции clearAllTimeouts(). Если не произвести удаление всех таймеров, то по завершению этих таймеров отрабатывают звуки разбившихся яиц. Это отрабатывают те таймеры которые были привязаны по времени к яйцам, которые мы уже удалили.
Управление
Что касается управления, то в скрипте есть два варианта управления. Первый вариант — управление стрелочками, второй — сенсором. Со стрелочками все понятно, а для взаимодействия с сенсором, созданы 4-е контейнера с абсолютным позиционирование и большим з-индексом, для каждого гнезда. На каждый контейнер повешено событие click.
Ссылки
Код мини-игры «Волк и яйца» вы можете найти на странице https://github.com/Webpolka/wolf-and-eggs-sass
Чтобы поиграть и провести несколько минут за игрой, перейдите по ссылке.