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



Игра "Йога"

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

Классическая игра "Йога" известна уже тысячи лет. Современные версии сделаны из дешевого пластика. С развитием Web-технологий появился и виртуальный вариант этой игры.
Для игры требуется решетка с отверстиями для колышков (рис. 14.7). Колышки расположены во всех отверстиях, кроме одного. Игрок должен взять один колышек и "перепрыгнуть" через другой, при этом попасть на пустое место. Колышек, через который "перепрыгнули", при этом удаляется. Игра продолжается до тех пор, пока нельзя будет сделать больше ни одного передвижения.

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

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

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

Цель проекта - создать компьютерный вариант игры "Йога" (рис. 14.7). Игрок щелкает мышкой и перемешает колышки. Неверный ход сделать нельзя, а правильный автоматически удаляет элемент, через который "перепрыгнули".

Подход

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

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

Для игры требуется всего два клипа: "peg" и "hole". В клипе "peg" должна быть расположена кнопка, которая сообщает основной временной шкале о щелчке мышью (пользователь нажимает и отпускает ее кнопку). Так как перед началом ролика на рабочем поле нет ни одного клипа, им необходимо назначить свойства связи. Код обращается к ним по именами "peg" и "hole".

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

Почти весь код находится в одном кадре основной временной шкале. Он начинается с создания экземпляров клипов "peg" и "hole" и их размещения на рабочем поле. С помощью оператора if создаются необходимые для игры отверстия. Также код проверяет, во все ли отверстия, кроме одного в центре, вставлены колышки.
В конце функции переменной maxHole присваивается значение, равное количеству всех отверстиях. Эта' переменная будет использоваться в тех функциях, где необходимо выяснить, все ли клипы удовлетворяют определенным условиям.

initGame();
stop();
function initGame() {
// Определяем постоянное расположение клипов.
holeSpace =30;
puzzleLeft = 160;
puzzleTop = 80;
// Просматриваем все отверстия создаем в них колышки.
i = 0;
for(y=0;y<9;y++) {
for (x=0;x<9;x++) {
// Проверяем, должен ли быть создан колышек.
// Если да, создаем его.
if (((у < 3) or (у > 5)) and ((х < 3) or (x > 5) continue;

// Добавляем и размещаем новое отверстие. attachMovie("hole", "hole"+i, i);
_root["hole"+i]._x = x*holeSpace + puzzleLeft;
_root["hole"+i]._y - y*holeSpace + puzzleTop;
II He добавляем колышек в центральное отверстие,
if ((x != 4) or (у != 4)) {
// Добавляем и размещаем
// новое отверстие.
attachMovie("peg","peg"+i,100+i);
_root["peg"+i]._x = x*holaSpace + puzzleLeft;
_root["peg"+i]._y = y*holaSpace + puzzleTop;
}
i++;
}}
// Запоминаем количество колышков.
maxHole = i;
}

Когда игрок щелкает по колышку, на самом деле он щелкает по кнопке, расположенной внутри клипа. Оба действия, "press" и "release", передаются функциям в основной временной шкале. Функция dragPeg вызывается действием "press". Эта функция сохраняет положение колышка в переменных pegх и pegу, а затем разрешает перемешать колышек. Также она использует функцию swapDepths, чтобы колышек отображался поверх всех остальных.

function dragPeg(peg) {
// Запоминаем исходное положение колышка,
pegх = peg._х; pegу = peg._у;
// Размещаем колышек поверх остальных,
peg.swapDepths(2000);
// Разрешаем программе Flash перемещать клип.
startDrag(peg, true);
}

Функция dropDrag вызывается тогда, когда игрок отпускает кнопку мыши при перетаскивании. Сначала клип прекращает перемещение (8). Затем с помощью функции dropDrag выясняется, находится ли какое-нибудь отверстие под курсором (9).
Если курсор мыши расположен над дыркой, следующий шаг - определить, пустое ли отверстие или нет (10). Затем код проверяет отверстия во всех четырех направлениях, чтобы выяснить, из какой дырки мог быть перемешен колышек. Для определения относительного положения отверстия используются переменные dx и dy (11). Например, если игрок перемещает колышек вправо, dx присваивается 1, a dy - 0. Если вверх, то dy будет равняться -1, a dx - 0. Если отверстие, куда игрок перемещает колышек, не расположено через одну дырку вправо, влево, вверх или вниз, значения dx и dy становятся равными 0 (12).
Даже если игрок перемешает колышек через одно отверстие, помещает его в пустое место, ход засчитывается только в том случае, если он "перепрыгивает" через другой колышек. Следующий фрагмент кода проверяет, есть ли такой "серединный" колышек (13). Если да, код его удаляет и указывает, что перемещаемый колышек теперь находится в новом месте. Если одно из этих условий не выполняется, значит, ход неверен. Значение переменной placed остается равным false, оно проверяется в конце функции (14). И колышек возвращается на свое исходное место.

function dropDrag(peg) {

(8) // Клип с колышком больше не перемещается.

stopDrag();
//По умолчанию ход неверен,
placed = false;
overole = false;

(9)// Определяем местоположение отверстия, над которым
// находится курсор,

for(i=0;i hole = _root["hole"+i];
if (hole.hitTest(_xmouse, _ymouse)) {
overeHole = true;
break;
}}

(10)// Выясняем, свободно ли отверстие,

if (IpegThere(hole._x, hole._y)) {

(11)// Определяем различие между исходным и конечным
// положениями,

dx = 0;
dy = 0;
if ((pegx == hole._x) and (pegy-holeSpace*2 == hole._y ) {
// сверху
dy = -1; } else if (pegx==hole._x) and
(pegy+holeSpace*2==hole._y)) {
// внизу
dy = 1;
} else if (pegy==hole._y) and (pegx-holeSpace*2==hole._x)) {
// слева
dx = -1;
} else if (pegy==hole.__y) and (pegx+holeSpace*2==hole._x)) {
// справа
dx = 1;
}

(12)// Значения dx и dy будут равны 0, если целевое отверстие
//не находится на необходимом расстоянии,

if ((dx != 0) or (dy != 0)) {

(13)// Выясняем, есть ли колышек посередине.

midThere = false; for(i=0;i mid = _root["peg"+i];
if ((mid._x == pegx + dx*holeSpace) and y == pegy + dy*holeSpace)) {
// Раз колышек здесь находится,
// значит, ход верный.
// Указываем новое положение колышка.
peg._x = hole._x;
peg._у = hole._y;
// Удаляем колышек посередине.
mid.removeMovieClip();
// Запоминаем, что ход верен.
placed = true;
break;
}}
}}

(14)// Проверяем, верный ли ход был сделан, и если нет,
// восстанавливаем исходное положение колышка,

if (placed) {
peg._x = pegx;
peg._y = pegy;
}}

Функция dropPeg использует полезную функцию pegThere, которой передается расположение отверстия и которая возвращает значение true, если именно в этом месте обнаружен клип "peg".

function pegThere(x.у) {
// Выясняем, находится ли в этом месте колышек,
for (i=0;i peg = _root["peg"+i];
if ((peg._x == x) and (peg._y == y)) {
return true;
}}
return false;
}

Во время игры внизу экрана все время находится кнопка Restart Game (Начать заново), которая позволяет заново начать игру, когда больше нельзя сделать ни одного действия или когда пользователь понимает, что плохо начал игру. Эта кнопка должна не только вызывать функцию initGame, но и очищать оставшиеся клипы "peg" и "hole".

function restartGamef) {
// Удаляем все клипы,
for (i=0;i _root["peg"+i].removeMovieClip();
_root["hole"+i].removeMovieClip();
}
// Начинаем новую игру.
initGame();
}

Код, прикрепленный к кнопке, расположенной внутри клипа "peg» очень прост. Все, что он делает, это передает функциям действия press и release.

on (press) {
_root.dragPeg(this);
}


on (release) {
_root.dropPeg(this);
}

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

Главный способ изменения игры - создание другой доски. Существует множество вариантов, например, колышек можно перемещать не только по вертикали и горизонтали, но и по диагонали. В данном случае нужно переписать код.
Еще одно изменение - создать колышек, который по цвету отличается от других. Таким образом можно усложнить игру: последним нужно оставить именно этот колышек.

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



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