углу «холста», шириной width (400 пикселей) и высотой blockSize
(10 пикселей).
Затем в строке рисуем нижнюю часть рамки — прямоугольник
в позиции (0, height - blockSize) или (0, 390). Это точка на 10 пиксе-
лей выше нижней границы «холста» и прямо у его левой границы. Так
же как и у верхней части рамки, ширина этого прямоугольника равна
width, а высота — blockSize.
На рис. 16.3 показаны верхняя и нижняя части рамки.
16. Пишем игру «Змейка»: часть 1 243
Рис. 16.3. Верхняя и нижняя части рамки
В строке мы рисуем левую часть рамки, а в строке — правую.
На рис. 16.4 показана рамка с добавлением этих двух частей.
Рис. 16.4. Левая и правая части рамки
(верхняя и нижняя части показаны светло-серым цветом)
244 Часть III. Графика
Отображение счета
Теперь давайте напишем функцию drawScore для отображения теку-
щего счета игры в верхнем левом углу «холста», как показано на рис. 16.1
на с. 238. Для отображения текста эта функция будет использовать метод
контекста рисования fi llText, который принимает строку, а также
x и y-координаты позиции, в которой эту строку нужно отобразить.
Например,
ctx.fillText("Привет, мир!", 50, 50);
напечатает на «холсте» строку «Привет, мир!» в позиции (50, 50).
На рис. 16.5 показано, как это будет выглядеть.
(50, 50)
Рис. 16.5. Строка «Привет, мир!», напечатанная в позиции (50, 50)
Взгляните, мы напечатали на «холсте» строку текста! Но что если
мы хотим поменять внешний вид этого текста, выбрать другой размер,
шрифт или выравнивание? Для игрового счета в нашей «Змейке» больше
подойдет другой шрифт, размер букв стоит увеличить, а разместить
надпись нужно в верхнем левом углу, прямо под рамкой. Поэтому пре-
жде чем написать нашу функцию drawScore, давайте получше изучим
метод fi llText и выясним, как можно управлять внешним видом текста,
отображаемого на «холсте».
16. Пишем игру «Змейка»: часть 1 245
Настройка опорной линии текста
Позиция, определяющая, где отображается текст, называется опорной
линией. По умолчанию по опорной линии выравнивается нижний левый
угол строки текста, в результате чего текст отображается над заданной
позицией и правее нее.
Чтобы изменить расположение текста относительно опорной линии,
Baseline —
можно поменять значение свойства textBaseline. По умолчанию
базовая,
это свойство имеет значение "bottom", но также вы можете задать
опорная
textBaseline значения "top" или "middle". На рис. 16.6 показано,
линия
как в каждом из этих случаев текст выравнивается относительно пози-
Bottom —
ции печати, переданной функции fi llText (показана красной точкой).
низ
Top —
bottom
middle
верх
top
Middle —
середина
Рис. 16.6. Отображение текста при разных значениях textBaseline
Например, чтобы текст отображался под опорной линией, введите:
ctx.textBaseline = "top";
ctx.fillText("Привет, мир!", 50, 50);
Теперь при вызове fi llText текст отобразится под точкой (50, 50),
как на рис. 16.7.
(50, 50)
Рис. 16.7. Строка «Привет, мир!» для textBaseline = "top"
Аналогичным образом, чтобы выбрать горизонтальное положе-
ние текста относительно позиции печати, можно задавать свойству
246 Часть III. Графика
textAlign значения "left", "center" или "right". На рис. 16.8 пока-
зано, что при этом получится.
Text align —
выравнивание
left
center
right
текста
Center —
центр (амер.)
Рис. 16.8. Отображение текста при разных значениях textAlign
Задаем размер и шрифт
Мы можем настраивать размер текста и шрифт, которым он печата-
ется, меняя значение свойства контекста рисования font. Вот примеры
Font — шрифт
использования некоторых шрифтов:
ctx.font = "20px Courier";
ctx.fillText("Courier", 50, 50);
ctx.font = "24px Comic Sans MS";
ctx.fillText("Comic Sans", 50, 100);
ctx.font = "18px Arial";
ctx.fillText("Arial", 50, 150);
Свойство font принимает строку, в которой следует указать размер
и название нужного шрифта. Например, в строке мы задали свойству
font значение "20px Courier", то есть текст будет отображен 20-пик-
сельным шрифтом Courier. На рис. 16.9 показано, как эти три шрифта
выглядят на «холсте».
Рис. 16.9. 20-пиксельный Courier, 24-пиксельный Comic Sans
и 18-пиксельный Arial
16. Пишем игру «Змейка»: часть 1 247
Пишем функцию drawScore
Теперь можно продолжать — напишем функцию drawScore, которая
отображает на «холсте» строку с текущим счетом игры.
var drawScore = function () {
ctx.font = "20px Courier";
ctx.fillStyle = "Black";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Счет: " + score, blockSize, blockSize);
};
Эта функция выставляет 20-пиксельный шрифт Courier ("20px
Courier"), с помощью fi llStyle задает черный цвет печати, включает
выравнивание по левому краю с помощью свойства textAlign и задает
свойству textBaseline значение "top".
Затем мы вызываем fi llText со строкой "Счет: " + score. В пере-
менной score хранится текущий счет игры в виде числа. Начальный
счет мы установили в 0 (см. «Переменная score» на с. 243), поэтому сна-
чала эта функция напечатает строку "Счет: 0".
Вызывая fi llText, мы передаем ему в качестве x- и y-координат зна-
чение blockSize. Мы задали для blockSize значение 10, поэтому текст
будет отображен в позиции (10, 10), то есть внутри верхнего левого угла
рамки. А поскольку мы задали свойству textBaseline значение "top",
текст будет расположен под опорной линией, как на рис. 16.10.
Рис. 16.10. Позиция строки со счетом игры
248 Часть III. Графика
Конец игры
Мы будем вызывать функцию gameOver в конце игры, когда змейка вре-
жется в стену (рамку) или в собственый хвост. Эта функция использует
clearInterval для остановки игры и отображает на «холсте» надпись
«Конец игры». Вот как выглядит ее код:
var gameOver = function () {
Game over —
clearInterval(intervalId);
игра окончена
ctx.font = "60px Courier";
ctx.fillStyle = "Black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Конец игры", width / 2, height / 2);
};
Сначала мы останавливаем игру вызовом clearInterval с пере-
менной intervalId в качестве аргумента. Это отменит периодический
запуск функции анимации (см. «Использование setInterval для ани-
мации в игре» на с. 239).
Затем мы устанавливаем 60-пиксельный шрифт Courier черного
цвета, выравнивание текста по центру и задаем для textBaseline
значение "middle" (середина). После этого вызываем метод fi llText,
передавая ему строку «Конец игры», значение width / 2 в качестве коор-
динаты x и height / 2 в качестве координаты y. В результате надпись
«Конец игры» появится в центре «холста», как на рис. 16.11.
Рис. 16.11. Экран «Конец игры» после того, как змейка врезалась в левую стенку
16. Пишем игру «Змейка»: часть 1 249
Что мы узнали
В этой главе мы рассмотрели общую структуру игры «Змейка» и напи-
сали несколько нужных для нее функций, научились печатать на «хол-
сте» текст и настраивать его размер, шрифт и выравнивание.
В следующей главе мы завершим игру, написав код для змейки
и яблока, а также обработчик событий клавиатуры.
250 Часть III. Графика
УПРА ЖНЕНИЯ
Вот несколько упражнений, которые вы можете выполнить перед
тем, как переходить к написанию самой игры.
#1. Соберите код воедино
Хоть программа еще не завершена, вы можете проверить работу
функций рисования рамки и вывода игрового счета. Возьмите
HTML-файл (см. «Создаем HTML-файл» на с. 240) и добавьте
в него код для настройки «холста», создания переменной score,
рисования рамки и отображения счета. Теперь, чтобы увидеть
рамку и счет, вам нужно лишь вызвать функции drawBorder
и drawScore. Результат должен выглядеть так же, как на рис. 16.10.
Также можете попробовать вызвать функцию gameOver, однако
перед этим вам придется удалить из нее строку с командой
clearInterval(intervalId) — в программе еще нет перемен-
ной intervalId, поэтому вызов функции без удаления этой
строки приведет к ошибке.
#2. Анимация счета
Добавьте собственный вызов setInterval с функцией, кото-
рая увеличивает переменную score на 1 и затем выводит новый
счет на экран с помощью drawScore каждые 100 миллисекунд.
Не забывайте, что каждый раз перед выводом счета нужно очи-
щать «холст» вызовом метода clearRect.
#3. Добавьте вывод текста к «Виселице»
Вспомните упражнение #4 из гла вы 13 —
рисование на «холсте» человечка для игры
«Виселица». Усовершенствуйте игру, ис-
пользуя метод fi llText для вывода теку-
щего слова под человечком, как показано
на рисунке.
Подсказка: для подчеркивания каждой
буквы я использовал линии длиной
30 пикселей, с расстоянием 10 пикселей
между ними.
Можете усложнить задачу — отобра-
жайте также неправильные ответы в виде
зачеркнутых букв, как на рисунке справа.
17
П И Ш Е М И Г Р У « З М Е Й К А »: Ч АС Т Ь 2
В этой главе мы закончим писать «Змейку». Мы уже подготовили поле
и в общих чертах разобрались, как будет работать игра. Теперь пришел