Файл: Беляев С А - Разработка игр на языке JavaScript - 2016.pdf
Добавлен: 25.10.2018
Просмотров: 7606
Скачиваний: 136
66
Глава 3
Разработчику для корректного отображения направ
ления движения необходимо будет учитывать, в какую
сторону движется тот или иной объект, и для поиска спрай
та использовать не константы «tank_left_1», «star» или
«rocket_up», а переменные, которые будут менять значе
ния в зависимости от направления движения.
Для проверки полученной программы можно вызвать
следующие функции:
mapManager.loadMap("tilemap.json");
spriteManager.loadAtlas("atlas.json", "img/tankattack.png"); // çàãðóçèòü
// àòëàñ
mapManager.parseEntities();
mapManager.draw(ctx);
Вызов метода loadAtlas позволит загрузить описание
атласа из файла «atlas.json» и изображения из файла
Рис. 3.2
Отображение объектов на карте
Отображение объектов
67
«img/tankattack.png». По окончании прорисовки карты
необходимо вызвать метод draw для каждого объекта кар
ты. Здесь следует обратить внимание, что при вызове ме
тода parseEntities предполагается, что создан менеджер
игры (gameManager) (см. главу 6), в котором factory хра
нит все типы объектов, а в entities помещаются все объек
ты карты. Результат отображения приведен на рисун
ке 3.2.
ВОПРОСЫ ДЛЯ САМОПРОВЕРКИ
1. Опишите варианты создания одного объекта на базе другого.
Какие преимущества и недостатки есть у каждого варианта?
2. Что делает конструкция for(var имя_переменной in имя_объ
екта)?
3. Какие поля должны быть у игрока, если описывается двумер
ная игра?
4. Как реализуется метод draw для объекта игры?
5. Почему все объекты расширяют именно Entity, а не друг дру
га? (Player и Tank очень похожи по составу полей и методов.)
6. Что такое «атлас»?
7. С помощью каких инструментов можно создать атлас?
8. Какими основными свойствами обладает спрайт, описанный в
атласе? Какие из этих свойств используются в данном учебном
пособии?
9. Какие поля должны быть у менеджера спрайтов?
10. Чем загрузка спрайтов отличается от загрузки карты в менед
жере карты?
11. Зачем при отображении спрайта выполняется обращение к ме
неджеру карты?
УПРАЖНЕНИЯ
1. Измените функцию extend объекта Entity так, что
бы при описании Tank можно было расширить Player, а
не Entity.
2. Модифицируйте массив спрайтов таким образом,
чтобы он работал не только со спрайтами без «обрезки»,
но и со спрайтами, у которых удалены невидимые части.
3. Менеджер спрайтов имеет две переменные для хра
нения информации о загрузке изображения и атласа, из
мените его так, чтобы он содержал одно поле loaded, пред
назначенное для хранения этой информации.
Г Л А В А 4
ВЗАИМОДЕЙСТВИЕ
С ПОЛЬЗОВАТЕЛЕМ
Взаимодействие с пользователем подразумевает полу
чение от него управляющих воздействий с помощью кла
виатуры или мыши, например, для управления объектом
игрока, который будет перемещаться по карте и выпол
нять требуемые действия.
Рассмотрим механизмы взаимодействия с использова
нием клавиатуры, при этом ограничимся только работой
с двумя событиями: «клавиша нажата» (поангл. key down)
и «клавиша отпущена» (поангл. key up).
4.1.
ВЗАИМОДЕЙСТВИЕ
С ИСПОЛЬЗОВАНИЕМ КЛАВИАТУРЫ
Способ 1. Настройка в HTML.
Рассмотрим код, в котором взаимодействие с пользо
вателем настраивается в HTML.
<html>
<head>
<meta charset="utf-8">
</head>
<body onkeydown="keyDown(event);" onkeyup="keyUp(event);">
<div id="result">Íàæìèòå êëàâèøó íà êëàâèàòóðå</div>
<script>
function keyDown(event) {
document.getElementById("result").innerHTML = "Íàæàòà:
" + event.keyCode;
}
Взаимодействие с пользователем
69
function keyUp(event) {
document.getElementById("result").innerHTML =
"Îòïóùåíà: " + event.keyCode;
}
</script>
</body>
</html>
При сохранении кода в файл с именем keyboardevent.
html его можно открыть в любом браузере и проверить вза
имодействие с пользователем (рис. 4.1).
При нажатии клавиш программа будет выписывать
код последней нажатой клавиши, при отпускании — код
последней отпущенной клавиши. Рассмотрим, как устрое
на программа.
<meta charset="utf-8">
Тег <meta> указывает кодировку, использованную при
написании программы. Использование тега указания ко
дировки желательно, так как браузеры не всегда коррект
но (автоматически) определяют кодировку, а в данной про
грамме использован текст на русском языке.
<body onkeydown="keyDown(event);" onkeyup="keyUp(event);">
В теге <body> появились два дополнительных атрибу
та: onkeydown и onkeyup. Каждый из них принимает в
кавычках JavaScript. В данном примере в первом атри
буте вызывается функция keyDown с параметром event
(встроенный объект JavaScript), во втором атрибуте —
keyUp с таким же параметром. Данный параметр хранит
Рис. 4.1
Программа взаимодействия
с использованием клавиатуры
70
Глава 4
в себе информацию о событии, которое обработала HTML
страница.
<div id="result">Íàæìèòå êëàâèøó íà êëàâèàòóðå</div>
Элемент div характеризуется тем, что ему присвоен
идентификатор «result» и в качестве содержимого указан
текст, отображаемый на странице. В таком случае текст
является указанием пользователю действия, которое ему
необходимо выполнить.
Функции keyDown и keyUp абсолютно идентичны за
исключением текста, отображаемого пользователю. Рас
смотрим одну из них.
function keyDown(event) {
document.getElementById("result").innerHTML = "Íàæàòà: " +
event.keyCode;
}
Функция keyDown принимает в качестве параметра
event. В функции использована встроенная переменная
document для поиска элемента div. Поиск выполнен с по
мощью функции getElementById (поиск элемента по иден
тификатору). В найденный элемент с помощью innerHTML
сохраняется новый код HTML: текст «Нажата:» и значе
ние поле keyCode объекта event.
В результате при нажатии клавиши «Пробел» на HTML
странице будет отображен текст «Нажата: 32», так как
код данной клавиши равен 32, при отпускании «Пробе
ла» — «Отпущена: 32».
Способ 2. Настройка в JavaScript.
Другой способ подключения функций контроля собы
тий клавиатуры:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="result">Íàæìèòå êëàâèøó íà êëàâèàòóðå</div>
<script>
function keyDown(event) {