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

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.

function runGame(plans, Display) {

function startLevel(n) {

runLevel(new Level(plans[n]), Display, function(status) {

if (status == "lost")

startLevel(n);

else if (n < plans.length - 1)

startLevel(n + 1);

else

console.log("You win!");

});

}

startLevel(0);

}

Эти функции демонстрируют необычный стиль программирования. Обе функции runAnimationи runLevel– функции высшего порядка, но не в том стиле, что мы видели в главе 5. Аргумент функций используется, чтобы подготовить вещи, которые произойдут когда-либо в будущем, и функции не возвращают ничего полезного. Их задача – запланировать действия. Оборачивая эти действия в функции, мы сохраняем их как значения, чтобы их можно было вызвать в нужный момент.

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

В переменной GAME _ LEVELSхранится набор планов уровней. Такая страница скармливает их в runGame, которая запускает саму игру.

runGame(GAME_LEVELS, DOMDisplay);

Попробуйте выиграть. Я здорово повеселился, сочиняя их.

По традиции, платформеры дают игроку ограниченное количество жизней, и вычитают по одной каждый раз при гибели игрока. Когда жизни кончаются, игра начинается заново.

Подредактируйте runGame, чтобы она поддерживала жизни. Пусть игрок начинает с трёх.

// Старая функция runGame – поменяйте её...

function runGame(plans, Display) {

function startLevel(n) {

runLevel(new Level(plans[n]), Display, function(status) {

if (status == "lost")

startLevel(n);

else if (n < plans.length - 1)

startLevel(n + 1);

else

console.log("You win!");

});

}

startLevel(0);

}

runGame(GAME_LEVELS, DOMDisplay);

Сделайте возможным ставить и снимать игру с паузы по нажатию клавиши Esc.

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

На первый взгляд может показаться, что интерфейс runAnimationне предназначен для этого – но если вы поменяете его вызов из runLevel, всё получится.

Когда получится, можете попробовать ещё кое-что. Мы регистрируем события с клавиатуры не самым лучшим способом. Объект arrows– глобальная переменная, и его обработчики событий находятся в памяти, даже если игра не запущена. Можно сказать, они утекают из системы. Расширьте trackKeys, чтоб можно было разрегистрировать обработчики и затем поменяйте runLevel, чтоб она регистрировала их на старте, и разрегистрировала на финише.

// Старая функция runLevel – поменяйте её...

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;

}

});

}

runGame(GAME_LEVELS, DOMDisplay);

Браузеры позволяют нам рисовать графику разными способами. Проще всего использовать стили для расположения и расцветки стандартных элементов DOM. Так можно добиться многого, как показал пример игры из предыдущей главы. Добавляя частично прозрачные картинки узлам, мы можем придать им любой нужный вид. Возможно даже поворачивать или искажать узлы через стиль transform.

Но такое использование DOM – не то, для чего он создавался. Некоторые задачи, типа рисования линии между двумя произвольными точками, крайне неудобно выполнять при помощи обычных элементов HTML.

Есть две альтернативы. Первая – SVG, масштабируемая векторная графика, также основанная на DOM, но без участия HTML. SVG – диалект для описания документов, который концентрируется на формах, а не тексте. SVG можно встроить в HTML, или включить через тег .

Вторая альтернатива – холст (canvas). Холст – это один элемент DOM, в котором находится картинка. Он предоставляет API для рисования форм на том месте, которое занимает элемент. Разница между холстом и SVG в том, что в SVG хранится начальное описание форм – их можно в любой момент сдвигать или менять размер. Холст же преобразовывает формы в пиксели (цветные точки растра), как только нарисует их, и не запоминает, что эти пиксели из себя представляют. Единственным способом сдвинуть форма на холсте является очистить холст (или ту часть, которая окружает форму) и перерисовать её на другом месте.

Эта книга не углубляется детально в SVG, но кратко я поясню её работу. В конце главы я вернусь к сравнительным недостаткам методов, которые нужно принять во внимание, выбирая механизм рисования для конкретного применения.

Вот документ HTML, содержащий простую SVG-картинку:

Normal HTML here.

stroke="blue" fill="none"/>

Атрибут xmlnsменяет пространство имён элемента по умолчанию. Это пространство задаётся через URL и обозначает диалект, на котором мы сейчас говорим. Тэги и , не существующие в HTML, имеют смысл в SVG – они рисуют формы, используя стиль и позицию, заданные их атрибутами.

Они создают элементы DOM так же, как теги HTML. К примеру, такой код меняет цвет элемента на cyan:

var circle = document.querySelector(«circle»);

circle.setAttribute(«fill», «cyan»);

Графику холста можно рисовать на элементе . Ему можно задать ширину и высоту, таким образом определяя его размер в пикселях.

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

Тэг поддерживает разные стили рисования. Чтобы получить доступ к интерфейсу рисования, сначала нужно создать context– объект, чьи методы предоставляют этот интерфейс. Сейчас есть два широко распространённых стиля рисования: “2d”для двумерной графики и “webgl”для трёхмерной графики при помощи интерфейса OpenGL.