Flash Lite 2 пример создания пазл игры

игра BallToss будет относится к классу puzzle. Смысл ее очень прост. Вам нужно пройти по всем клеткам на уровне и в конце вернуться на точку старта. На клетку можно попасть только один раз. Если вы прошли по всем клеткам — вы выиграли, если что-то упустили — вы проиграли.

Загрузить BallToss.zip

Давайте сразу приступим к разработке. игра будет написана на Flash Professional 8.0 с последующей публикацией в Flash Lite 2.0.

1. Начнем с организации наших слоев. их будет три “Content”, “Actions” и “Labels” как показано на рисунке ниже. Хорошо продуманная организация главной сцены очень помогает при разработке.
2. Когда слои готовы — можно приступать к разработке кода.
3. Код всегда должен быть организован в «блоки» известные также, как функции. Это поможет при отладке.

figure1

Объявление переменных

Первое что нам нужно сделать — объявить переменные. Я начал с создания функции инициализации. Здесь будут находится все переменные, которые я буду использовать во время разработки.

function init(){
tileW = tileH = 16;
map1 = [[0,0,0,……]];
jump = false;
die = false;
end = false;
level = 1;
blockCount = 0;
mx = 0;
my = 0;
ballPos = new Object();
}

Среди всех переменных вы можете заметить многомерный массив. Для начала вы должны разобраться с простым массивом, большой разницы между ними не существует. Например:

map = [10,11,12,13,14];

Массив “map” это простой массив с 5-ю значениями. Первый элемент — map[0] равен 10, второй — map[1] равен 20 и т.д. Массив может хранить числа, строки, объекты, и другие массивы. Когда массив содержит в себе как элемент другой массив, он называется многомерным.

Map1 = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 1, 1, 10, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
[0, 1, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 1, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 1, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];

Здесь массив “map1” — многомерный массив с 8-ю значениями. Первый элемент массива — map1[0] содержит другой массив со значением [0,0,0,0,0,0,0,0,0,0].

В нашем коде использование массива “map1” служит для задания первого уровня игры. В случае, если вам нужно создать больше уровней, вы просто инициализируете новые массивы “map2”, “map3” и т.д.

ballPos = new Object();

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

Построение карты уровня

function buildMap(map){
this.createEmptyMovieClip("container",
this.getNextHighestDepth);
this.container._x = 20;
this.container._y = 60;
var mapW = map[0].length;
var mapH = map.length;
var d = 0;
for(var x=0; x
for(var y=0; y
var val = map[x][y];
this.container.attachMovie("block", "block"+x+""+y, d++);
this.container["block"+x+""+y]._x = y*_root.tileW;
……
}

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

figure2

Функция “buildMap” обходит массив и устанавливает клетки на экране. Если вы посмотрите на код вы заметите что мы начали с создания пустого Movieclip “container” а затем поместили клетки внутри этого клипа. В этот контейнер мы также добавим ball Movieclip.

Держать все элементы игры в клипе-контейнере явлется хорошей практикой при разработке, поскольку если вы захотите изменить позиции ваших объектов, вам не придется делать эти изменения для каждого из них. Достаточно будет подвинуть “container” Movieclip.

Каждая клетке присваиваются точные значения, такие как позиция по x в array(x), позиция y в array(y), имя и тип. Важно чтобы каждая клетка имела свой набор свойств, поскольку если вы захотите обратится к какой-то клетке во время игры эти значения помогут вам сделать это быстрее.

Key Listeners

Key listeners это объекты которые «слушают» или определяют нажатие клавиш. Key listeners могут определить события как клавиши “keyUp” так и “keyDown”.

keyL.onKeyDown = function(){
if(not jump){
mx = 0;
my = 0;
if(Key.getCode() == 40)my = 1;
if(Key.getCode() == 38)my = -1;
if(Key.getCode() == 37)mx = -1;
if(Key.getCode() == 39)mx = 1;
jumpBall();
}
};
Key.addListener(keyL);

Когда срабатывает событие keyDown listener передает ссылку на нажатую кнопку и программа определяет что за кнопка была нажата, используя метод Key.getCode(). Если код клавиши равен 37(левая стрелка), 38(стрелка вверх), 39(правая стрелка) & 40(стрелка вниз), переменным “mx” или “my” присваиваются соответствующие значения и вызывается функция jumpball().

Движение мячика

Если вы посмотрите на функцию “move”, вы заметите, что мы отсылаем две переменные – mx и my. Они предназначены для задания новой позиции мячика, когда соответствующая клавиша будет нажата. Например если нажата левая кнопка переменные будут ипеть вид — mx = -1 и my = 0 а если будет нажата правая кнопка — mx = 1 и my=0 и т.д.

Однако функция “move” будет вызвана только когда мячик будет двигатся и это отражается в функции onEnterframe, которая показана на рисунке ниже.

Когда вы нажимаете любую из направляющих клавиш (вверх, вниз) функция “jump” проверяет тип следующей клетки. Если ее тип равен “0”, что значит ее отсутствие — игра закончится.
Однако если клетка равна “1” – что означает ее присутствие, происходит следующее:
1. Видимая клетка через которую шарик только что прошел станет невидимой, ее тип будет установлен в «0»
2. X и Y свойства будут увеличены или уменьшены на 1, в зависимости от нажатой клавиши.
3. У нас также есть переменная “blockCount” которая хранит номера невидимых клеток. Когда все клетки пройдены успешно и шарик достигает начальной точки — игра заканчивается и пользователь побеждает.

Логика двигающегося мячика.

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

this.container.ball._x += mx;
this.container.ball._y += my;

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

var newX = this.container.ball._x/tileW;
var newY = this.container.ball._y/tileH;

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

var offsetX = Math.floor(newX) - newX;
var offsetY = Math.floor(newY) - newY;

Заключение

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

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

Добавить комментарий