Бита и блоки: три измерения

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

Итак, в этой главе вы видели, как шар движется по плоскости. А что если шар должен будет двигаться в третьем измерении: в глубину? На рис. 11.5 показано, как это может выглядеть. Бита - это полупрозрачный квадрат на переднем плане игры. Четыре боковые стены ведут к задней стене, находящейся на некотором расстоянии "в глубине" экрана. Шар уменьшается по мере того, как становится все дальше от биты. Цель состоит в том, чтобы выбить все кирпичи (блоки) из задней стены.

Рисунок 11.5 Цель этой игры такая же, как и у предыдущей, но перспектива создает некоторую специфичность

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

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

Подход

Чтобы следить за положением мяча, необходима новая переменная. Можно использовать х для горизонтальной и у для вертикальной характеристики положения шара. Третья переменная, z, следит за глубиной -как глубоко внутри экрана находится шар.
Эти три переменные определяют положение мяча внутри воображаемого параллелепипеда, в котором происходит игра. Этот параллелепипед имеет горизонтальные и вертикальные размеры по 400 единиц и 140 единиц в глубину. Чтобы перевести это в координаты экрана, нужна некоторая ловкость. Если вы еще раз посмотрите на рис. 11.5, то заметите, что границы шахты видимы. Наружный квадрат (грань), ближний к игроку, находится на том же уровне, что и бита. Он имеет размер 400x400. Внутренняя грань, представляющая заднюю стену, имеет размер 120x120.
На рисунке 11.6 еще раз изображены обе грани, но на этот раз с обозначенными х, у и z координатами. Верхний левый угол обеих граней имеет значения х и у равные 0. Однако наружный угол имеет значение z равное 0, а внутренний - значение z, равное 140. Остальные углы обозначаются аналогично.
Если мяч находится на позиции (х, у) = (0,0) и движется от 0 к 140 вдоль оси Oz, то он движется вдоль ребра параллелепипеда (рис. 11.6). Если мяч в центре экрана, в положении (200,200), и движется от 0 до 140 вдоль Oz, ему вообще не нужно смешаться вправо или влево. Если мяч в какой-нибудь промежуточной позиции, например (50,65), и движется от 0 до 140 вдоль Oz, то он должен двигаться вдоль своей линии перспективы так, чтобы сохранить свое положение относительно передней и задней граней.
Иллюзия трехмерности достигается также за счет уменьшения значения масштаба мяча по мере его удаления.

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

Ролик включает в себя четыре кадра. Все действия происходят во втором кадре. Фоном для всех кадров служит параллелепипед, показанный на рис. 11.5. Его внешняя граница размером 400x400 полностью заполняет рабочее поле. Внутренняя граница, представляющая заднюю грань, имеет размер 120x120 и располагается точно в центре.

Рис.11.6 Обозначены значения х, у и z каждого угла игровой области

Остальные клипы также находятся на экране. Первый - это бита, квадрат размером 70x70. Этому клипу присвоено имя "paddle" и его параметр _alpha=50%, что делает его полупрозрачным. Мяч - это клип "ball", содержащий круг диаметром 30 пикселов. Также в стороне расположен клип "action".
В библиотеке есть также клип "brick". Клип экспортируется вместе с роликом. Он используется для создания кирпичей, которые покрывают заднюю стену.
Если вы внимательно посмотрите на рисунок 11.5, то кроме толстых линий наружной и внутренней стен можете увидеть контур из тонких линий где-то в середине. Этот набор линий движется вместе с мячом вглубь экрана. Он помогает игроку определить, где находится мяч. Посмотрите ролик-пример, чтобы увидеть, как это работает. Вам нужен, клип размером 400x400, чтобы сделать эти линии. В примере этот клип называется "ring".

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

Код состоит в основном из функций, расположенных во втором кадре. Первая начинает игру. Вместо отдельных переменных для хранения х, у и z значений мяча, мы используем один объект, ballpos, который имеет о свойства. Таким образом, ballpos .x соответствует x-положению мяча. То же самое мы делаем для ballvel, где содержатся х, у и z скорости мяча.
В начале игры значения свойств объекта bollpos устанавливаются таким образом, чтобы мяч начинал свое движение от задней стенки параллелепипеда. Значения объекта ballvel задают начальное движение мяча строго вдоль оси Oz и скорость на единицу большую номера уровня игры (то есть 2).
Следующая часть функции initGame создает 16 блоков из одного библиотечного образца и покрывает ими всю заднюю стенку. В заключении функции мы устанавливаем уровень биты и шара так, чтобы они были расположены поверх созданных кирпичей.

function initGame() {
// Устанавливаем мяч.
ballpos = {х:200, у:200, z:140};
// Определяем его скорость.
ballvel = {х:0, у:0, z:-(1+gameLevel)};
// Создаем блоки,
bricks = new Array();
for(var x=0;x<4;x++) {
for(var y=0;y<4;y++) {
brick = attachMovie("brick","brick"+x+y,x+y*4);
brick._x = 155+30*x;
brick._y = 155+30*y;
bricks.push(brick);
// Перемещаем биту и шар на передний план.
paddle.swapDepths(101);
ball.swapDepths(100);
}

Клип "actions" вызывает всего две функции.

onClipEvent(enterFrame) {
_root.movePaddle();
_root.moveBall(); }


Первая из этих функций, movePaddle, очень простая. Она устанавливает биту в позицию курсора.

function movPaddle() {
//Положение биты соответствует положению курсора.
Paddle._x=_root._xmouse;
Paddle._y=_root._ymouse;
}

А вот функция moveBall выполняет очень много действий. Вначале переопределяются координаты мяча (объект ballpos) с помощью значений объекта ballvel (16).
Затем вычисляется положение мяча на экране (17). Координата х определяется как значение ballpos. х, подкорректированное в соответствии со значением ballpos.z. Чем глубже находится шар, тем большую величину составляет поправка. Второй множитель поправки определяется тем, насколько далеко находится шар от стенок колодца. Если, например, шар находится ровно посередине между стенкой и центральной осью, то есть ballpos.х = 100 или (-100), то поправка будет равняться значению ballpos.z (ballpos.z соответственно). Если вы не вполне поняли логику этих рассуждений, попробуйте поменять различные параметры объекта bollpos и посмотрите на результат.
Следующий фрагмент кода устанавливает значение масштаба шара в соответствие со значением ballpos.z (18). Поскольку максимальное значение ballpos.z составляет 140, то минимальный масштаб составляет (200-140)/2, то есть 35%.
Далее мы устанавливаем масштаб клипа "ring" (19). Этот клип выполняет роль указателя, помогающего понять, на какой глубине находится шар в данный момент.
Если шар сталкивается с одной из стен параллелепипеда (20), происходит отражение от стенки. Проверка выполняется для всех четырех стен.
Столкновение с задней стенкой (21) обрабатывается несколько сложнее. Значение z меняется на противоположное. Кроме того, клипы блоков проверяют, куда именно врезался шар. Блок, с которым произошло столкновение, удаляется, и счет увеличивается.
Передней стенки у нас нет, но на ее месте располагается бита. Если параметр z принимает значение 0, клип биты проверяет, попал ли в него? шар (22). Бита имеет размер 70x70, так что шар должен находиться не далее чем в 35 пикселях по каждой из координат от центра биты. При столкновении определяются новые значения скорости шара в соответствии с расстоянием от центра биты до места столкновения (23). При столкновении строго по центру шар отражается отвесно, тогда как отражение, например, от левой стороны отклоняет мяч влево и т.д.
При столкновении с битой ее параметр _alpha на мгновение принимает значение 90 (24). В следующем кадре значение восстанавливается (26).
Если шар пролетает мимо биты, игра заканчивается (25). Если же все блоки оказываются выбиты, игрок переходит на следующий уровень.

function moveBall() {

(16)// Определяем пространственные координаты шара.

ballpos.х += ballvel.x;
ballpos.у += ballvel.у;
ballpos.z += ballvel.z;

(17) // Определяем плоские координаты.

ball._x = ballpos.x + ballpos.z*(200-ballpos.x)/200;
ball._y = ballpos.у + ballpos.z*(200-ballpos.у)/200;

(18) // Корректируем размер шара.

ball._xscale = (200-ballpos.z)/2;
ball._yscale = (200-ballpos.z)/2;

(19) // Определяем размер рамки.

ring._xscale = (200-ballpos.z)/2;
ring._yscale = (200-ballpos.z)/2;

(20) // Проверяем столкновения со стенками,

if (ballpos.x > 400) ballvel.x *= -1;
if (ballpos.x < 0) ballvel.x *= -1;
if (ballpos.у > 400) ballvel.у *= -1;
if (ballpos.у < 0) ballvel.у *= -1;

(21) // Столкновение с задней стеной,

if (ballpos.z > 140) {
// Меняем направление вдоль
Oz. ballvel.z *= -1;
// Удаляем выбитые шары.
for(var i=bricks.length-1;i>=0;i--) {
if (bricks[i].hitTest(ball._x,ball._y)) {
bricks[i].removeMovieClipt);
bricks.splice(i,1);
score++;}}}

(22) // Столкновение с битой.

if (ballnos.z < 0) {
// Расстояние до центра биты,
рх = ballpos.x-paddle._x;
ру = ballpos.y-paddle._y;
// Столкновение происходит, если расположение от шара
//до центра биты не более 35 пикселов.
if ((Math.abs(px) < 35) and (Math.abs(ру) < 35)) {

(23) // Корректируем скорости по х и по у.

ballvel.x = рх/7; ballvel.y = ру/7;

(24) //Отмечаем столкновение изменением прозрачности биты.

paddle._alpha = 90;
} else {

(25) // Мяч пропущен.

removeBallAndPaddle();
gotoAndStop("game over");
// Меняем направление мяча вдоль Oz.
ballvel.z *= -1;
} else {

(26) // Возвращаем бите прежнюю прозрачность,
paddle._alpha = 50;

(27)// Смотрим, все ли блоки выбиты,

if (bricks.length < 1) {
gameLevel++;
removeBallAndPaddle();
gotoAndStop("level over");
}}
}

Вот еще два полезных фрагмента кода. Первый удаляет шар и биту. Если этого не сделать, они так и будут висеть, как в кадре "game over" так и в кадре "level over".

function rernoveBallAndPaddle (){
paddle.removeMovieClip();
ball.removeMovieClip(); }

Ну а следующая функция, removeBricks, удаляет блоки из этих же кадров. Вызывается при нажатии соответствующих кнопок.

function removeBricks() {
for(var i=0;i bricks[i].removeMovieClip();
}}

Первый кадр ролика - "start" - присваивает переменной gameLevel значение 1 и останавливает ролик.

gameLevel=1;
stop();

Чтобы перейти к следующему кадру, надо нажать кнопку. Вот ее код.

on (press) {
GotoAndStop("Play");
}

Все функции, которые мы рассмотрели, находятся в кадре "Play". Еще там есть команда, вызывающая функцию initGame. Когда уровень пройден, игра переходит к кадру "level over". Так как клип "action" находится в другом кадре, то все шары автоматически останавливаются. При нажатии единственной в этом кадре кнопки все блоки удаляются, и функция initGame может расставить их заново при переходе на следующий уровень.

on (press) {
removeBricks();
gotoAndStop("Play");
}

При нажатии кнопки в кадре "game over" блоки тоже удаляются, но игра переходит к кадру "start".

on (press) {
removeBricks();
gotoAndStop("Start");

К сведению

Игра, в общем то, лишь приблизительно воспроизводит трехмерный мир. Например, когда мяч отлетает в угол, компонент скорости z меняется таким образом, что суммарный вектор скорости остается неизменным Вы можете попробовать спрятать курсор перед началом игры с помощью Mouse.hide (), только не забудьте вернуть его на место по окончании игры с помощью Mouse. show ().

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

Очень простой способ внести дополнение в эту игру - поместить какой-либо рисунок за блоками. Это можно сделать вообще без использования ActionScript. Можно также сделать, чтобы в конце каждого уровня пользователь видел другую картинку.