Создание игры с помощью JavaScript

Смотрите вступительный пост для контекста.

Петля

В общем, разработка игры начинается с игрового цикла. Если вы приехали из делового мира разработки программного обеспечения, это будет странно. Вы не полагаетесь на события. Фил Хаак однажды спросил меня «почему петля?», На что я ответил «э-э…». Тем не менее, гораздо лучший ответ был бы на стеке потока .

Итак, мы должны использовать мастер-цикл. Если наша среда выполнения — браузер, как настроить этот цикл? Существует относительно новый API под названием, requestAnimationFrameи это то, что большинство людей рекомендуют. Проверьте это для деталей:

• Пол Ирландский
• Команда IE

(Я помню, что читал что-то негативное об API, но я не смог найти это снова.)

Я использовал requestAnimationFrameпрокладку, упомянутую в посте ирландского Пола выше. Подкладка необходима только для старых браузеров, в которых не реализован API. Кстати, мы называем каждую итерацию цикла «кадром» из-за аналогии с традиционной анимацией.

Реализация

Теперь, когда мы убедились, что requestAnimationFrameприсутствует, мы можем перейти к нашему игровому циклу. Вот загрузочный код моей игры (ну, ранняя версия):

var canvas,        // the visible canvas element    
    surface,       // the 2d context of `canvas`
    currentScreen; // the currently rendered screen for the game

function beginLoop() {
    var frameId = 0;
    var lastFrame = Date.now();

    function loop() {
        var thisFrame = Date.now();

        var elapsed = thisFrame - lastFrame;

        frameId = window.requestAnimationFrame(loop);

        currentScreen.update(elapsed);
        currentScreen.draw(surface);

        lastFrame = thisFrame;
    }

    loop();
}


canvas = document.querySelector('canvas#board');
canvas.setAttribute('width', 800);
canvas.setAttribute('height', 600);

surface = canvas.getContext('2d');

currentScreen = startScreen;
beginLoop();

Суть этой loopфункции. Имеет следующий шаг:

• захватить текущее время
• рассчитать время, прошедшее с последнего кадра
• выполнить логику игры для фрейма (это вызовы update и draw)
• запросить следующий вызов loopиспользованияrequestAnimationFrame
• записать текущее время этого кадра для расчетов в следующем

NB Этот код еще не используется frameId. Идея в том, что этот дескриптор может быть использован для остановки цикла.

beginLoopФункция есть только обеспечить закрытие для некоторых переменных , используемых для отслеживания состояния контура. Он запускает цикл с его начальным вызовом loop.