Игровой цикл

Всем привет.

Около года назад я решил написать игру. Перед этим я пару раз участвовал в Ludum Dare челлендже. Это всемирное соревновние, где за 48 часов надо сделать игру по теме, которая объявляется в день начала соровенования. На людуме я обычно рисовал, а не программировал да и на третий раз понял, что мне совсем не нравится такой формат. Потеешь все выходные без перерыва, а в результате получается что-то сырое и грустное.

Тем не менее игру написать хотелось. С нуля. Безо всяких фреймворков и готовых решений. Понимая, что это может занять довольно много времени, я хотел получать не только удовольствие от процесса, но еще и какую-то пользу.

По специальности я frontend разработчик. Понятное дело, что в рамках рабочих проектов не всегда получается пощупать все технологии в вебе, которые будет интересно да и полезно узнать. Поэтому, недолго думая, я решил писать игру под браузер на языке JavaScript.

В начале я даже не знал, о чем будет игра, но затягивать сильно не хотелось. На самом деле, я уже не раз пытался написать игру. Еще с универа мы с друзьями несколько раз собирались это сделать, но обычно все заканчивалось на этапе обсуждения идеи в какой-нибудь кафешке. Поэтому было важно не тормозить и начать уже что-то писать.

Тут мне и пришла в голову мысль сделать игру, основанную на идее с одного из наших людумов. Геймплеем игра сильно напоминает пользовательскую карту Warlocks из Warcraft III, только вместо мужиков в платьях на арене дерутся роботизированные петухи, а называется она Cyber Cocks.

Ну что же, идея есть, арт с того людума тоже сохранился, поэтому можно сразу приступать к написанию кода.

Так получилось, что в плане разработки игр, помимо людума, я ещё участвовал в проведении курсов по разработке на C++. Это были летние курсы и их целью было написание полноценной игры в консоли. По большей части я только делал ревью кода учеников, но как-то раз мне довелось прочитать одну небольшую лекцию. Это была лекция о game loop.

Game loop — это сердце практически любой игры. Из названия можно понять, что это цикл, цикл в котором выполняется вся ваша игра от обработки нажатий клавиш клавиатуры до расчета физики и отрисовки графики на экране. За один проход такого цикла нужно успеть просчитать все что происходит в игре, а затем отрисовать на экране ее текущее состояние. Если код выполняется достаточно быстро, то вы увидите плавную анимированную картинку, в противном же случае она начнёт лагать. Отсюда следует, что чем мощнее у вас железо, тем быстрее оно будет справляться с обработкой кода игры, а значит в одну итерацию game loop можно будет запихать больше всяких крутых штук: сделать навороченную графику, сложную физику и тд. Главное не переборщить.

Собственно я решил начать с него, правда никакого наполнения для цикла у меня ещё не было. Поэтому чтобы было не так грустно, я решил воткнуть на html страницу с игрой цветной квадратный div, а в game loop на каждой итерации немного менять его цвет, двигаясь по цветовому кругу.