Закончена браузерная мини-игра «Змейка» на JavaScript написанная с помощью HTML5, CSS и JS. Так как это мои начальные шаги в области создания браузерных игр, то в процессе создания игры, столкнулся с некоторыми нюансами. Нюансы эти касаются разработки под мобильные телефоны и смартфоны. Конкретно мною было потрачено некоторое время на освоение взаимодействия с событиями под сенсор и написание скрипта для управления элементами в документе, с помощью имеющегося API.
Разработка под мобильник
Так же поимел определенный опыт в разработке под мобильник, что касается адаптивности. Казалось бы всё как обычно, но это не совсем так. Конкретно у меня после того как страница открылась внизу экрана постоянно висит меню браузера. Раньше, когда я верстал сайты и лэндинги и потом открывал на смартфоне, чтобы проверить, я не замечал его совсем, так как оно мне не мешало. Но теперь когда мне понадобилась вся полезная площадь экрана моего смартфона, я его заметил. Скажу сразу, убрать я его не смог поэтому я просто сделал отступ свободного места, чтобы это меню не закрывало фрагменты игры от юзера. Если вы знаете другое более корректное решение этой проблемы, то напишите в комментариях под статьей.
Оптимизация изображений
Что хочу еще отметить, так это то, что теперь я тщательно оптимизирую все изображения перед началом верстки. Я делал это и раньше, но не так придирчиво. Мог и вовсе пропустить этот пунктик для некоторых изображений, но когда моя мини-игра стала плохо смотреться с недогруженными картинками при плохом интернете, мне однозначно это не понравилось. Теперь я уделяю этому особое внимание и стараюсь добиться среднего показателя между качеством изображения и его весом в килобайтах. Если сжать изображения с предвзятостью, то оно потеряет привлекательный вид и наврядли кому то захочется играть в игру с корявыми картинками.
Звуковое сопровождение
Еще один момент, это звуковые сопровождения при каких то действиях в игре. Раньше мне это было не нужно, так как я занимался только версткой страниц для сайтов. Всякие резкие звуки на странице не особо нравятся посетителям, поэтому вставка звуков на страницу считается плохим тоном. При разработке игры, звуковое и музыкальное сопровождение — это один из важнейших факторов. Игроку должно быть комфортно и красиво. Поэтому звуки в играх — это хороший тон.
Анимация
Конечно же анимация — это один из важнейших аспектов ! Все должно летать, крутится и блестеть. Красивая игра — это залог того, что игроку захочется включить вашу игру снова.
Принцип функционирования скрипта — «Змейка» на JavaScript
Что касается принципов функционирования скрипта игры, то тут все просто. Движение змейки происходит посредством отрисовки контейнеров с абсолютным позиционирование. Координаты для каждого сегмента тела змейки берутся из массива объектов, в котором содержится змейка. Объект сегмента содержит в себе координаты X, Y и класс. Также есть массив для кирпичей. С фруктами тоже самое, но так как фрукт постоянно один на поле, то это не массив, а один объект в котором каждый раз, когда змейка его съедает, меняются координаты.
Весь код данной игры вы можете найти у меня на GitHub, либо перейдите по ссылке ниже чтобы поиграть.