Файл: Беляев С А - Разработка игр на языке JavaScript - 2016.pdf
Добавлен: 25.10.2018
Просмотров: 6944
Скачиваний: 112
6
Глава 1
атрибута charset указывает кодировку, использованную
для написания страницы (в данном примере это
"UTF-8",
но в случае создания файла в Windows, скорее всего, будет
использована кодировка «Windows1251»). Если сохра
нить приведенный код HTMLстраницы в файле с расши
рением «.html», например, first.html, то его можно будет
открыть с помощью любого браузера. Если кодировка ука
зана не правильно, то пользователь не сможет прочитать
русский текст, это означает, что следует изменить коди
ровку.
HTML — богатый язык, который позволяет отобра
жать большое количество элементов. В рамках учебного
пособия будут использованы только некоторые из них,
необходимые и достаточные для создания однопользова
тельских двумерных интернетигр. Для браузеров, не под
держивающих HTML5, можно использовать тег
<div>, ко
торый сам по себе без применения специальных настроек
не отображается, но с помощью атрибута style предстает
перед пользователем в самых разных видах. Данный ат
рибут требует от разработчика знания языка разметки CSS
(от англ. Cascading Style Sheets), который активно исполь
зуется для стилизации информации на HTMLстраницах.
Начиная с HTML пятой версии поддерживается гиб
кий элемент canvas, позволяющий отображать графику.
Простейший пример включения элемента canvas в HTML
страницу:
<!DOCTYPE html>
<html>
<head>
<title>Âòîðàÿ ñòðàíèöà</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvasId" width="800" height="600" style=
"border:1px solid black;">
Âàø áðàóçåð íå ïîääåðæèâàåò ýëåìåíò canvas
</canvas>
</body>
</html>
Базовые элементы языка
7
В данном примере открывающий тег
<canvas> имеет
несколько атрибутов: id — идентификатор, который ис
пользуется для уникального обозначения элемента на стра
нице (элементов может быть множество), width указыва
ет его начальную ширину, height — высоту, style — стиль
отображения (CSS). При сохранении приведенного кода в
HTML и открытии в браузере будет отображена страница
с прямоугольником, нарисованным черным цветом, ко
нечно, если браузер поддерживает canvas. Дело в том, что
данный элемент языка выделяет на экране область, в ко
торую будет выводиться графика, но по умолчанию canvas
пустой. Соответственно, если удалить атрибут style, со
здающий сплошную (solid) рамку (border) толщиной в
1 пиксел (1px) черного цвета (black), то страница ока
жется совершенно пустой. Мы будем называть canvas —
холст.
Следует отметить, что HTML и JavaScript одинаково
обрабатывают одинарные и двойные кавычки, т. е. поме
стить атрибут в одинарные кавычки — это то же самое,
что поместить его в двойные кавычки. Работа с холстом
подробно описана в [1]–[4].
1.2.
ОТОБРАЖЕНИЕ ПРЯМОЙ НА ХОЛСТЕ
Для взаимодействия с холстом требуется знание Java
Script (рис. 1.1). Программирование на JavaScript подроб
но описано в [5], [6].
Рис. 1.1
Отображение прямой в canvas
8
Глава 1
<!DOCTYPE html>
<html>
<body>
<canvas id="canvasId" width="300" height="100"
style="border:1px solid blue;"></canvas>
<script>
// Îáðàùåíèå ê canvas
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d"); // Îáðàùåíèå ê êîíòåêñòó
ctx.moveTo(50, 70); // Ïåðåìåùåíèå êóðñîðà
ctx.lineTo(100, 50); // Ñîçäàíèå ëèíèè
ctx.stroke(); // Îòîáðàæåíèå ëèíèè
</script>
</body>
</html>
Код JavaScript должен быть описан в рамках элемента
script. Обращение к холсту может выглядеть следующим
образом:
var canvas = document.getElementById("canvasId");
Здесь ключевое слово var используется для обозначе
ния переменной, за ключевым словом следует имя пере
менной, в нашем случае — canvas. Язык JavaScript под
держивает «произвольное» именование переменных, но
рекомендуется давать осмысленные названия, чтобы в
дальнейшем разработчик не запутался, что обозначает
каждая переменная.
Встроенная переменная document указывает на DOM
модель HTMLстраницы. Изучение DOMмодели выходит
за рамки данного учебного пособия. Достаточно знать, что
вызов функции getElementById с указанием в качестве
параметра идентификатора элемента с HTMLстраницы
позволяет получить доступ к этому элементу. В данном
случае — доступ к элементу canvas с идентификатором
"canvasId".
С помощью переменной canvas можно осуществлять
настройки элемента canvas, например, изменить его раз
меры, параметры отображения графики и т. п. Но, соб
Базовые элементы языка
9
ственно, для доступа к 2D графике необходимо создать еще
одну переменную:
var ctx = canvas.getContext("2d");
С помощью ключевого слова var создается переменная
ctx (обычно ее называют «контекст»), в которую сохраня
ется результат вызова функции getContext с параметром
"2d" у переменной canvas.
Теперь создано все необходимое для отображения гра
фики.
ctx.moveTo(50, 70);
С помощью функции moveTo курсор перемещается в
заданные координаты. Здесь необходимо обратить внима
ние, что левый верхний угол имеет координаты (0, 0), уве
личение первой координаты — движение по горизонтали
вправо, увеличение второй координаты — движение по
вертикали вниз. Функция moveTo не приводит к появле
нию видимых линий.
ctx.lineTo(100, 50);
С помощью функции lineTo курсор перемещается с ото
бражением линии в заданные координаты.
ctx.stroke();
Функция stroke делает видимой созданную линию —
рисует контур (см. рис. 1.1).
Важно отметить, что JavaScript различает большие и
маленькие буквы, поэтому var — это ключевое слово, а
Var, VAR, vaR и vAr такими не являются.
1.3.
ОТОБРАЖЕНИЕ
ПРЯМОУГОЛЬНИКА И ЗИГЗАГА
Настройка холста подразумевает задание таких пара
метров, как ширина и высота, шрифт текста, типы ли
ний, цвет и т. п. (рис. 1.2).
<!DOCTYPE html>
<html>
<body>
<canvas id="canvasId" width="300" height="100"
10
Глава 1
style="border:1px solid magenta;"></canvas>
<div id="result"></div>
<script>
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
canvas.width = 200; // Óñòàíîâèòü øèðèíó â 200 ïèêñåëîâ
canvas.height = 90; // Óñòàíîâèòü âûñîòó â 90 ïèêñåëîâ
ctx.strokeStyle = "green"; // Óñòàíîâèòü öâåò ëèíèè - çåëåíûé
ctx.fillStyle = "blue"; // Óñòàíîâèòü öâåò çàëèâêè ôèãóðû -
// ñèíèé
ctx.shadowBlur = 10; // Óñòàíîâèòü ðàçìåð òåíè - 10 ïèêñåëîâ
ctx.shadowColor = "brown"; // Óñòàíîâèòü öâåò òåíè -
// êîðè÷íåâûé
// Îòîáðàæåíèå ïðÿìîóãîëüíèêà (x, y, øèðèíà, âûñîòà)
ctx.rect(10, 30, 80, 40);
ctx.fill(); // Çàïîëíèòü öâåòîì
ctx.stroke(); // Îòîáðàçèòü êîíòóð
</script>
</body>
</html>
Здесь canvas.width позволяет проверять или устанав
ливать значение ширины элемента canvas, canvas.height
позволяет аналогично работать с высотой. При работе с
контекстом (переменная ctx) есть возможность настраи
вать цвет линии (strokeStyle), цвет заполнения фигуры
(fillStyle), размер тени (shadowBlur), цвет тени (shadow
Color), с помощью функции rect(x, y, ширина, высота) ото
бражать прямоугольники и заполнять их цветом — функ
ция fill().
Рис. 1.2
Отображение прямоугольника в canvas