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

Остаётся игрок. Движение игрока обрабатывается по разным осям отдельно, потому что встреча с полом не должна мешать горизонтальному перемещению, а встреча со стеной – падению или прыжку. Этот метод работает с горизонтальным перемещением.

var playerXSpeed = 7;

Player.prototype.moveX = function(step, level, keys) {

this.speed.x = 0;

if (keys.left) this.speed.x -= playerXSpeed;

if (keys.right) this.speed.x += playerXSpeed;

var motion = new Vector(this.speed.x * step, 0);

var newPos = this.pos.plus(motion);

var obstacle = level.obstacleAt(newPos, this.size);

if (obstacle)

level.playerTouched(obstacle);

else

this.pos = newPos;

};

Перемещение подсчитывается на основе состояния клавиш «направо» и «налево». Когда перемещение приводит к встрече с препятствием, вызывается метод уровня playerTouched, который обрабатывает гибель в лаве и сбор монеток. В ином случае объект обновляет свою позицию.

Движение по вертикали работает сходным образом, но симулирует прыжки и гравитацию.

var gravity = 30;

var jumpSpeed = 17;

Player.prototype.moveY = function(step, level, keys) {

this.speed.y += step * gravity;

var motion = new Vector(0, this.speed.y * step);

var newPos = this.pos.plus(motion);

var obstacle = level.obstacleAt(newPos, this.size);

if (obstacle) {

level.playerTouched(obstacle);

if (keys.up && this.speed.y > 0)

this.speed.y = -jumpSpeed;

else

this.speed.y = 0;

} else {

this.pos = newPos;

}

};

В начале метода игрок ускоряется по вертикали, чтобы обеспечить гравитацию. Гравитация, скорость прыжка и все остальные константы в игре были подобраны методом проб и ошибок. Я проверял разные значения, пока меня не удовлетворил результат.

Затем мы снова проверяем препятствия. Если мы его встретили, возможны два варианта. Когда нажата клавиша «вверх», и мы двигаемся вниз (то есть, мы встретились с чем-то, что находится под нами), скорости присваивается довольно большое отрицательное значение. В результате игрок прыгает. В ином случае, мы просто во что-то врезались и скорость обнуляется.

Сам метод actследующий:

Player.prototype.act = function(step, level, keys) {

this.moveX(step, level, keys);

this.moveY(step, level, keys);

var otherActor = level.actorAt(this);

if (otherActor)

level.playerTouched(otherActor.type, otherActor);

// Losing animation

if (level.status == "lost") {

this.pos.y += step;

this.size.y -= step;

}

};

После движения метод проверяет других актёров, с которыми игрок сталкивается, и опять вызывает playerTouched, если таковой нашёлся. В этот раз он передаёт вторым аргументом объект actor, так как если другим актёром была монетка, метод playerTouchedдолжен знать, какую именно монетку мы собрали.

В финале, когда игрок погибает (дотронувшись до лавы), мы делаем небольшую анимацию, из-за которой персонаж сжимается (или тонет), уменьшая высоту объекта player.

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

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, вызывает её со статусом уровня.