Марейн Хавербеке - Выразительный JavaScript

Вот метод, обрабатывающий столкновения между игроком и другими объектами:

Level.prototype.playerTouched = function(type, actor) {

if (type == "lava" && this.status == null) {

this.status = "lost";

this.finishDelay = 1;

} else if (type == "coin") {

this.actors = this.actors.filter(function(other) {

return other != actor;

});

if (!this.actors.some(function(actor) {

return actor.type == "coin";

})) {

this.status = "won";

this.finishDelay = 1;

}

}

};

Когда мы тронули лаву, статус игры устанавливается в “lost”. Когда собрана монетка, она удаляется из массива актёров, а если это была последняя – статус игры меняется на “won”. Всё это даёт нам уровень, пригодный для анимации. Не хватает только кода, её обрабатывающего.

Для такой игры нам не нужны клавиши, эффект которых работает однократно после keypress. Нам нужен эффект, продолжающийся всё время, пока клавиша нажата (движущаяся фигурка)

Нам надо сделать обработчик клавиш, хранящий текущее состояние кнопок влево, вправо вверх и вниз. Также нам надо вызывать для них preventDefault, чтобы они не прокручивали страницу.

Следующая функция, когда ей дают объект с кодами клавиш в виде имён свойств и названиями клавиш в виде значений, возвращает другой объект, который отслеживает текущее состояние кнопок. Он регистрирует обработчики событий для событий "keydown"и "keyup", и когда код клавиши события совпадает с отслеживаемым кодом, обновляет объект.

var arrowCodes = {37: "left", 38: "up", 39: "right"};

function trackKeys(codes) {

var pressed = Object.create(null);

function handler(event) {

if (codes.hasOwnProperty(event.keyCode)) {

var down = event.type == "keydown";

pressed[codes[event.keyCode]] = down;

event.preventDefault();

}

}

addEventListener("keydown", handler);

addEventListener("keyup", handler);

return pressed;

}

Обратите внимание, как одна функция обработчика используется для событий обоих типов. Она проверяет свойство typeобъекта события, определяя, надо ли обновлять состояние кнопки на true( "keydown") или false( "keyup").

Функция requestAnimationFrame, которую мы видели в главе 13, предоставляет хороший способ анимировать игру. Но интерфейс её примитивен – его использование заставляет нас отслеживать момент времени, в который она была вызвана в прошлый раз, и вызывать requestAnimationFrameкаждый раз после каждого кадра.

Давайте определим вспомогательную функцию, оборачивающую эти скучные операции в удобный интерфейс, и позволяющую нам просто вызвать runAnimation, задавая ей функцию, которая принимает разницу во времени и рисует один кадр. Когда функция frameвозвращает false, анимация останавливается.

function runAnimation(frameFunc) {

var lastTime = null;

function frame(time) {

var stop = false;

if (lastTime != null) {

var timeStep = Math.min(time - lastTime, 100) / 1000;

stop = frameFunc(timeStep) === false;

}

lastTime = time;

if (!stop)

requestAnimationFrame(frame);

}

requestAnimationFrame(frame);

}

Я назначил максимальное время для кадра в 100 миллисекунд (1/10 секунды). Когда закладка или окно браузера спрятано, вызовы requestAnimationFrameпрекратятся, пока закладка или окно не станут снова активны. В этом случае, разница между lastTimeи текущим временем будет равна тому времени, в течение которого страница была спрятана. Продвигать игру на всё это время было бы глупо и затратно (вспомните разделение времени в методе animate).

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

Функция runLevelпринимает объект Level, конструктор для display, и, необязательным параметром – функцию. Она выводит уровень в document.bodyи позволяет пользователю играть на нём. Когда уровень закончен (победа или поражение), runLevelочищает экран, останавливает анимацию, а если задана функция andThen, вызывает её со статусом уровня.

var arrows = trackKeys(arrowCodes);

function runLevel(level, Display, andThen) {

var display = new Display(document.body, level);

runAnimation(function(step) {

level.animate(step, arrows);

display.drawFrame(step);

if (level.isFinished()) {

display.clear();

if (andThen)

andThen(level.status);

return false;

}

});

}

Игра – это последовательность уровней. Когда игрок погибает, уровень начинается заново. Когда уровень закончен, мы переходим на следующий. Это можно выразить следующей функцией, принимающей массив планов уровней (массив строк) и конструктор display.