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

Было бы немного проще пробовать прокручивать позицию игрока в центр окна просмотра – но это создаёт неприятный дрожащий эффект. Во время прыжков вид будет постоянно двигаться вверх и вниз. Гораздо приятнее иметь «нейтральную» зону в середине экрана, где можно двигаться, не вызывая прокрутки.

Ещё нам необходимо очищать уровень, когда мы переходим на следующий или начинаем заново.

DOMDisplay.prototype.clear = function() {

this.wrap.parentNode.removeChild(this.wrap);

};

Теперь мы можем показать наш уровень.

var simpleLevel = new Level(simpleLevelPlan);

var display = new DOMDisplay(document.body, simpleLevel);

Тэг

Теперь нам надо добавить обработку движений – самое интересное в игре. Простой подход, который используют большинство игр – разделить время на небольшие отрезки, и на каждом шаге сдвигать актёров на дистанцию, соответствующую их скорости (расстояние в секунду), умноженное на длительность временного отрезка (в секундах).

Это просто. Сложность в том, что надо обрабатывать взаимодействие предметов. Когда игрок касается пола или стены, он не должен проходить насквозь. Игра должна замечать, когда движение одного объекта приводит к столкновению с другим и реагировать соответственно. Стены останавливают движение, монеты собираются, и так далее.

В общем случае эта задача не такая простая. Можно найти библиотеки, обычно называющиеся «физическими движками», симулирующие взаимодействия между физическими объектами в двух или трёх измерениях. В этой главе мы поступим проще, так как нам нужно обрабатывать столкновения только прямоугольных объектов.

Перед тем, как сдвинуть игрока или блок лавы, мы проверяем, не приведёт ли нас движение внутрь непустой части фона. Если да – мы отменяем движение. Реакция на это будет зависеть от типа актёра – игрок останавливается, лава отскакивает.

Подход требует использования небольших отрезков времени, чтобы объекты останавливались до соприкосновения. Если взять слишком большие отрезки, игрок будет зависать над землёй. Можно было бы использовать более сложный вариант – вычислить место непосредственного соприкосновения и подвинуть актёра туда. Мы поступим проще, и скроем его проблемы, выбрав небольшие временные отрезки.

Метод сообщает, не пересекается ли прямоугольник (заданный позицией и размером) с каким-либо непустым пространством фоновой решётки.

Level.prototype.obstacleAt = function(pos, size) {

var xStart = Math.floor(pos.x);

var xEnd = Math.ceil(pos.x + size.x);

var yStart = Math.floor(pos.y);

var yEnd = Math.ceil(pos.y + size.y);

if (xStart < 0 || xEnd > this.width || yStart < 0)

return "wall";

if (yEnd > this.height)

return "lava";

for (var y = yStart; y < yEnd; y++) {

for (var x = xStart; x < xEnd; x++) {

var fieldType = this.grid[y][x];

if (fieldType) return fieldType;

}

}

};

Метод вычисляет занимаемые телом ячейки решётки, применяя Math.floorи Math.ceilна координатах тела. Помните, что размеры ячеек – 1×1 единиц. Округляя границы тела вверх и вниз, мы получаем промежуток из ячеек фона, которых касается тело.

Если тело высовывается из уровня, мы всегда возвращаем “wall”для двух сторон и верха и “lava”для низа. Это обеспечит гибель игрока при выходе за пределы уровня. Когда тело внутри решётки, мы в цикле проходим блок квадратов решётки, найденный округлением координат, и возвращаем содержимое первого непустого квадратика.

Столкновения игрока с другими актёрами (монеты, движущаяся лава) обрабатываются после сдвига игрока. Когда движение приводит его к другому актёру, срабатывает соответствующий эффект (сбор монет или гибель).

Этот метод сканирует массив актёров, в поисках того, который накладывается на заданный аргумент:

Level.prototype.actorAt = function(actor) {

for (var i = 0; i < this.actors.length; i++) {

var other = this.actors[i];

if (other != actor &&

actor.pos.x + actor.size.x > other.pos.x &&

actor.pos.x < other.pos.x + other.size.x &&

actor.pos.y + actor.size.y > other.pos.y &&

actor.pos.y < other.pos.y + other.size.y)

return other;

}

};

Метод animateтипа Levelдаёт возможность всем актёрам уровня сдвинуться. Аргумент stepзадаёт временной промежуток. Объект keysсодержит информацию про стрелки клавиатуры, нажатые игроком.

var maxStep = 0.05;

Level.prototype.animate = function(step, keys) {

if (this.status != null)

this.finishDelay -= step;

while (step > 0) {

var thisStep = Math.min(step, maxStep);

this.actors.forEach(function(actor) {

actor.act(thisStep, this, keys);

}, this);

step -= thisStep;

}

};

Когда у свойства уровня statusесть значение, отличное от null(а это бывает, когда игрок выиграл или проиграл), мы уменьшить до нуля счётчик finishDelay, считающий время между моментом, когда произошёл выигрыш или проигрыш и моментом, когда надо заканчивать показ уровня.

Цикл whileделит временной интервал на удобные мелкие куски. Он следит, чтобы промежутки были не больше maxStep. К примеру, шаг в 0,12 секунды будет нарезан на два шага по 0,05 и остаток в 0,02

У объектов актёров есть метод act, который принимает временной шаг, объект levelи объект keys. Вот он для типа Lava, который игнорирует объект key:

Lava.prototype.act = function(step, level) {

var newPos = this.pos.plus(this.speed.times(step));

if (!level.obstacleAt(newPos, this.size))

this.pos = newPos;

else if (this.repeatPos)

this.pos = this.repeatPos;

else

this.speed = this.speed.times(-1);

};

Он считает новую позицию, добавляя результат умножения временного промежутка и текущей скорости к старой позиции. Если новую позицию не занимает препятствие, происходит перемещение. Если препятствие существует, поведение зависит от типа блока лавы. У капающей лавы есть свойство repeatPos, и она при встрече с препятствием отражается в обратную сторону. Прыгающая лава просто инвертирует скорость (умножает на -1), чтобы продолжить движение в обратном направлении.

Монеты используют метод act, чтобы дрожать. Столкновения они игнорируют, поскольку они просто подрагивают внутри своего квадрата, а столкновения с игроком будут обрабатываться методом actигрока.

var wobbleSpeed = 8, wobbleDist = 0.07;

Coin.prototype.act = function(step) {

this.wobble += step * wobbleSpeed;

var wobblePos = Math.sin(this.wobble) * wobbleDist;

this.pos = this.basePos.plus(new Vector(0, wobblePos));

};

Свойство wobbleобновляется, чтобы следить за временем, и потом используется как аргумент Math.sinдля создания волны, которая используется для подсчёта новой позиции.