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

rect.style.left = actor.pos.x * scale + "px";

rect.style.top = actor.pos.y * scale + "px";

});

return wrap;

};

Чтобы задать элементу больше одного класса, мы разделяем их имена пробелами. В коде CSS класс actorзадаёт позицию absolute. Имя типа используется в дополнительном классе для задания цвета. Нам не надо заново определять класс lava, потому что мы повторно используем класс для лавы из решётки, который мы определили ранее.

.actor { position: absolute; }

.coin { background: rgb(241, 229, 89); }

.player { background: rgb(64, 64, 64); }

При обновлении экрана метод drawFrameудаляет старое изображение актёра, если оно было, и затем перерисовывает его на новой позиции. Напрашивается использование элементов DOM в качестве актёров, но для этого нам потребовалось бы передавать слишком много дополнительной информации между кодом дисплея и кодом симуляции. Надо было бы связать актёров с элементами DOM, и код рисования должен был бы удалять элементы при исчезновении актёров. Так как обычно в игре актёров совсем немного, их перерисовка отнимает немного ресурсов.

DOMDisplay.prototype.drawFrame = function() {

if (this.actorLayer)

this.wrap.removeChild(this.actorLayer);

this.actorLayer = this.wrap.appendChild(this.drawActors());

this.wrap.className = "game " + (this.level.status || "");

this.scrollPlayerIntoView();

};

Добавив в обёртку wrapperтекущий статус уровня в виде класса, мы можем стилизовать персонажа по-разному в зависимости от того, выиграна игра или проиграна. Мы добавим правило CSS, которое работает, только когда у игрока есть потомок с заданным классом.

.lost .player {

background: rgb(160, 64, 64);

}

.won .player {

box-shadow: -4px -7px 8px white, 4px -7px 8px white;

}

После прикосновения к лаве цвета игрока становятся тёмно-красными, будто он сгорел. Когда последняя монетка собрана, мы используем размытые тени для создания эффекта сияния.

Нельзя предполагать, что уровни всегда вмещаются в окно просмотра. Поэтому нам нужен scrollPlayerIntoView– он нужен для гарантии того, что если уровень не влезает в окно, он будет прокручен, чтобы игрок всегда был близко к центру. Следующий CSS задаёт обёртке максимальный размер, и гарантирует, что всё вылезающее за него не видно. Также мы задаём элементу позицию relative, чтобы актёры внутри него располагались относительно его левого верхнего угла.

.game {

overflow: hidden;

max-width: 600px;

max-height: 450px;

position: relative;

}

В методе scrollPlayerIntoViewмы находим положение игрока и обновляем позицию прокрутки обёртывающего элемента. Мы меняем позицию, работая со свойствами scrollLeftи scrollTop, когда игрок подходит близко к краю.

DOMDisplay.prototype.scrollPlayerIntoView = function() {

var width = this.wrap.clientWidth;

var height = this.wrap.clientHeight;

var margin = width / 3;

// The viewport

var left = this.wrap.scrollLeft, right = left + width;

var top = this.wrap.scrollTop, bottom = top + height;

var player = this.level.player;

var center = player.pos.plus(player.size.times(0.5))

.times(scale);

if (center.x < left + margin)

this.wrap.scrollLeft = center.x - margin;

else if (center.x > right - margin)

this.wrap.scrollLeft = center.x + margin - width;

if (center.y < top + margin)

this.wrap.scrollTop = center.y - margin;

else if (center.y > bottom - margin)

this.wrap.scrollTop = center.y + margin - height;

};

Метод нахождения центра игрока показывает, как методы наших типов Vectorпозволяют записывать расчёты, производимые с объектами, наглядно. Чтобы найти центр актёра, мы добавляем его позицию (его левый верхний угол) и половину высоты. Это центр в координатах уровня, но нам он нужен в координатах пикселей, поэтому мы умножаем результирующий вектор на наш масштаб.

Затем серия проверок подтверждает, что игрок не находится вне доступного пространства. Иногда в результате будут заданы неправильные координаты прокрутки, ниже нуля или больше, чем размер прокручиваемого элемента. Но это не страшно – DOM автоматически ограничит их допустимыми значениями. Если назначить scrollLeftзначение -10, он будет равен 0.

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

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

DOMDisplay.prototype.clear = function() {

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