Стрельба по воздушным шарам

Исходный файл: Balloonshoot.fla

Первая игра состоит из трех основных элементов: лисы, воздушных шаров и снарядов. В нашем примере лиса стреляет всего лишь горошинами из соломинки (рис. 10.1). Поэтому игра подойдет для любой аудитории.

Рисунок 10.1 Лиса стреляет по пролетающим воздушным шарам из соломинки

Задача проекта

Задача этого проекта - создать игру, в которой лиса перемещается влево и вправо и стреляет вверх по воздушным шарам. Шары появляются слева и справа, на разной высоте и летят с разной скоростью. После того как пролетит определенное количество шаров, игра заканчивается. Счет определяется количеством лопнувших шаров. Готовую игру можно просмотреть в файле Balloonshoot.fla.

Подход

Лиса перемешается так же, как и во всех играх предыдущей главы. Перемещение лисы будет анимированным, направление движения задается горизонтальным поворотом.
Воздушные шары будут созданы как копии одного клипа, представляющего собой светло-серый воздушный шар. Подобно высоте, скорости и направлению, цвет будет произвольным.
Снаряды, которыми стреляет лиса, создаются из другого клипа. Выстрел будет производиться при нажатии на клавишу пробела. На кончике соломинки создается новый клип, перемещающийся вверх. Также будет создан таймер, дающий игроку возможность делать только один выстрел в секунду.
При достаточном приближении снаряда к шару шар лопается. Столкновение будет определяться не функцией hitTest, а формулой, определяющей, насколько снаряд приблизился к центру воздушного шара.

Подготовка ролика

В ролике Balloonshoot.fla клип лисы содержит кадр с меткой "stand" и анимационную последовательность, помеченную "walk". Анимация изображает лису, перемещающуюся влево (рис. 10.2), однако при помощи Action-Script вы можете повернуть лису в другую сторону, не создавая отдельной анимации. Главное условие: соломинка должна занимать во всех кадрах одно и то же положение относительно центральной точки клипа.

Рисунок 10.2 Лиса идет влево и всегда готова выстрелить из соломинки

Клип, соответствующий воздушному шару, также состоит из нескольких кадров. Первый кадр содержит изображение обычного шара. Остальные кадры воспроизводят анимацию лопающегося шара. Воспроизведение этой короткой анимации задается при попадании в шар. На рис. 10.3 показан единственный кадр анимации ролика, возможно, вы захотите изобразить взрыв более подробно.

Рисунок 10.3 При попадании в шар запускается воспроизведение анимации взрыва

Для окраски шара используются оттенки серого цвета. Цвет задается одновременно с созданием нового клипа шара. В результате один клип шара каждый раз принимает новый оттенок.
Клип снаряда содержит короткую линию. Хотя в качестве снаряда используется горошина, вертикальная линия создает видимость движения вверх.

Создание кода

Небольшой клип "actions" помешается за пределами рабочего поля и контролирует процесс игры путем обращения к функциям главной временной шкалы. Она запускает игру при загрузке и вызывает ряд функций в каждом кадре.

onClipEvent(load) {
_root.initGame();
onClipEvent(enterFrame) {
_root.newBalloon() ;
_root.moveBalloons() ;
_root.moveFox();
_root.moveBullets();
}

Функция initGame задает все основные переменные, используемые в игре.

function initGame() {
// Инициализируем переменные, связанные с объектами-шарами.
nextBalloonTime = 0;
nextBalloon = 0;
balloons = [];
numBalloons = 10;
// Инициализируем переменные,
nextBulletTime = 0;
nextBullet = 0;
bullets = [];
// Количество очков равно 0.
score = 0;
}

Перед созданием нового шара необходимо провести три проверки. Первая определяет, остались ли в игре шары, вторая- прошло ли достаточно времени после создания предыдущего шара. Последняя проверка представляет собой своего рода игру "орел и решка": новый шар создается с вероятностью 50%.
После завершения проверок функция newBalloon создает новый шар с 50-процентной возможностью появления шара с левой или правой стороны. Скорость шара принимает произвольное значение от 3 до 5. Число является положительным, если шар будет пролетать слева направо и отрицательным в противном случае.
Цвет нового шара выбирается из пяти возможных оттенков. Для задания цвета используется функция setTransform.
Клипы шаров можно упорядочить, поместив их имена и значения скоростей в массив balloons.
Затем задаются переменные nextBalloon и nextBalloonTime, при помощи которых осуществляется обращение к переменной newBalloon.

Созданные шары перемещаются на опрелеленное расстояние с помощью функции moveBalloons. Если шар достиг противоположной границы рабочего поля, его клип удаляется. Соответствующий элемент также удаляется из массива balloons.

Чтобы быстро задать 50-процентную вероятность, лучше использовать фрагмент кода (Math. Random () <. 5). Функция Math. Random () всегда принимает значение от 0 до 1,0 и никогда не бывает равна 1,0, поэтому условие <.5 дает 50-проиентную вероятность возникновения некоторого события.

Имейте в виду, что в цикле for функции moveBalloons перечисление осуществляется в обратном порядке: начинается с последнего элемента в массиве balloons и заканчивается 0. Благодаря этому удаление элемента не влияет на остальную часть массива. Предположим, из массива, состоящего из пяти элементов, был удален третий элемент. Тогда четвертый элемент становится третьим, а пятый - четвертым. Если бы вы считали в прямом направлении, вы бы пропустили третий элемент и сразу перешли к четвертому. При счете в обратном порядке такой проблемы не возникает.

Функция moveBalloons проверяет, все ли шары созданы и все ли шары исчезли, что говорит об окончании игры.

Функция moveFox определяет, нажаты ли клавиши со стрелками «влево» или "вправо", и перемешает лису на 10 пикселов влево или вправо при нажатии соответствующей клавиши. Как и в предыдущих играх, параметр _xscale клипа, содержащего лису, используется для поворота лисы. Функция также задает переход клипа к анимационной последовательности (изображает идущую лису и начинается в кадре 2), а также к кадр (изображает стоящую лису).

function moveFox () {
// Подвинуть лису влево.
if (Key.isDown (Key.LEFT)) {
dx = -10;
fox._xscale = Math.abs(fox._xscale);
// Подвинуть лису вправо, перевернув ее клип по вертикали.

То есть изменив знак у свойства _scale, мы создаем зеркальное отражение клипа; лиса теперь идет в другую сторону.

}else if (Key.isDown(Key.RIGHT)) { dx = 10;
fox._xscale = -Math.abs(fox._xscale);
// Иначе лиса не двигается.
} else {
dx = 0;
// Перемещаем лису.
fox._x += dx;
if ((dx == 0) and (fox._currentFrame != 1)) {
// Переходим к кадру, в котором лиса стоит,
fox.gotoAndStop(1);
} else if ((dx != 0) and (fox._currentFrame == 1)) {
// Переходим к кадру, где лиса бежит.
fox.gotoAndPlay(2);
}
}

Для того чтобы выстрелить, пользователь должен нажать на клавишу пробела. На нажатие клавиши реагирует скрытая кнопка, которая вызывает функцию shootBullet. Код кнопки будет рассмотрен далее, в разделе "К сведению".
Функция shootBullet проверяет, прошло ли достаточно времени после предыдущего выстрела. Это не дает игроку возможности стрелять залпом по всем мишеням.
Подобно шарам снаряды представлены одновременно клипом и элементом массива, в данном случае массива bullets. Массив используется функцией moveBullets для осуществления выстрелов.
Обратите внимание, что движение клипа, содержащего снаряд, начинается в точке, расположенной в 2 пикселях вправо и 55 пикселях влево от центра клипа лисы. Эта точка соответствует кончику соломинки.

function shootBullet () {
// Проверяем, что с момента
// предыдущего выстрела прошло достаточно времени.
if (getTimerO > nextBulletTimei {
// Создаем новую пулю.
attachMoviet"bullet", "bullet'4nextBullet,nextBullet+9999) ;
// Устанавливаем ее координагы.
_root ["bullef+nextBullet] ._jc = fox._x+2;
_root [ "bullef+nextBullet] ._y = fo.x._y-55;
/ / Добавляем новую пулю к массиву.
bullets.push(nextBullet) ;
// Изменяем значение переменных, отвечающих
//за появление пуль.
nextBullet++;
nextBulletTime = getTimer()+1000;
}}

Функция moveBullets работает аналогично функции moveBalloons, но перемещает снаряды не вправо и влево, а вверх. Она проверяет одно из следующих условий: снаряд достиг верхнего края экрана либо попал в шар и вызвал функцию checkCollision. В обоих случаях и клип, и элемент массива удаляются.

Функция checkCollision (она будет рассмотрена далее) проверяет все шары и определяет, не находится ли один из них вблизи данного снаряда. При помощи функции distance оценивается расстояние от центра снаряда до центра шара. Если расстояние составляет менее 10 пикселов, что приблизительно равно диаметру шара, выстрел засчитывается как удачный. В клипе шара происходит переход к кадру 2, элемент массива, связанный с шаром, принимает значение true, а функция moveBullet получает команду на удаление снаряда.

Почему для определения попадания используется функция distance, а не hitTest? Причина в том, что функция hitTest выдает значение true в случае, если снаряд попадет в любую часть шара, в том числе и в нитку, которая его держит

Для определения точного расстояния в пикселях между двумя клипами функция distance использует математическую формулу. Прежде всего, она определяет значение разницы координат клипов по горизонтали и вертикали и сохраняет это значение в переменных dx и dy. Затем вычисляет квадратный корень суммы квадратов данных значений. Формула приведена ниже.

function distance(clipl, clip2) {
// Определяем расстояние между клипами,
dx = clipl._х - clip2._x;
dy = clipl._y - clip2._y;
return (Math.sqrt(dx*dx+dy*dy));
}

К сведению

Нажатие клавиши пробела контролируется кнопкой. В нашем примере она расположена за пределами рабочего поля, в левом верхнем углу экрана и визуально представляет собой надпись "button". Кнопке назначен следующий код:

on (keyPress "") {
_root.shootBullet() ;
}

В соответствии с кодом кнопка не реагирует на щелчок мышью. В любом случае это не имеет значения, так как кнопка расположена за пределами рабочего поля. Программа ждет нажатия клавиши пробела и отвечает на него вызовом функции shootBullet.

На первый взгляд не ясно, почему используется клавиша пробела, а не проверка Key. isDown, осуществляемая функцией moveFox. Функция Key.isDown проверяет, нажата ли клавиша во время определенного промежутка времени. В нашем примере нажатие осуществляется один раз в каждом кадре. Если игрок быстро нажмет на клавишу, это событие может произойти между проверками Key. isDown. Программа не увидит, что клавиша нажата, и выстрела не произойдет. Использование кнопки гарантирует, что нажатие клавиши будет замечено и обработано.

Скорость воспроизведения ролика составляет 30 кадров в секунду, Благодаря этому анимация воспроизводится более плавно. Изменив скорость воспроизведения ролика, вам, может быть, придется изменить скорость перемещения лисы, шаров и снарядов. В противном случае скорость игры может не соответствовать вашим ожиданиям.

Другие возможности

Существует несколько способов сделать нашу игру более интересной. Цвета могут быть не произвольными, а обозначать определенное количество очков. Например, красные шары могут стоить 100 очков, синие - 50 и т.д. От цвета, в свою очередь, может зависеть скорость и высота полета шара. При этом чем выше и быстрее летит шар, тем больше его ценность.
Вы можете вообще отказаться от использования шаров. В сущности данная игра напоминает игры наподобие "Sea Wolf", задачей которых является поражение самолетов, или игры про космических пришельцев. Все, что требуется, - это заменить графику.

Стрельба с прицелом

Исходный файл: Aimandshoot.fla

А что, если бы в предыдущей игре герой стоял, а не двигался из стороны в сторону? Тогда он бы мог направлять соломинку в любом направлении, а не только строго вверх. А снаряды подчинялись бы законам гравитации и, описав дугу, падали бы на землю.
Ролик Aimandshoot.fla представляет собой как раз такую игру. На рис. 10.4 показан фрагмент игры; как вы можете видеть, лиса находится в центре экрана и стреляет под углом. Рассмотрим, как это можно сделать.

Рисунок 10.4 Игра "Прицелься и выстрели" напоминает игру "Стрельба по шарам", однако в нее были добавлены новые возможности

Задача проекта

Наша задача - удалить из предыдущей игры один элемент и добавить два новых. Элементом, который необходимо удалить, является перемещение лисы вправо и влево. В данной игре клавиши со стрелками "влево" и "вправо" действовать не будут, а лиса будет оставаться в центре экрана.
Новые элементы - возможность прицеливаться и подчинение пули закону гравитации. При помощи мыши игрок может прицелиться, и соломинка повернется в нужном направлении. После выстрела пуля упадет на землю.

Подход

Для того чтобы соломинка была повернута в правильном направлении, прежде всего необходимо измерить горизонтальное и вертикальное расстояния между курсором и соломинкой, а затем с помощью этих значений вычислить необходимый угол.
Полученное значение можно использовать для поворота клипа coлoминки в нужном направлении. Оно также определяет место вылета снаряда и количество пикселов по горизонтали и вертикали, на которое снаряд перемещается в каждом кадре.
Добавить влияние гравитации немного проще. В начале движения объектата-пули его траектория слабо изменяется под действием гравитации. Однако с каждым кадром скорость падения увеличивается. Пуля получила сильный импульс при запуске, поэтому она будет продолжать двигаться вверх, но все медленнее и медленнее, по мере уменьшения ее кинетической энергии. Затем пуля все быстрее и быстрее начнет падать вниз.
Это явление называется ускорением свободного падения и в реальном мире составляет примерно 32 фута/с2 (9,8 м/с2). В мире игры ускорение может иметь любое значение.

Подготовка ролика

Основное отличие данной игры от предыдущей состоит в том, что соломинка представляет собой отдельный клип. Благодаря этому она может поворачиваться независимо от лисы. Клип лисы по сравнению с предыдущей игрой не содержит анимации движения. Он является ни чем иным, как элементом фона игры, хотя и расположен поверх клипа соломинки.

Создание кода

Некоторые функции данной игры аналогичны функциям игры "Стрельба по воздушным шарам", поэтому нет смысла рассматривать их повторно. Это функции initGame, newBalloon, moveBalloons, checkCollision и distance.
Одна из новых функций в анализируемой игре - aimStraw. Она заменит функцию moveFox и будет вызываться из клипа "actions", которому назначен следующий код:

onClipEvent(load) {
root.initGame();
onClipEvent(enterFrame) {
_root.newBalloon ();
_root.moveBalloons() ;
_root.aimStraw();
_root.moveBullets() ;
}

Задача функции aimStraw - вычислить угол прицела и затем задать поворот клипа соломинки. Значение угла сохраняется в переменной strawRadians, которая используется функцией shootBullet. Для того чтобы вычислить угол между двумя точками, прежде всего необходимо определить значение разницы между горизонтальными и вертикальными координатами точек. Они хранятся в переменных dx и dy функции. Задав эти значения в функции Math.atan2, вы получите значение угла в радианах.

Углы измеряются в радианах или градусах. Полный круг в радианах будет равен 6,28 (2Pi), в градусах - 360. Радианы используются Flash в математических функциях наподобие Math.sin и Math.cos, а градусы - в параметрах клипов „rotation. Поэтому вы должны уметь преобразовывать значения из одних единиц измерения в другие.

Функция Math.atan2 является прекрасным инструментом для программирования игр. Арктангенс (во Flash - Math.atan) представляет собой функцию, вычисляющую угол наклона линии. Так как такой наклон определяется двумя точками, с помощью арктангенса можно преобразовать координаты этих точек в значение угла наклона. Однако при использовании арктангенса не учитывается, какая точка линии является анкером, а какая указателем, задающим угол. Поэтому легко получить углы, противоположные по значению тем, которые вам необходимы. Для того чтобы учесть различные варианты, необходимо написать несколько условных выражений. Функция Math.atan2 (y,x) вычисляет угол наклона линии между началом координат и точкой с координатами (х, у,). Тем самым решается проблема неоднозначности.

function aimStraw() {
// Определяем разницу координат начала
//и конца линии.
dx = _xmouse - straw._x;
dy = _ymouse - straw._y;
// Вычисляем угол наклона.
strawRadians = Math.atan2(dy,dx);
// Переводим полученное значение в градусы.
strawDegrees = 360*strawRadians/(2*Math.PI);
straw._rotation = strawDegrees;
}

Теперь при запуске пули в массив bullets будет записано больше информации. Чтобы осуществлять перемещение объекта-пули в каждом кадре, нам необходимо знать угол, под которым он был выпущен.
К каждому объекту массива bullets будет добавлен параметр down, описывающий силу гравитации, действующую на пулю. Исходное значение этого параметра - 0.
Для того чтобы пуля вылетала из кончика соломинки, ее координаты должны иметь значение, равное значению координат соломинки плюс 20 пикселов (длина соломинки чуть больше 20 пикселов). Эти пикселы необходимо распределить (найти значения катетов при заданной гипотенузе и у угле) между координатами х и у при помощи функций Math.sin и Math.cos для того, чтобы получить горизонтальную и вертикальную стороны угла.

Функции Math.sin и Math.cos используются здесь для определения горизонтальной и вертикальной сторон угла. Для того чтобы наглядно представить это, возьмем круг, центр которого находится в точке 0,0; крайняя верхняя точка имеет координаты 0, -1(система координат, в которой ось Y направлена вниз); крайняя правая - 1,0. Задав в функции Math.sin любой угол, вы получите координату y этого угла на окружности. Функция Math.cos позволяет вычислить координату х. Таким образом, значение Math, sin (0) будет равно (-1), значение Math.cos (0) - 0, что соответствует координатам 0, -1.
Более важно понять то, что перемещение имеет две составляющие: скорость и угол. Значения расстояний для монитора компьютера не могут быть заданы по диагонали, они задаются только по вертикали и горизонтали. Функции Math, sin и Math.cos позволяют преобразовать значения скорости и угла в расстояние по горизонтали и вертикали.

Функция moveBullets использует параметры angle и down каждого снаряда для перемещения их на определенное расстояние. Кроме этого параметр down увеличивается, чтобы создавался эффект гравитации.
Так как запушенный снаряд должен снова упасть на землю, прежде чем удалить его клип из массива, необходимо проверить, достиг ли он нижнего края экрана.

К сведению

Так как пули в данной игре могут разлетаться в разные стороны, мы поменяли изображение пули в клипе, теперь она напоминает не короткую линию, а скорее небольшую точку.

Другие возможности

Как и предыдущую игру этой главы, только что рассмотренную можно усовершенствовать различными способами, например можно добавлять очки за шары, летящие выше и быстрее. Неплохим вариантом будет создание на ее основе игры, где в качестве целей будут использоваться самолеты. Оружие, из которого ведется обстрел, обычно в таких играх неподвижно, но может стрелять под разными углами.

Шарики-захватчики

Исходный файл: Ballooninvaders.fla

В самой классической видеоигре, "Космические захватчики", есть очень странное, но запоминающееся поведение вражеских единиц. Они движутся группой из стороны в сторону, медленно опускаясь вниз. Если они достигнут поверхности, игрок проигрывает.
Давайте изменим первую игру данной главы так, чтобы воздушные шарики вели себя как космические захватчики.

Задачи проекта

Поведение шариков простое. Они образуют группу шириной 10 и высотой 3 шарика, как показано на рис. 10.5. Шарики движутся вправо, пока первая колонна шариков не коснется правой стороны экрана. Тогда они меняют направление и чуть-чуть опускаются.

Рис 10.5 Шарики-захватчики движутся группой

Между тем лиса внизу движется слева направо и стреляет в шарики. Она должна перестрелять их всех, прежде чем группа шариков достигнет поверхности земли.

Подход

Поведение лисы может остаться таким же, как в первой игре этой главы. Но поведение шариков должно быть полностью изменено. К тому же во время игры не должно быть создано ни одного нового шарика. Они все появляются в начале игры.

Подготовка ролика

Как и в первой игре этой главы, есть кадр стоящей лисы - "stand", и анимация ходьбы. У шарика есть нормальный кадр и анимация взрыва. Все шарики сначала серого цвета и потом раскрашиваются с помощью ActionScript. Пуля - это короткий клип-линия.

Создание кода

Клип "actions" такой же, как в первой игре этой главы, за исключением того, что новые шарики не создаются в каждом кадре.

onClipEvent(load) {
_root.initGame();
onClipEvent(enterFrame) {
_root.moveBalloons();
_root.moveFox();
_root.moveBullets();
}

Функция initGame вызывает функцию createBalloons, чтобы создать группу шариков. Ей не нужно задавать такие переменные, как nextBalloon или создавать массив balloons, поскольку после начала игры новые шарики не создаются.

function initGame() {
// Создаем шарики.
createBalloons О;
// Параметры снарядов.
nextBulletTime = 0;
nextBullet = 0;
bullets = [];
// Переменная счета.
score =0;
}

Функция createBalloons создает 30 шариков в 10 колонках по 3 штуки в каждой. Каждая ссылка на шарик хранится в массиве. Цвет шарику назначается в зависимости от того, в каком он ряду. Каждому шарику придано начальное направление и скорость равная 3.

Функция moveBalloons двигает все шарики в массиве balloons. Если какой-нибудь из них дотронется до края экрана, то все они меняют направление. Если же какой-нибудь достигнет низа экрана, игра заканчивается.

Все функции для создания лисы и пуль точно такие же, как и в первой игре главы, поэтому их код я здесь приводить не буду. Но функция checkCollision другая, поскольку она должна следить, не случилось ли так, что все шарики уничтожены, и заканчивать игру.

К сведению

Как и в исходной игре этой главы, здесь есть вводный и заключительный кадры. Я в обоих играх использую одинаковые кадры вне зависимости от того, выиграл игрок или проиграл. Вы можете сделать два разных кадра с соответствующим текстом в каждом.

Другие возможности

Чтобы сделать игру труднее, вы можете ускорить движение захватчиков. Сначала попробуйте увеличить расстояние, на которое они падают каждый раз. Также можно увеличить скорость, с которой они движутся из стороны в сторону.
Если вы хотите добавить в игру уровней, то можете создать переменную startSpeed, которая начинается со значения 3. Задайте эту скорость функции balloonDirection каждого шарика вместо жестко заданного "3". Пусть теперь после того, как все шарики выбиты, игрок переходит к экрану "level over". Когда он нажимает кнопку "play next level", startSpeed увеличивается, и ролик отправляется к кадру "play", где шарики появляются с новой, более высокой скоростью.