Файл: Беляев С А - Разработка игр на языке JavaScript - 2016.pdf
Добавлен: 25.10.2018
Просмотров: 6945
Скачиваний: 112
Базовые элементы языка
11
При необходимости использования для холста разме
ров экрана возможно обращение к глобальной перемен
ной окна window: window.innerHeight хранит высоту ви
димой части окна, window.innerWidth — ширину видимой
части окна. Просмотреть все глобальные переменные мож
но в режиме отладки, в различных браузерах они вызыва
ются поразному. Большинство браузеров, как и Google
Chrome, открывают панель разработчика при нажатии
клавиши «F12». В закладке «Sources» можно для выбран
ного исходного файла установить точку остановки (нажать
левой клавишей мыши на номере строки для JavaScript),
обновить страницу и в разделе Global просмотреть все гло
бальные переменные, доступные в выбранной точке оста
новки (рис. 1.3).
Рис. 1.3
Просмотр глобальных переменных в Google Chrome
12
Глава 1
Не рекомендуется использовать в программе имена
переменных, совпадающие по написанию с глобальными
переменными.
У разработчика есть возможность отобразить интере
сующую его фигуру, например, зигзаг (рис. 1.4).
<!DOCTYPE html>
<html>
<body>
<canvas id="canvasId" width="300" height="100"
style="border:1px solid magenta;"></canvas>
<div id="result"></div>
<script>
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
ctx.strokeText("Çèãçàã", 10, 10); // Íàïèñàòü òåêñò
ctx.stroke(); // Îòîáðàçèòü òåêñò
ctx.lineWidth = 10; // Óñòàíîâèòü øèðèíó ëèíèè
ctx.strokeStyle = "#0000ff"; // Óñòàíîâèòü öâåò ëèíèè - ñèíèé
var x = [40, 70, 100, 130, 160, 190]; // Ìàññèâ
var y = [40, 80, 40, 80, 40, 80];
ctx.moveTo(10, 80); // Ïåðåìåñòèòü
ctx.beginPath(); // Íà÷àëî ïóòè
for(var i = 0; i < x.length; i++) { // Öèêë
ctx.lineTo(x[i], y[i]);
}
ctx.stroke(); // Îòîáðàçèòü êðèâóþ
</script>
</body>
</html>
Рис. 1.4
Отображение зигзага
Базовые элементы языка
13
Здесь функция контекста strokeText выводит текст в
заданные координаты (x, y), lineWidth настраивает ши
рину линии контура, strokeStyle — цвет. Важно отметить,
что цвет в HTML может задаваться не только ключевыми
словами, но и в так называемом формате RGB (red, green,
blue) — красный, зеленый, голубой. Соответственно, один
и тот же красный цвет может быть представлен в виде 'red'
(название цвета), '#ff0000' (шестнадцатеричный формат
записи RGB), 'rgb(255,0,0)' (десятичный формат записи
RGB). При этом значение каждого цвета может быть в диа
пазоне от 0 до 255 в десятичной записи или от 00 до FF
в шестнадцатеричной.
В приведенном примере x и y являются массивами с
предопределенными значениями, при этом значения пе
речислены через запятую в квадратных скобках. Массив
при обращении к переменной length возвращает свою дли
ну (сколько значений в них сохранено), для обращения к
его элементу необходимо после имени массива в квадрат
ных скобках указать и номер. Важно отметить, что пер
вый элемент массива имеет номер 0.
Цикл for характеризуется тремя параметрами, пере
численными через точку с запятой. Первый параметр —
инициализация переменных, которые будут использовать
ся внутри массива, второй параметр — условие, которое
должно быть верно, пока цикл выполняется, третий пара
метр — изменение переменных по окончании каждого
цикла. В приведенном примере введена дополнительная
переменная i, которой в самом начале присвоено значение
0, условием выполнения цикла является: i меньше длины
массива x, по окончании цикла использована конструк
ция i++, которая обеспечивает увеличение на единицу пе
ременной i при каждом вызове.
Аналогичный результат может быть достигнут с ис
пользованием одного массива.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvasId" width="300" height="100"
style="border:1px solid magenta;"></canvas>
14
Глава 1
<div id="result"></div>
<script>
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
ctx.strokeText("Çèãçàã", 10, 10); // Íàïèñàòü òåêñò
ctx.stroke(); // Îòîáðàçèòü òåêñò
ctx.lineWidth = 10; // Óñòàíîâèòü øèðèíó ëèíèè
ctx.strokeStyle = "#0000ff"; // Óñòàíîâèòü öâåò ëèíèè - ñèíèé
var x = [40, 70, 100, 130, 160, 190]; // Ìàññèâ
var y = 80; // Ïåðåìåííàÿ y
ctx.moveTo(10, 80); // Ïåðåìåñòèòü
ctx.beginPath(); // Íà÷àëî ïóòè
for(var i = 0; i < x.length; i++) { // Öèêë
if(y > 40) y = 40; else y = 80; // Óñëîâèå
ctx.lineTo(x[i], y);
}
ctx.stroke(); // Îòîáðàçèòü êðèâóþ
</script>
</body>
</html>
В данном примере y — переменная, которой присвое
но начальное значение 80. В цикл добавлено условие if,
которое проверяет, если y больше 40, то y присваивается
значение 40, иначе (else) присваивается 80. Получается
тот же результат, что представлен на рисунке 1.4, но цикл
работает более надежно, так как нет необходимости под
держивать одинаковую длину у двух массивов, как в пре
дыдущем примере.
1.4.
ОТОБРАЖЕНИЕ
НЕСКОЛЬКИХ ПРЯМОУГОЛЬНИКОВ
Несколько прямоугольников разных цветов можно
отобразить следующим образом (рис. 1.5).
<!DOCTYPE html>
<html>
<body>
<canvas id="canvasId" width="300" height="100"
style="border:1px solid magenta;"></canvas>
Базовые элементы языка
15
<div id="result"></div>
<script>
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 5; // Óñòàíîâèòü øèðèíó ëèíèè
function square(side, x, color) {
ctx.strokeStyle = color; // Óñòàíîâèòü öâåò ëèíèè - color
ctx.strokeRect(x, 10, side, side); // Ðèñóåì êâàäðàò ñî
// ñòîðîíîé side
ctx.stroke(); // Íàðèñîâàòü
}
square(15, 10, 'red'); // Êâàäðàò 15 íà 15
square(25, 50, 'green'); // Êâàäðàò 25 íà 25
square(35, 110, 'blue'); // Êâàäðàò 35 íà 35
square(45, 180, 'brown'); // Êâàäðàò 45 íà 45
</script>
</body>
</html>
В приведенном примере для отображения квадрата со
здается функция (function) с именем square и параметра
ми: длина стороны (side), координата по горизонтали (x)
и цвет (color). Внутри функции есть обращение к глобаль
ной переменной ctx и к локальным переменным, переда
ваемым в качестве параметров. Границы функции огра
ничены фигурными скобками. Функция вызывается че
тыре раза.
Того же результата можно было достигнуть, исполь
зуя объекты.
Рис. 1.5
Отображение нескольких прямоугольников