Файл: Беляев С А - Разработка игр на языке JavaScript - 2016.pdf
Добавлен: 25.10.2018
Просмотров: 7602
Скачиваний: 136
Г Л А В А 5
РЕАЛИЗАЦИЯ
ЛОГИКИ ПОВЕДЕНИЯ ОБЪЕКТОВ
При создании двухмерной игры возникает вопрос реа
листичности создаваемого игрового пространства. В об
щем случае двухмерная игра предоставляет пользовате
лю один из двух видов: либо сверху, либо сбоку. Их клю
чевое отличие в том, что при реализации вида сверху
обычно не учитываются законы гравитации, в случае вида
сбоку учет гравитации сделает игру более реалистичной.
В настоящее время существует множество инструмен
тов создания реалистичной физики с использованием
JavaScript, например:
· библиотека по нахождению пути между двумя точка
ми [21];
· физический движок на основе метода Верле [22];
· физический движок Box2d [16].
Наиболее полный подход к реализации физических
процессов выполнен в проекте Box2d (box2d.org) [15], [16],
который изначально ориентирован на Flash.
Разработчики, предпочитающие самостоятельную ре
ализацию поведения объектов, могут найти множество
примеров, в частности, по линейной алгебре для разра
ботчиков игр [16].
Реализация физики на JavaScript подробно описана
в [17].
В данном учебном пособии будет рассмотрен пример,
не использующий внешние библиотеки.
82
Глава 5
5.1.
ФИЗИЧЕСКИЕ ОСОБЕННОСТИ ПРОСТРАНСТВА
Анимация игры подразумевает движение главного ге
роя и объектов игры. В данном пособии будут рассмотре
ны базовые подходы к анимации с учетом физических осо
бенностей пространства. В главе 3 описаны объекты, но
не реализованы функции update и draw, в данной главе
будут представлены различные варианты реализации ука
занных функций.
ПРЯМОЛИНЕЙНОЕ ДВИЖЕНИЕ
Прямолинейное движение применимо в случае, когда
в игре реализован вид сверху. При этом элементы управ
ления (влево, вправо, вверх, вниз) предназначены для ука
зания направления движения, в зависимости от выбран
ного направления разработчик увеличивает или уменьша
ет координаты x и y управляемого объекта.
<html>
<body>
<canvas id="canvasId" width="300" height="60" style="border:
3px dotted blueviolet"></canvas>
<script>
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var pos = {x:0, y:0}; // êîîðäèíàòû êâàäðàòà
ctx.strokeStyle = "#f00";
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // î÷èñòèòü
ctx.strokeRect(pos.x, pos.y, 20, 20); // êâàäðàò
ctx.stroke(); // íàðèñîâàòü
}
function update() {
if(pos.x < canvas.width - 20)
pos.x += 4; // ïðÿìîëèíåéíîå äâèæåíèå âïðàâî
else
pos.x = 0; // ñáðîñ êîîðäèíàòû x
if(pos.y < canvas.height - 20)
pos.y++; // ïðÿìîëèíåéíîå äâèæåíèå âíèç
else
pos.y = 0; // ñáðîñ êîîðäèíàòû y
Реализация логики поведения объектов
83
draw(); // íàðèñîâàòü îáúåêò
}
setInterval(update, 100); // âûçîâ update êàæäûå 100 ìñåê
</script>
</body>
</html>
При сохранении указанного кода в HTMLфайл (на
пример, animation.html), его можно открыть в любом бра
узере и увидеть анимацию квадрата, который будет дви
гаться равномерно и прямолинейно слева направо и сверху
вниз (рис. 5.1).
Реализация прямолинейного движения отображается
на холсте (элемент canvas), как и в главе 1 в JavaScript
создаются переменные canvas и ctx.
var pos = {x:0, y:0};
Создаем переменную pos, которая будет хранить коор
динаты отображаемого объекта.
ctx.strokeStyle = "#f00";
Задается красный цвет квадрата.
Функция draw содержит три строки (каждая из них
была описана в главе 1): очистка холста, задание квадра
та 20
´20 и отображение прямоугольника.
Функция update предназначена для изменения коор
динат квадрата.
if(pos.x < canvas.width - 20)
Проверка, что по горизонтали при движении направо
квадрат не оказался у границы холста. Если неравенство
Рис. 5.1
Отображение квадрата на холсте
84
Глава 5
верно, то координата по горизонтали увеличивается на 4
(pos.x += 4), иначе — сбрасывается в 0 (pos.x = 0).
if(pos.y < canvas.height - 20)
Проверка по вертикали идентична проверке по гори
зонтали. Если неравенство верно, то координата по гори
зонтали увеличивается на 1 (pos.y++), иначе — сбрасыва
ется в 0 (pos.y = 0). В данном примере скорость движения
по горизонтали в 4 раза выше, чем по вертикали.
draw();
Вызов функции отображения квадрата:
setInterval(update, 100);
Настройка интервала вызова функции update с исполь
зованием встроенного метода setInterval. Функция будет
вызываться каждые 100 мс.
СВОБОДНОЕ ПАДЕНИЕ
Свободное падение подразумевает увеличение скоро
сти падения со временем, т. е. чем дольше падает объект,
тем быстрее он приближается к земле.
<html>
<body>
<canvas id="canvasId" width="60" height="300" style="border:
3px dotted violet"></canvas>
<script>
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var pos = {x:20, y:0, dx:0, dy:0}; // êîîðäèíàòû, ñêîðîñòè
ctx.strokeStyle = "#f00";
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // î÷èñòèòü
ctx.strokeRect(pos.x, pos.y, 20, 20); // êâàäðàò
ctx.stroke(); // íàðèñîâàòü
}
function update() {
if(pos.y < canvas.height - 20) {
Реализация логики поведения объектов
85
pos.y += pos.dy; // äâèæåíèå âíèç
pos.dy += 0.4; // óñêîðåíèå
}
else
pos.y = pos.dy = 0; // ñáðîñ â 0
draw(); // íàðèñîâàòü îáúåêò
}
setInterval(update, 100); // âûçîâ update êàæäûå 100 ìñåê
</script>
</body>
</html>
В приведенном коде есть незначительные отличия от
прямолинейного движения. Прежде всего, изменено опи
сание координат объекта.
var pos = {x:20, y:0, dx:0, dy:0};
Объект pos содержит координаты (x, y) и приращения
скорости по координатам (dx, dy).
Функция draw осталась без изменений, изменилась
функция update. В этом примере движение рассматрива
ется только по вертикали, поэтому горизонтальная состав
ляющия в update не рассматривается.
if(pos.y < canvas.height - 20)
Если не достигли границы холста, тогда движемся с
ускорением вниз.
pos.y += pos.dy;
Увеличиваем координату по вертикали на pos.dy.
pos.dy += 0.4;
Изменяет pos.dy при каждом вызове update. Это и есть
свободное падение, когда скорость постоянно возрастает.
но не следует в этой формуле искать известное из физики
ускорение свободного падения (9,8 м/с
2
). Константа, на
которую следует изменять скорость, будет уникальна для
каждой игры и зависит от ее масштабов. Главное, чтобы
ускорение было реалистично.