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



Бита и блоки

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

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

Рисунок 11.4 В игре "Бита и блоки" представлены ряды блоков, которые игрок должен выбить с помощью мяча

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

Цель состоит в том, чтобы создать классическую игру игровых автоматов с битой и блоками. С помощью мыши можно перемешать биту по горизонтали. Мяч отскакивает от верхней и боковых стен и считается пропущенным, если пролетает мимо биты, сквозь нижнюю стену.
Когда мяч ударяется о блок, он отскакивает, а блок исчезает. После того как будут выбиты все блоки, игра переходит на другой уровень, где на экране окажутся те же блоки, но мяч будет двигаться быстрее. Просмотрите ролик Paddlebricks.fla, чтобы увидеть, как работает игра.
Другое отличие этой игры от предыдущих состоит в том, что направление движения мяча зависит от того, в каком месте мяч ударится о биту. Если он попадает в левую часть биты, то отлетает влево, если же в правую, то вправо. Угол определяется тем, насколько далеко от центра биты ударился мяч.

Подход

Код для определения, в каком месте биты или стены ударился мяч, похож на код предыдущих двух игр. Единственное отличие заключается в том, что теперь мяч может отскакивать не только от верхней биты, а и от любой ее точки. Таким образом, становится немного проще отбить мяч.
При столкновении мяча с блоком направление его движения по вертикали изменяется на противоположное. Блок же удаляется с экрана.
В предыдущих играх было достаточно определить, когда мяч ударяется о блок, для чего использовался метод hitTest. Теперь задача усложняется: надо рассмотреть все четыре стороны мяча по отношению ко всем четырем сторонам блока. Если мяч и блок полностью перекрываются, то считается, что произошло столкновение. С помощью метода hitTest можно было бы определить момент, когда мяч находится внутри прямоугольного блока. Но этого не достаточно для данной игры.
При столкновении мяча с битой рассчитывается расстояние между центром мяча и центром биты. Длина биты - 50 пикселов, так что это расстояние может быть чуть более 25 пикселов, либо со знаком "+", либо со знаком "-". Разделите данное число на 4 и получите значение между -7 и 7.
Новое значение будет присвоено переменной dx, которая определяет скорость движения мяча по горизонтали.
Это значит, что игрок может направлять мяч. Если, например, он отобьет мяч левым краем биты, мяч будет направлен резко влево. Если же отбить серединой биты, то мяч полетит прямо вверх.

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

Для этого ролика нужно пять кадров, то есть больше, чем в ранее рассмотренных играх. Первый кадр - "start game". Он появляется только в начале игры. Щелчок по кнопке Play переводит игрока непосредственно в кадр "play", и игра начинается.
Второй кадр - это "start level". Он отображается, когда игрок переходит на второй и последующие уровни. Здесь щелчок по кнопке Play также переносит игрока в кадр "play", то есть к началу нового уровня.
Третий кадр - "start ball". Он отображается, когда игрок пропускает мяч и хочет подать себе следующий. Внимательно рассмотрите исходный файл. Как видите, блоки присутствуют в третьем и четвертом кадрах, то есть в кадре "play". Таким образом, изображения блоков сохраняются, пока ролик переходит от кадра "play" к кадру "start ball". Иначе блоки будут расположены на своих исходных позициях.
Последний кадр - "game over". Щелчок по кнопке Play перенесет игрока обратно к кадру "start game", где значения некоторых важных параметров будут восстановлены.
Кроме организации расположения кадров необходимо создать блоки для третьего и четвертого кадров. В исходном ролике блоки имеют ширину 48 пикселов и высоту 8 пикселов. В примере расстояние между ними составляет 50x10 пикселов, таким образом, получается 5 рядов блоков по 11 блоков в каждом, что в общей сложности составляет 55 блоков.

Для того чтобы не именовать 55 блоков на рабочем поле, подумайте, а не начать ли игру вовсе без блоков, а затем воспользоваться оператором attachMovie, чтобы добавить каждый блок с помощью кода. Хотя данная техника здесь не применяется, можно посмотреть, как она реализована в следующей игре этой главы.
К сожалению, каждому блоку должно быть присвоено имя, чтобы код мог его распознать. В исходном файле им назначены имена от al до а55. Клип с мячом называется "ball", а с битой - "paddle".

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

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

dy = 3;
numBalls = 3;
stop() ;

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

onClipEvent(load) {
_root.startBall();
onClipEvent(enterFrame) {
_root.moveBall();
_root.movePaddle();
_root.checkCollisions();
}

Когда начинается кадр "play", подается мяч. Положение мяча определяется тем, где он появляется на рабочем поле. Скорость мяча по горизонтали всегда равна 3, направление движения - вправо. Скорость по вертикали указывается в первом кадре, где величине dy было присвоено значение 3. Однако это значение изменится перед следующим уровнем.
Вдобавок к параметрам мяча воспользуйтесь возможностью и установите некоторые значения, которые не будут изменяться во время игры.

function startBall() {
// Определяем начальное положение мяча,
х = ball._x;
у = ball._y;
// Устанавливаем начальную скорость по горизонтали,
dx = 3;
// Прячем курсор.
Mouse.hide();
// Задаем значения констант.
rightWall = 550;
leftWall = 0;
topWall = 0;
bottomWall = 400;
ballRadius = ball,_width/2;
paddleTop = paddle._y-paddle._height/2;
paddleBottom = paddle._y+paddle.__height/2;
}

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

// Бита следует за курсором,
function movePaddle() {
paddle._x = _xmouse;
}

Следующая функция покажется вам знакомой, так как она очень похожа на функцию moveBall, которая используется в других играх этой главы. Однако есть и некоторые отличия.
Для того чтобы узнать, ударился ли мяч о биту, код проверяет, полностью ли они перекрываются (13). Затем, если все-таки столкновение произошло, скорость мяча по горизонтали определяется тем, где именно мяч ударился о биту (14). К тому же код для определения, пропущен ли мяч, проще, так как он просто проверяет, пролетел ли мяч сквозь нижнюю стену или нет (15).

function moveBall() {
// Изменяем горизонтальное и вертикальное положение мяча.
х += dx;
У += dy;
// Проверяем, находится ли мяч у правой стены,
if (x+ballRadius > rightWall) { overshoot = (x+ballRadius) - rightWall;
x -= overshoot*2;
dx *= -1;
// Проверяем, находится ли мяч у левой стены.
if (x-ballRadius < leftWall) {
overshott = leftWall - (x-ballRadius);
x += overshoot*2;
dx *= -1;
// Проверяем, находится ли мяч у верхней стены,
if (y-ballRadius < topWall) {
overshoot = topWall - (y-ballRadius);
у += overshoot*2;
dy *= -1;
(13)// Находится ли мяч там, где должен удариться о биту?
if ((y+ballRadius > paddleTop) and (y-ballRadius < paddleBottom)) {
// Находится ли там бита?
paddleLeft = paddle._x-(paddle._width/2);
paddleRight = paddle._x+(paddle._width/2);
if ((x+ballRadius > paddleLeft) and (x-ballRadius < paddleRight)) {
// Удар о биту.
overshoot = paddleTop- (y+ballRadius);
у += overshoot*2;
dy *= -1;
(14) // Указываем горизонтальную скорость мяча
//в зависимости от места соприкосновения мяча и биты.
dx = (ball._x - paddle._x)/4;
} else {
// Мяч пролетел мимо биты
passedPaddle = true;
(15) // Проверяем, пролетел ли мяч мимо биты.
if (у > bottomWall) {
Mouse.show() ;
if (numBalls == 0) {
// Больше мячей нет, конец игры.
gotoAndPlay("game over");
} else {
// Еще остался мяч.
numBalls--;
gotoAndPlay("start ball");
}
} // Определяем расположение мяча,
ball._x = х;
ball._y = у;
}

Для того чтобы узнать, ударил ли мяч по блоку, код проверяет все 55 блоков. Блок с горизонтальным положением равным -1000 пикселов уже был сбит, такие блоки игнорируются. В противном случае вызывается функция brickHits, чтобы определить, перекрываются ли мяч и блок. Если да, то блок удаляется, а мяч отталкивается от него.
Обратите внимание на переменную leveldone. Изначально ее значение равно true, но оно изменяется на false, как только встречается блок, который не был сбит. Если значение переменной leveldone все еще остается истинным после того, как были использованы все мячи, игроку удалось удалить все блоки. Игра переходит к кадру "start level", но прежде увеличивается скорость мяча по вертикали, то есть переменная dy.

Необходимо проверить, превышает ли скорость мяча по вертикали значение 7, если да, то нужно снова присвоить ей значение 7. Это вызвано тем, что блоки имеют 8 пикселов в высоту. Если скорость мяча будет равна 8 пикселям или более, тогда мяч будет перелетать через блоки, не выбивая их. К. счастью, скорость, равная 7, и так слишком велика - даже хороший игрок долго не продержится.

function checkCollisions() {
// Определяем границы мяча. ballTop = ball._y - ball._height/2;
ballBottom = ball._y + ball._height/2;
ballLeft = ball._x - ball._width/2;
ballRight = ball._x + ball._width/2;
// Допускаем, что уровень пройден,
leveldone = true;
// Выясняем, ударил ли мяч по блоку,
for (i = l; i < = 55 ; i + +)
{ brick = _root["a" + i] ;
// Проверяем, есть пи еще блоки вокруг,
if (brick._х о -1000) {
if (brickHit(brick)) {
// Если по блоку ударили,
// его нужно удалить с экрана.
brick._х = -1000;
// Изменяем направление движения мяча,
dy *= -1;
} else {
// Блоки еще остались, так что уровень
//не закончен,
leveldone = false;
}}
} // Все ли блоки уже выбиты?
if (leveldone) {
// Начать новый уровень.
Mouse.show();
gotoAndPlay("start level");
// Увеличиваем скорость движения мяча по вертикали.
dy += 1;
if (dy > 7) dy=7;
}
}

Обратите внимание, что в функции hitBrick находятся четыре вложенных оператора if. Возможно, вам будет интересно, почему не написать четыре условия в линию, соединив их оператором AND. Дело в скорости. С вложенными операторами if, если одно из условий оказалось ложным, программа не будет проверять остальные. Таким образом, значительно сократится объем работы, которую выполняет программа, и скорость игры увеличится. С операторами AND программе Flash придется проверять все четыре условия, даже если первое из них ложное.

Функция hitBrick проверяет все четыре стороны мяча по отношению ко всем четырем сторонам блока, чтобы узнать, перекрывает ли мяч один из них. Функция возвращает значение либо true, либо false.

function brickHit(brick) {
// Проверяем, попал ли мяч по блоку.
if (ballTop <= brick._y + brick._height/2) {
if (ballBottom >= brick._y - brick._height/2) {
if (ballRight >= brick._x - brick._width/2) {
if (ballLeft <= brick._x + brick._width/2) {
// Все условия верны, то есть мяч
// столкнулся с блоком,
return(true);
}}}} // Мяч не столкнулся с блоком,
return(false);
}

К сведению

Для работы кода необходимо точно указать множество элементов. Запустите ролик Paddlebricks.fla, чтобы посмотреть готовый вариант программы в действии. Для создания своей собственной версии необходимо запомнить имена всех клипов и в каждый кадр вставить команду stop. Также нужно вставить небольшие фрагменты кода в кнопки и первый кадр.
Ряды блоков были раскрашены с помощью эффекта Tint (Окраска), благодаря чему игра стала визуально более интересной. Вы можете выбрать другое графическое решение, ничего не меняя в функциональной части игры.

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

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

Назад Начало Вперед



Книжный магазин