Я узнал о JS13K Соревнование по созданию игры JavaScript/HTML5 менее чем в 13 КБ, еще в июле.
Я всегда хотел делать игры; Это большая часть того, почему я попал в программирование. Однако, находясь в разгар поиска работы, я чувствую, что у меня никогда не хватает времени, чтобы заняться этим, поскольку я пытаюсь не отставать от изучения всех веб -технологий и структур, алгоритмов практики и т. Д. Мое «хобби» должно сидеть в стороне.
Я подумал, что с тех пор, как я в основном кодировал в JavaScript, мне не пришлось бы перегружать себя, пытаясь быстро выучить кучу дополнительных вещей в дополнение к моему уже сложенному списку вещей, которые я пытаюсь выучить, поэтому я определенно мог бы ввести. Конкурс длился 1 месяц, с 13 августа по 13 сентября.
Тема/мозговой штурм
Тема этого года была 404, как в ошибке не найдена. Я придумал концепцию, которая была бы вроде того, как и щелкнуть, но я отказался от нее, потому что у меня не было много времени, чтобы придумать головоломки и историю. Тогда я подумал, как насчет убийцевого робота с недостающим файлом kill.exe? Игрок мог играть, когда робот роился каким -то врагом, и им понадобится другой способ победить их. Как насчет того, чтобы принести им еду? Я подумал, что могу сделать игру, в которой пища нерестится в случайных местах, когда враги роятся, и вы должны принести им любую еду, которую они хотят.
Тогда я подумал, как насчет этой старой игры Bugs Bunny Game Crazy Castle? Я мог бы сделать что -то подобное, но вместо того, чтобы избежать врагов и собирать морковь, вы найдете и приносите им продукты, которые они хотят. Если вы вступаете в контакт с ними без правильной пищи, которую вы теряете. Мне очень понравилась эта идея, но опять же, у меня не было много времени, чтобы придумать кучу разных уровней. Наконец я подумал, что насчет чего-то вроде Pac-Man, где есть одна карта? Эта идея сработала для меня; Там может быть «фуд -корт», и игрок может застегнуть застегнуть правильную еду для правильных врагов. О да, я решил, что враги будут инопланетянами, которым действительно нравятся тако и пончики.
Создание игрового искусства
После того, как я остановился на идее, которую я использовал Асеприт Чтобы сделать мое игровое искусство. У меня не так много опыта пикселей Так что я просто раскрывал это. К счастью, Aseprite довольно прост и интересно использовать, поэтому я смог придумать дизайн, которые мне нравились.
Код времени
Я решил сделать все с нуля, в отличие от использования одного из игровых двигателей со страницы ресурса JS13K. Я просто чувствовал, что даже если бы я не придумал лучшую игру, я хотел научиться делать все сам.
Организация
Я создал main.js Где я занимался основной игрой, а также с любыми слушателями событий и несколькими глобальными переменными для создания игрового объекта и для импорта спрайтов и звуков. В зависимости от текущего Game.state , gameloop () Либо отобразил экран заголовка, игра над экраном, либо называется requestAnimationFrame и зациклен game.update () (который обрабатывал игровой логику) и game.draw () (который обрабатывал рисунок с Canvas ).
Почти каждый другой класс, такой как игрок, враг, еда, энемиспана и т. Д. GameObject Класс, который обрабатывал столкновения, анимации и переменные, такие как X, Y, ширина, высота, а также местоположение источника и размер каждого объекта на листе спрайта. Я, вероятно, в конечном итоге вернусь и покраслю кое -что, потому что многие занятия для детей не делают ничего особенного или другого. В данный момент было просто проще создавать детский класс и отслеживать все объекты определенного типа, используя статические переменные класса. Например:
import GameObject from './GameObject.js';
export default class FoodCourt extends GameObject {
static all = [];
constructor(srcX, srcY, srcW = 16, srcH = 16, x, y, w, h, type) {
super(srcX, srcY, srcW, srcH, x, y, w, h, type);
FoodCourt.all.push(this);
}
}
Таким образом, я мог бы просто использовать Foodcourt.all Чтобы пройти только пищевые корты, когда игрок находился в определенном диапазоне, чтобы проверить столкновения, а не зацикливаться на всех игровых объектах. Я мог бы вернуться и просто использовать Статические пищевые костюмы = [] в Gameoject класс и подтолкните все вновь созданные пищевые продукты к этому вместо создания целого ребенка класса.
Борьба
Я сделал свои спрайты 16×16 или меньше, и поэтому их нужно было увеличить. Я также хотел, чтобы вся игровая карта масштабировалась в зависимости от размера окна, но ей нужно было оставаться пропорционально. Я провел много времени, боров с этим. Я заставил спрайты масштабироваться, но затем столкновения не работали правильно, и мой персонаж продолжал снимать с боковых сторон экрана. Я провел некоторое исследование и обнаружил, что в основном вы имеете дело с 2 размерами холста: нативной высотой и шириной, используемыми для всей вашей игровой логики, и высотой и шириной холста, используемой для дисплея. Если вам любопытно, как я это пошел, я написал здесь пост.
По мере приближения крайнего срока мне пришлось разрезать много своих идей и просто получить что -то работать. Я добавил мобильные элементы управления, которые в порядке, но могут быть намного лучше, и я смог создать несколько звуков, используя JSFXR .
Игра должна была в 7:00 утра в мое время (13: 00 -е место) в воскресенье, 13 сентября. Я был так же, как и в субботу вечером около 21:30. Я использовал несколько советов, которые я нашел в посте Yvonnick Frin, чтобы скомпилировать и застегнуть игру и это было под необходимым 13 КБ. Ура!
Я начал заполнять форму, чтобы отправить свою игру, и я столкнулся с ошибкой, потому что у меня не было index.html в корне. Это было в SRC Наряду со всеми моими файлами JS, а не то, как я обычно организую свою структуру файла, Но так гид сказал мне сделать это. Я не следовал всему гиду, хотя, Так что, может быть, я что -то пропустил дальше. В любом случае, я реорганизовал структуру файла и больше не мог получить игру, чтобы найти свои изображения и звуки. Затем, когда я получил его, он больше не сжимал до 13 КБ. Я был очень смущен. Я попробовал несколько методов сжатия и заработать все. Я даже скопировал весь свой код из отдельных файлов в 1 файл и попробовал онлайн -мини -микросы, и я попробовал еще один JS13K стартер, у которого есть сценарии, чтобы сделать какое -то высокое сжатие файлов и застегнуть для вас. Я ничего не делал, и я не мог понять, почему. Я выкопал сценарии и начал пытаться узнать, что они делают, как Архивер работает и т. д.
Около 4:00 утра я чувствовал себя побежденным, и я готовился сдаться и просто был счастлив, что сделал игру. Я закрыл компьютер и пошел, чтобы мыть на постель. Пока я чистил зубы, я подумал о том, как в первый раз, когда я застегнул настройку, это было хорошо, за исключением того, что структура файла была неправильной. Я решил, что вернусь к своему компьютеру и приложу ему одно последнее усилие, вернувшись к этой первой попытке и используя то, что я узнал, возившись со сценариями. Это сработало… ЭТО СРАБОТАЛО! Я не могу поверить, что был готов сдаться, но я так рад, что этого не сделал.
Вы можете играть здесь, если хотите: Kill.exe не обнаружена
Оригинал: “https://dev.to/robotspacefish/my-experience-entering-js13k-80i”