Создание Flash-игр

         

Астероиды

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

Теперь создадим игру, аналогичную предыдущей, но на этот раз кораблем будет небольшой графический объект в центре экрана. Астероиды движется в различных направлениях. Эта игра похожа на многие классические аркады 70-х и 80-х годов, хорошо знакомые большинству читателей. На рис. 16.3 показан кадр ролика Spacerocks.fla.

Рисунок 16.3 В игре "Астероиды" действующие объекты - небольшой корабль и астероиды различных размеров

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

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


Изначально размер астероида составляет 100%, скорость и направление движения произвольные. Когда по нему первый раз попадает пуля, он распадается на два .астероида, размер каждого из которых - 50%, направление их движения также произвольно. Эти астероиды, в свою очередь, могут распасться на два более мелких, размер которых будет составлять 25% от исходного астероида. Если после этого в астероид попадает пуля, он взрывается. Когда все астероиды будут разрушены, игрок сможет перейти на следующий уровень. Однако если астероид столкнется с кораблем, уменьшится количество жизней.

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

Библиотека для этого ролика несложная. В ней содержатся астероиды трех типов: "rock1", "rock2" и "госк1". Для того чтобы внести в игру некоторое разнообразие, каждый раз при создании астероида случайным образом выбирается один из трех клипов.
В клипе "ship" первый кадр - статический, во втором кадре начинается анимация, которая показывает, как загораются ускорители. Первый кадр этой анимации называется "thrust". Вместо того чтобы расположить корабль на рабочем поле с помощью команды attachMovie, его помешают в центр поля вручную, поэтому можно не заботиться о создании и размещении этого клипа с помощью кода.
Для формирования пуль используется клип "bullet". Код игры содержится в клипе "actions" и сценарии кнопки "button". Единственная кнопка на экране, реально выполняющая функцию кнопки, - это кнопка Play.
В ролике будут находиться кадры "start", "play", "ship hit", "level over" и "game over", в каждом из которых создается соответствующий текст. В каждом кадре, кроме "play", находится копия кнопки Play, но к каждому экземпляру этой кнопки прикреплен разный код. Просмотрите ролик. Spacerocks.fla, чтобы понять, где расположены все эти элементы и какой код прикреплен к каждому из них.

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

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

onClipEvent(load) {
// Устанавливаем все элементы игры.
_root.startLevel();}
onClipEvent(enterFrame) {
// Перемещаем корабль на один шаг.
_root.shipMove();
// Перемещаем все пули на один шаг.
_root.bulletsMove();
// Перемещаем астероиды на один шаг.
_root.rocksMove();
// Выясняем, произошло ли столкновение.
_root.checkHits(); }

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

on (keyPress "") {
// Выстрел.
shipFire() ;}
on (keyPress "") {
// Поворот на 30° вправо.
shipTirn(30);}
on (keyPress "") {
// Поворот на 30° влево.
shipTirn(30) ;}
on (keyPress "") {
// Перемещаем корабль вперед.
shipThrust(); }
on (keyPress "") {
// Корабль останавливается.
shipBreak();}

Когда игрок щелкает по кнопке Play, чтобы начать игру, в кадре "start" можно установить несколько переменных: обнулить количество набранных очков, начать первый уровень игры и указать, что игрок имеет три жизни.

on (press) {
gameLevel = 1;
lives = 3;
score = 0;
gotoAndPlay("play");}

Все функции находятся в сценарии кадра "play" основной временной шкалы. Первая функция вызывается в начале игры, а также сразу после того, как у игрока уменьшилось количество жизней.
Экземпляру клипа "ship" на рабочем поле присвоено имя "ship". В дополнение к стандартным свойствам клипа, таким как _хи_у, вы добавите несколько новых. Например, свойства dx и dy будут отражать расстояние, на которое перемещается корабль по горизонтали и вертикали соответственно.
Функция startLevel создает массивы bullets и rocks, в которых хранится список клипов пуль и астероидов.
Переменная level, используемая командой attachMovie, определяет уровень клипа, а не уровень игры, для этого применяется переменная gameLevel.
Далее для начала уровня создаются большие астероиды. На первом уровне - два астероида, на втором - три и т.д.
Потом в функции shipFire используется переменная timeOfLastFire, чтобы игрок не мог слишком часто стрелять.

function startLevel() {
// Корабль не движется,
ship.dx = 0.0;
ship.dy = 0.0;
// Создаем новые массивы,
bullets = new Array();
rocks = new Array();
// Начинаем игру с нулевым уровнем клипа,
level = 0;
// Добавляем новые астероиды, количество которых на единицу
// больше значения переменной
gamelevel. tor(i=0; i newRock{100,0,0) ;}
// Можно стрелять сразу же.
timeOfLastFire = 0;}

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

function shipTurn(amt) {
// Поворачиваем корабль,
ship._rotation += amt;}

Следующая функция активизирует ускорители. С помощью функций Math.cos и Math.sin она преобразует угол поворота корабля в горизонтальную и вертикальную компоненты. К сожалению, свойство клипа _rotation представлено в градусах, а две математические функции требует величины в радианах. Для перевода значения из градусов в радианы необходимо из величины „rotation вычесть 90° (чтобы 0° находился в верхней точке окружности, а не в правой), а затем умножить на 2? и разделить на 360.

function shipThrust() {
// Перемещаем корабль туда, куда направлен его нос.
ship._dx += Math.cos(2.0*Math.Pi*(ship._rotation-90)/360.0);
ship._dy += Math.sin(2.0*Math.Pi*(ship._rotation-90)/360.0);
// Показываем, как включаются ускорители,
ship.gotoAndPlay("thrust");}

С другой стороны, когда игрок нажимает клавишу со стрелкой "вниз", можно легко остановить корабль, обнулив свойства dx и dy.

function shipBreak() {
// Останавливаем корабль.
ship.dx = 0;
ship.dy = 0;}

Когда игрок нажимает клавишу Пробел, корабль должен выстрелить. Однако сначала проверяется, достаточно ли времени прошло с момента последнего выстрела.
С помощью клипа "bullet" генерируется пуля, свойства dx и dy создаются и устанавливаются так же, как и для корабля. А в массив bullets добавляется указатель на клип, чтобы потом можно было легко к нему обратиться.

function shipFire() {
// Выясняем, достаточно ли времени прошло
//с момента последнего выстрела.
if (timeOfLastFire+200 < getTimer()) {
// Запоминаем, когда производится этот выстрел.
timeOflastFire = getTimer();
// Создаем пулю.
level++;
attachMovie("bullet", "bullet"+level, level);
// Определяем положение и направление движения пули,
clip = _root["bullet"+level];
clip._x = ship._x;
clip._y = ship._y;
clip.dx = 10.0*Math.cos(2.0*Math.PI*-(ship._rotation-90)/360.0);
clip.dy = 10.0*Math.sin(2.0*Math.PI*(ship._rotation-90)/360.0) ;
// Добавляем элемент массива
bullets, bullets.push(clip);
}}

В каждом кадре корабль перемешается на один шаг: для этого увеличиваются значения свойств _х и _у на величины dx и dy соответственно. Если корабль слишком далеко подвинулся вправо, то есть за пределы рабочего поля, то из значений этих свойств вычитается 550 пикселов, чтобы корабль появился с противоположной стороны экрана. Аналогичные действия производятся для левой, нижней и верхней границ рабочего поля.

function shipMove() {
// Перемещаем корабль по горизонтали или, если нужно,
//на противоположную сторону экрана.
ship._x += ship.dx;
if (ship._x > 550) ship._x -= 550;
if (ship._x < 0) ship._x += 550;
// Перемещаем корабль по вертикали или, если нужно,
//на противоположную сторону экрана.
ship._y += ship.dy;
if (ship._y > 400) ship._y -= 400;
if (ship._y < 0) ship._y += 400;
}

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

function bulletsMove() {
// Передвигаем все пули.
for(i=bullets.length-1; i>=0; i--) {
// Перемещаем пулю по вертикали и горизонтали,
bulletsti]._х += bullets[i].dx;
bullets [ij ._y += bullets [i] .dy;
// Выясняем, вылетела ли пуля за границу экрана,
if ((bullets[i]._x > 550) or (bullets[i]._x < 0) or (bullets[i]._y > 400) or (bullets[i]._y < 0)) {
// Удаляем клип и элемент массива,
bullets[i].removeMovieClip();
bullets.splice(i,1);
}}}

Астероиды создаются с помощью функции newRock, которая, как и функция fire, добавляет новый клип. Однако здесь функция выбирает один из трех эталонов: "rock1", "rock2" и "госк3".
Параметры, передаваемые функции, определяют положение и размер астероида. Направление движения указывается случайным образом, при переходе на следующий уровень скорость астероидов увеличивается.
Астероиды вращаются либо по часовой стрелке, либо против со скоростью, значение которой определяется произвольно.
Для всех астероидов добавляются указатели в массив rocks, чтобы потом можно было к ним обратиться.

function newRock(size,x,у) {
// Создаем клип астероида.
level++;
rockNum = int(Math.random()*3+1);
attachMovie("rock"+rockNum,"rock"+level,level);
// Указываем положение и размер астероида.
clip = _root["rock"+level];
clip._x = x;
clip._y = y;
clip._xscale = size;
clip._yscale = size;
// Определяем скорость и направление движения астероида.
speed = gameLevel*2;
clip.dx = Math.random()*speed+2;
if (math.random() < .5) clip.dx *= -1;
clip.dy = Math.random()*speed+2;
if (math.random() < .5) clip.dy *= -1;
// Устанавливаем направление и скорость вращения,
clip.spin = Math.random()*б-3;
// Добавляем астероид в массив rocks,
rocks.push(clip); }

Для движения астероида используется такой же код, что и для движения корабля. Астероиды, как и корабль, возвращаются на рабочее поле с противоположной стороны, если достигают его границы. Не забывайте поворачивать астероид в соответствии с созданным вами свойством spin.

function rocksMove() {
// Просматриваем все астероиды,
for(i=rocks.length-1; i>=0; i-) {
clip rocks[i].clip;
// Перемещаем астероид по горизонтали и, если нужно,
//на противоположную сторону экрана.
rocks[i]._x += rocks[i].dx;
if (rocks[i]._x > 550) rocks[i]._x -= 550;
if (rocks[i]._x < 0) rocks[i]._x += 550;
// Перемещаем астероид по вертикали и, если нужно,
// на противоположную сторону экрана.
rocks[i]._y += rocks[i].dy;
if (rocks[i]._y > 400) rocks[i]._y -= 400;
if (rocks[i] ._y < 0) rocks [i].__y += 400;
// Вращаем астероид.
rocks[i]._rotation += rocks[i].spin;
}}

Для простоты код, определяющий столкновения, был помешен в одну функцию, которая просматривает все астероиды и пули и с помощью команды hitTest проверяет, попала ли пуля в один из астероидов.
Когда пуля попадает в астероид, его размер и положения записываются, а сам астероид удаляется. Если размер астероида превышал 25%, в этой же точке создается два новых астероида, каждый из которых в два раза меньше своего предшественника. Направление движения и вращения каждого астероида выбирается случайным образом.
Функция checkHits также проверяет, не столкнулся ли какой-либо астероид с кораблем, если да, то уменьшается количество жизней, и ролик переходит к кадру "ship hit". Если не осталось ни одной жизни, то -к кадру "game over".
И в конце функция checkHits проверяет, остались ли элементы в массиве rocks. Если нет, значит, игрок разрушил все астероиды, и ролик переходит к кадру "level over".

function checkHits() {
// Просматриваем все астероиды,
for (j=rooks.length-1; i>=0; i--) {
// Просматриваем все пули.
for (j=bullets.length-1; j>=0; j--) {
// Выясняем, попала ли пуля в астероид.
if (rocks[i].hitTest(bullets[j]._x,bullets[j]._y,true)) {
// Удаляем пулю.
bullets[j].removeMovieClip();
bullets.splice(j);
// Опредляем размер и положение новых астероидов.
newsize = rocks[i]._xscale / 2 ;
x = rocks[i]._x;
у = rocks[j]._y;
// Удаляем астероид.
rocks[i].removeMovieClip();
rocks.splice(i,1);
// Создаем на этом месте два новых астероида,
if (newsize >= 25) {
newRock(mewsize,x,y);
newRock(mewsize,x,y);}
// Увеличиваем количество очков. score++;
// Больше не нужно проверять, попала ли пуля
//в какой-нибудь астероид.
break;}}
// Определяем, столкнулся ли корабль с астероидом,
if (rocks[i].hittest(ship._x, ship._y, true)) {
// Выясняем, остались ли еще жизни,
if (lives < 1) {
removeAll();
gotoAndPlay("game.over");
// Жизнь еще осталась,
// уменьшаем количество жизней на единицу.
} else {
removeAll();
lives--;
gotoAndPlay("ship hit");
}}}
// Проверяем, остались ли еще астероиды,
if (rocks.length == 0) {
removeAll();
gotoAndPlay("level over");
gameLevel++;
}}

Функция removeAll используется непосредственно перед функцией checkHits, которая переводит ролик к следующему кадру. С экрана удаляются все астероиды и пули, чтоб они не заслоняли текст последующих кадров.

function removeAll() {
// Удаляем все клипы пуль,
for (i=0; i bullets[i].removeMovieClip();}
// Удаляем все клипы астероидов.
for (i=0; i rocks[i].removeMovieClip();
}}

К сведению

Как всегда, убедитесь, что для клипов в библиотеке установлены свойства связи, чтобы они были включены в swf-файл. Свойства связи необходимо установить для астероидов и пуль, потому что до начала игры их нет на рабочем поле.
Я также создал три текстовых поля, отображающих значения переменных gameLevel, lives и score. Эти поля расположены в разных углах экрана, над ними добавлен поясняющий текст.

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

В таких играх, как "Астероид", можно придумать много интересного. Например, время от времени вокруг корабля может летать небольшой НЛО; если игрок его собьет, то заработает дополнительные очки. Зачастую корабль оснащен щитом, который защищает его от определенного количества столкновений. Функция "Гиперпространство" переносит корабль в произвольную точку экрана, а "бомба" взрывает все астероиды, находящиеся на заданном расстоянии от корабля.
Это превосходная игра, в которой начинающий программист ActionScrip может попробовать свои силы и применить все имеющиеся знания. Чем разнообразнее игра, тем лучше.


Содержание раздела