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

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

Хотя цель игры заключается в отображении только 10 вопросов, ни одна строчка кода не ограничивает их число. Можно запросить большее или меньшее количество вопросов из файла Flashquiz.txt.
Вместе с выводом строки пользователю можно показывать некое сообщение. Например, при отображении строчки "8 out of 10" можно подбодрить пользователя следующим образом: "You know your planets!" (Вы знаете планеты!), а при двух не правильных ответах из 10 будет выводиться сообщение "Go back to school" (Снова идите в школу).

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

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

Как и в предыдущей игре, в текстовый файл можно поместить столько вопросов, сколько вы хотите. Если вы знакомы с программированием CGI, вы даже можете написать программу для сервера, которая будет генерировать файл Flashtrivia.txt на основе базы данных вопросов.
Вы также можете изменить начальное количество очков для вопросов, а также число очков, вычитаемых за неправильный ответ.

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

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

В этом примере фраза жестко запрограммирована в функции initGame. Однако можно загружать текст из внешних источников (как это сделать. вы узнали из предыдущих разделов этой главы), так будет проще изменять фразу. Вы даже можете использовать список фраз, которые будут отображаться одна за другой или в случайном порядке.
Если вы хотите включить в игру знаки пунктуации, следует изменить код, чтобы в начале игры кроме пробелов программа автоматически отображала и эти знаки. С помощью функции isAlpha можно проверить, является ли символ буквой, и если нет, то сразу его показать.

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

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

По мере того, как игрок движется вдоль фразы с помощью клавиш со стрелками, курсор иногда оказывается над пробелом или другим неактивным знаком. Вы можете расширить код, чтобы следить за движением курсора и, когда он находится на пустым пространством, заставить его продолжать движение вперед или назад, пока он не коснется буквы.
Хотя исходный ролик содержит фразу, встроенную в код, вы можете считывать ее с помощью команд LoadVariables или LoadVars. Это дает вам возможность изменять фразу без перекомпилирования swf-файла.

Игра "Виселица"

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

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

Игра "Виселица" проиграна

Рисунок 12.5 Игра "Виселица" проиграна

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

К сведению

К сведению

Вам понадобятся два звука, один с именем "right", а другой - "wrong". Также потребуется кнопка "continue", похожая на изображенную на Рисунок 12.3. Если у вас есть вопросы по работе программы, просмотрите ролик Flashquiz.fla.

К сведению

К сведению

Внимательно просмотрите каждый элемент ролика Flashtrivia.fla. В нем находятся текстовые поля: для вопроса, четырех ответов, количества возможных очков и счета. Каждая кнопка представляет собой копию одного и того же клипа, вверху нее расположен статический символ. Эти символы лишь напоминают пользователю, что он может нажать соответствующую клавишу на клавиатуре вместо того, чтобы щелкнуть по самой кнопке.

К сведению

К сведению

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

К сведению

К сведению

Исходный ролик содержит кадр "game over". Это к нему возвращается ролик, когда головоломка решена. Вы также можете использовать removeListener, если хотите заставить ролик перестать отвечать на нажатие клавиш.

Кадр "start game" виден пока пользователь

Рисунок 12.3 Кадр "start game" виден, пока пользователь не щелкнет по кнопке начала игры

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

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

Сценарий начинается с создания нового объекта LoadVars. Этот объект с помощью своих свойств позволяет решать набор специфических задач,связанных с загрузкой переменных. Вы можете получать информацию о том, что данные были отправлены на сервер или загружены с сервера.
Поскольку вам нужен ответ от сервера, то изначально необязательно устанавливать какие-либо свойства объекта LoadVars. Подробнее мы рассмотрим эти приемы в главе 17 "Сложные приемы". Метод load объекта LoadVars обращается к серверу и загружает данные.

Метод load объекта LoadVars осуществляет загрузку, обращаясь к указанному URL. Файл данных должен иметь вид "имя переменной = данные". Например, в результате обращения к текстовому файлу myVariable=Hello переменной myvariable будет присвоено значение Hello. Поскольку обращение происходит к удаленному серверу, может пройти некоторое время между вызовом команды load и загрузкой данных.

Итак, в начале сценария создается новый объект loadQuestions. С помощью метода load он обращается к файлу Flashquiz.txt.
Свойство onLoad объекта LoadVars определяет функцию, которая вызывается, когда загрузка завершена. В этом случае будет вызвана функция initQuestions.
После выполнения команды LoadVars. load данные из текстового файла будут доступны к использованию ActionScript. Например, если переменной myProperty присвоено значение myValue, то обращение loadQuestionsmyProperty. вернет значение myValue.

stop();
// Загружаем вопросы.
loadQuestions = new LoadVars();
loadQuestions.load("flashquiz.txt");
// Вызываем initQuestions, когда загрузка окончена.
loadQuestions.onLoad = initQuestions;

Функция initQuestions преобразовывает текстовую строку в массив, состоящий из вопросов, ответов и номера правильного ответа для каждого вопроса.
Вот как выглядит первая часть файла Flashquiz.txt. Первая строчка присваивает свойству topic текст "The Planets". С помощью обращения loadQuestions.topic сценарий получит доступ к этому значению и присвоит его переменной topic. Результат отобразится в динамическом текстовом поле.

topic=The Planet&questions=Which planet is closest to the Sun?:
Jupiter;Saturn;Mercury,-Mars:2:

Обратите внимание, в текстовом файле переменные необходимо разделять знаком "&". Переменная questions состоит из нескольких строчек; в каждой содержится отдельный вопрос. Каждый вопрос состоит из трех частей: текст вопроса, ответы и номер правильного ответа. Части отделяются друг от друга двоеточием, а в качестве разделителя ответов мы используем точку с запятой.

Which planet is titled on its axis the most?:
Earth;Venus;Mars;Uranus:3:
Which planet is the largest?:Jupiter;Earth;Neptune;Pluto:0:
Which planet has exactly two moons?:Venus;Mars,-Saturn;Uranus:1:

тема=планеты&вопросы=Какая планета ближайшая к солнцу?:
Юпитер;Сатурн;Меркурий;Марс:2:
У какой планеты ось имеет наибольший наклон?:
3емля;Венера;арс; Уран :3 :
Какая планета самая большая?:Юпитер;3емля;Нептун;Плутон:0:
Какая планета имеет две луны?:Венера;Марс;Сатурн,-Уран:1:

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

Не вставьте ненароком пустую строчку в конец текстового файла. Такая строчка будет создана, если нажать клавишу Enter или Return после ввода последнего вопроса. Если в конец текстового файла добавить пустую строчку, код воспримет ее как одиннадцатый элемент.

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

function initQuestions(questions) {
// Задаем значение переменной topic,
topic = loadQuestions.topic;
// Разбиваем на отдельные вопросы.
// Внимание: в некоторых случаях лучше использовать
// значение 13, а не 10.
qArray = loadQuestions.questions.split(String.fromCharCode(10));
// Разбиваем строчку вопроса на элементы,
for(i=0;i qArray[i] = qArray[i].split(":");
// Отделяем ответы друг от друга.
qArray[i][1] = qArray[i][1].split(";");}
// Начинаем игру. _root.gotoAndPlay("start game");
}

Я использовал выражение String. fromCharCode (13), чтобы получить символ возврата каретки, что нужно для отделения строк в текстовом файле. Почему я не применил константу newline? Дело в том, что newline в программе Flash отличается для систем Macintosh и Windows. В Macintosh возвращается значение 13, а в Windows - 10. Более того, некоторые текстовые редакторы предпочитают значение 10, а некоторые оба! Так что, если игра не движется далее первого вопроса, попробуйте поменять 10 на 13, чтобы проверить, не в этом ли проблема.

Когда игра переходит к кадру "play", код ActionScript в основной временной шкале сразу же вызывает функцию initGame, которая обнуляет переменные questionNum и numRight и вызывает функцию displayQuestion, отображающую первый вопрос.

Функция split берет строчку и разбивает ее на фрагменты, которые помешаются в массив. Единственный параметр, который используется в этой функции, - это символ, необходимый для разделения фрагментов. В предыдущем примере как двоеточие, так и точка с запятой применялись для разбиения строчки и помещения элементов в массив.

function initGameO {
// Устанавливаем значения переменных.
questionName = 0;
numRight = 0;
// Выводим первый вопрос.
displayQuestion();
}

Функция displayQuestion определяет, закончена ли игра или нет, и в случае положительного ответа отображает окончательное количество набранных очков и переходит к кадру "game over". В противном случае она берет вопрос и каждый ответ и помешает их в текстовые поля внутри соответствующих клипов. Номер правильного ответа присваивается переменной correctAnswer.

Когда у вас массив содержится в другом массиве (двумерный массив), к элементу вложенного массива можно обратиться с помощью нескольких скобок. Например, выражение myArray[3] [8] обращается в восьмому значению третьего элемента массива myArray. Массив ту Array СОСТОИТ ИЗ четырех или более элементов, в третьем элементе содержится, в свою очередь, массив по меньшей мере из девяти элементов.

Функция animatein позволяет создать эффект появляющегося из-за экрана текста. Она устанавливает положение каждого текстового клипа за рабочим полем справа. Затем для каждого из этих клипов с помощью переменной xstop присваивается нужное горизонтальное положение. Код, прикрепленный к каждому из этих клипов, перемешает его влево до тех пор, пока он не дойдет до положения xstop.

function animatein() {
// Определяем положение каждого элемента текста,
//а также указываем место, где клип должен остановиться.
question.xstop = 300;
question._x = 800;
answerO.xstop = 400;
answer0._x = 1000;
answerl.xstop = 400;
answerl._x = 1200;
answer2.xstop = 400;
answer2._x = 1400;
answer3.xstop = 400;
answer3._x = 1600;
}

Когда пользователь щелкает по одной из четырех кнопок, вызывается функция selectAnswer, которой передается номер выбранного ответа (от 0 до 3). Если эта величина равна correctAnswer, звучит сигнал правильного ответа и увеличивается значение numRight. В противном случае воспроизводится сигнал неверного ответа. В любом случае увеличивается значение переменной guestionNum и отображается следующий вопрос.

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

function triggerSoundfsoundName) {
// Проигрываем звук,
soundfx.stop();
soundfx = new Sound();
soundfx.attachSoundfsoundName);
soundfx.start();
}

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

onClipEvent(enterFrame) { if (_x != xstop) _x -= 20;
}

К каждой кнопке также прикреплен короткий сценарий, который при щелчке по ней вызывает функцию selectAnswer и передает ей значение от 0 до 3. Сценарий следующий:

on (release) {
selectAnswer(0); }

Для других кнопок вместо 0 будет указано либо 1, либо 2, либо 3.

Криптограмма

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

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

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

Подготовка ролика На экране только

Оба текстовых поля используют шрифт Courier New, поэтому все буквы занимают одинаковое место, как в игре "Виселица".

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

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

В этом ролике четыре кадра. Первый загружает вопросы и ответы и помещает их в массив. Второй кадр содержит информацию о правилах игры.
В третьем кадре начинается само действие, отображается вопрос, четыре ответа, кнопка рядом с каждым ответом, количество возможных очков и счет, оба последних текстовых поля - динамические, первое связано с переменной potentialPoints, а второе - с переменной score.
Помните, что на самом деле четыре ответа - это клипы, в которых находятся текстовые поля, отображающие содержимое переменной text. Однако имена четырех клипов отличаются цифрой: от "answer0" до "answer3".
И последний кадр игры - "game over". В нем показывается окончательный счет, и пользователь может щелкнуть по кнопке, чтобы сыграть заново.

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

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

Основной элемент - текстовое поле на экране. Сначала в нем находятся только пробелы и знаки подчеркивания, которые постепенно меняются на буквы, угадываемые игроком.
Текстовое поле должно быть динамическим и связано с переменной display. В панели Properties необходимо также выставить свойство Miltiline для текстового поля.
Текст отображается моноширинным шрифтом Monaco, который имеется в стандартной поставке системы Macintosh. Если вы создаете ролик в Windows, возможно, вам придется использовать другой моноширинный шрифт, например Courier New.

Для этой игры необходим моноширинный шрифт, чтобы независимо от того, сколько букв угадано, слова имели одинаковую длину. Если бы у букв была разная ширина, то при добавлении новых символов, которые больше или меньше знака подчеркивания, программе Flash пришлось бы заново перерисовывать текст.

Игре также необходим клип "actions", который реагирует на нажатие клавиш и передает информацию о нажатой клавише сценарию основной временной шкалы.

Подход

Подход

Как и в предыдущем ролике, вопросы и ответы будут загружены из внешнего текстового файла. Однако текстовый файл будет немного отличаться. В предыдущей игре ответы были представлены в определенном порядке, и дополнительный элемент указывал, какой ответ верный. Сейчас же правильный ответ всегда будет располагаться первым, а далее будут следовать три неправильных ответа. Такое допустимо, так как ответы все равно будут перемешаны. Вот несколько строк из текстового файла flashtrivia.txt:

questions=The world's first computer bug was actually a real bug
stuck in an early computer. What type of bug was it?:
Moth;Beetle,-Fly;Worm:
Which is the world's largest Island?:
Greenland;Iceland;Australia;New Zealand:
Besides humans, what other animal also has individual
fingerprints?:Koala Bears;Apes;Snakes;Frogs:

Вопросы=Какого типа был первый компьютерный вирус?
:Моль;Жук;Муха;Червь:
Как назывется самый большой остров в мире?
:Гренландия;Исландия;Австралия;Новая Зеландия:
Кроме людей, какие еще животные имеют уникальные отпечатки
пальцев?:Коалы;Обезьяны;Змеи;Лягушки.

Так же, как и при работе над предыдущим проектом, будьте внимательны: не вставьте нечаянно пустую строчку в конце текстового файла. Она появится, если вы нажмете клавишу Return или Enter после ввода последнего вопроса. Если в конце текстового файла будет вставлена пустая строка, она будет рассматриваться как одиннадцатый вопрос.

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

Подход

Подход

В игре производится множество действий с символами. Фраза, которую нужно угадать, представляет собой строку символов. Из нее вы создаете строку, в которой вместо букв находятся знаки подчеркивания. Это как раз то, что увидит пользователь.
Когда игрок угадывает букву, она сравнивается с каждой буквой исходной фразы. Если буква совпадает с какой-либо буквой фразы, она отображается на экране на своем месте (или местах).
Если игрок не угадывает, клип с лисой переходит к следующему кадру, в котором добавляется новый фрагмент изображения лисы. Если это последний кадр клипа с лисой, игра заканчивается.

Подход

Подход

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

ОПФКТИЭШСЕЙГРМЛАБНЗДЯВЩЧЦЖХЪЮЬЁЫУ.

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

АБВГЛЕЁЖЗИЙКЛМНОПРСТУФХЦЧШШЪЫЬЭЮЯ.

Когда игрок расшифровывает одну из букв, его карта букв изменяется. Например, он решает, что Г соответствует К, тогда карта играющего примет такой вид:

АБВКДЕЙЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ.

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

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

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

Первый фрагмент кода находится в первом кадре главной временной шкалы. По существу это тот же самый код, который применялся в предыдущей игре для загрузки вопросов из текстового файла. Когда вопросы загружены, вызывается функция initQuestions, расположенная в основной временной шкале:

stop () ;
// Загружаем список вопросов.
loadQuestions = new LoadVars();
loadQuestions.load("flashtrivia.txt") ;
loadQuestions.onLoad = initQuestions;

Функция initQuestions разбивает строчку на две части, первая часть- вопрос, вторая - ответы. Затем она отделяет ответы друг от друга.Вся информация хранится в массиве qArray.

function initQuestions(quesions) {
// Выделяем вопросы,
qarray = questions.split(String.fromCharCode(13));
// Отделяем вопрос от ответов,
for (i=0;i qArray[i] = qArray[i].split(":");
// Отделяем ответы друг от друга.
qArray[i][1] = qArray[i][1].split(";");
}}

Наибольшая часть кода находится в кадре "play", то есть в том кадре, где задаются вопросы, и пользователь должен на них ответить. Сначала функция initGame обнуляет счет и выводит первый вопрос.

function initGame() {
// Определяем переменные.
questionNum = 0;
score = 0;
// Выводим первый вопрос.
displayQuestion();
}

Функция displayQuestion берет следующий вопрос и помещает вопрос и ответы в соответствующие текстовые поля. Она также устанавливает количество возможных очков за правильный ответ на данный вопрос равным 1000.

При каждом обращении к кадру "play" клипом "actions" вызывается функция scoreCount. Она вычитает единицу из максимального возможного числа очков, проверяя, чтобы это значение не оказалось менее 0.

//В каждом кадре из максимального возможного числа очков
// вычитаем единицу, function scoreCount() { // Проверяем, на месте ли последний ответ,
if (answers3._x == 400) {
// Вычитаем единицу.
potenrialPoints -= 1;
if (potentialPoints < 0) potentialPoints = 0;
}
}

Функция shuffleArray используется методом displayQuestion, чтобы случайным образом перемешать ответы. Сначала создается новый массив, а затем поэлементно из старого массива добавляются значения в новый массив.

// Берем массив array1 и перемешиваем его элементы
// для массива аггау2.
function shuffleArray(arrayl) {
// Создаем новый, пустой массив.
array2 = new Array();
// Просматриваем массив с помощью цикла,
do {
// Выбираем случайную величину.
г = int(Math.random()*array1.length) ;
// Добавляем элемент в новый массив.
array2.push(array1[r]);
// Удаляем элемент из старого массива,
arrayl.splice(г, 1);
} while (array1.length > 0);
// Возвращаем новый массив,
return(array2);
}
}

Функция animateIn определяет положение четырех ответов с правой стороны рабочего поля. Она указывает, что каждый из этих четырех клипов должен остановиться при перемещении влево, когда достигнет нужного горизонтального положения (400 пикселов от правой границы игрового поля). Сценарий, прикрепленный к каждому клипу, перемещает клип влево до тех пор, пока не будет выполнено вышеуказанное условие.

function animateln() { // Определяем положение каждого ответа
//и указываем место, где каждый клип должен остановиться.
answerO.xstop = 400;
answer0._x = 800;
answer1.xstop = 400;
answer1._x = 1000;
answer2.xstop = 400;
answer2._x = 1200;
answer3.xstop = 400;
answer3._x = 1400;
}

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

Функция triggerSound работает точно так же, как и в предыдущей игре. Она просто воспроизводит короткий звуковой сигнал.

function triggerSound(soundName) {
// Воспроизводим звук,
soundfx.stop();
soundfx = new Sound();
soundfx.attachSoundtsoundName();
soundfx.start();
}

Другие фрагменты кода кадра "play" включают небольшую часть для клипа "actions", который вызывает метод scoreCount.

onClipEvent(enterFrame) {
root.scoreCount() ;
}

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

onClipEvent(enterFrame) {
if (_x != xstop) _x -= 40;
}

В каждой из четырех кнопок содержится сценарий, инициирующий при ее нажатии функцию selectAnswer. Кнопки реагируют не только на щелчок мыши, для каждой кнопки определена клавиша на клавиатуре. Например, первая кнопка, которую вы видите, помечена "А" (Рисунок 12.4), она реагирует на нажатие клавиши "А".

on (release, keyPress "A") {
selectAnswer(0);
}

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

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

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

Функция charAt возвращает символ, расположенный на определенном месте в строке. Как во многих функциях языка ActionScript, первый символ располагается в позиции 0.

Каждый раз, когда пользователь нажимает клавишу, клип "actions" передает код символа в функцию makeGuess. Первое, что делает эта функция, - преобразовывает код в букву.
Переменная letter проверяется функцией isAlpha на соответствие какой-либо букве, то есть такие клавиши, как пробел иди клавиша с цифрой или другие, просто игнорируются. Более подробно мы рассмотрим функцию isAlpha позднее.
Затем функция makeGuess просматривает каждую букву, чтобы выяснить, совпадает ли она с выбранным символом, во время этого процесса заново формируется переменная display. Каждое найденное совпадение помешается в данную переменную, в которой уже содержатся те буквы, которые совпали ранее.

Функция fromCharCode получает число, например 65, и преобразует его в символ, такой как "А". У всех символов есть соответствующий код. Числа от 65 до 90 относятся к заглавным буквам. Числа от 97 до 122 - к прописным (имеется в виду английский алфавит); 32 обозначает пробел. Полный список символов и их кодов можно найти в документации по Flash.

Изначально переменной gotOne присваивается значение false. Если найдено хотя бы одно совпадение, оно изменяется на true. Если в конце цикла значение переменной все еще равно false, значит, игрок не угадал букву, и клип с изображением лисы переходит к следующему кадру.

Функция toUpperCase() берет любую строчку и преобразует все прописные буквы в заглавные. Эта функция очень полезна в таких ситуациях, когда вы хотите найти совпадающие буквы независимо от их регистра (работает она только для строк, содержащих буквы аиглийского алфавита).

Функция isAlpha берет строчку и проверяет, является ли первый символ буквой или нет.
С помощью функции charCodeAt она получает код первой буквы. Так код для прописных букв на 32 больше, чем для заглавных, для любого кода, который больше 90, мы вычтем 32, чтобы проверять сразу же и прописные, и заглавные буквы.

Функция charCodeAt возвращает код любого символа строки. Единственный аргумент, который ей передается, - это местоположение символа То есть для первого символа следует записать charCodeAt (0).

// Запускаем утилиту для проверки,
// расположен ли символ в пределах от А до Z.
function isAlpha(letter) {
// Определяем код символа.
n = letter.charCodeAt(0) ;
// Преобразуем прописную буквы в заглавную.
if (n > 90) n -= 32;
// Проверяем, расположен ли символ в пределах от А до Z.
return ((n >= 65) and (n}

Другой необходимый здесь фрагмент кода расположен в клипе "actions". Он воспринимает любое нажатие клавиши и передает его функции makeGuess

Функция Key.getAscii() возвращает код нажатой клавиши, Она может использоваться внутри функции onClipEvent (keyUp), примененной к клипу.

onClipEvent (keyUp) {
_root.makeGuess(Key.getAscii()));
}

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

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

Необычность этого ролика в том, что весь код помешается в сценарии одного кадра. Весь целиком. Нет ни единой кнопки или клипа. Библиотека этого ролика совершенно пуста.
Сценарий кадра начинается с вызова функции initGame. Она задает фразу и создает карту букв. Карта букв игрока вся состоит из звездочек, обозначающих каждую букву. Результатом должны стать звездочки вместо каждой буквы в расшифрованном текстовом поле. Карта расшифровки, названная letterMap, задается вызовом функции createLetterMap. Вы также можете видеть еще не написанные функции showPhase и showCursor. Первая обновляет текстовое поле на экране, используя последнюю версию карт букв. Вторая выделяет только что выбранную букву полужирным шрифтом. Переменная charpos представляет, какая буква выбрана.

Листенеры - это новое добавление версии Flash MX. Листенер сообщает Flash, что событие произошло, и пора включать набор команд или функцию. Код может создать листенер, определив сначала стандартный объект. Событие, за которым должен следить листенер, в данном случае onKeyUp, задано так, что связано с функцией. Потом команда addListener присоединяет этот объект к объекту Flash, в данном случае объекту Key. Только определенные Flash объекты могут иметь листенеры, и эти листенеры могут быть использованы только для определенных событий, связанных с этими объектами. Например, листенер Key может следить только за событиями onKeyUp и onKeyDown.

В конце функции initGame создается листенер (прослушиватель) клавиатуры, который удостоверяется, что функция getLetter вызывается всякий раз, как игрок нажал клавишу.

initGame() ;
stop() ;
function initGame () {
// Используемая фраза.
phrase = "Imagination is more important than knowledge.Albert Einstein";
// Определяем переменные. createLetterMap();
userMap = "***************";
charpos = 0;
// Показываем курсор и фразу.
showPhrase();
showCursor(};
// Отслеживаем нажатие клавиши.
keyListener = new Object ();
keyListener.onKeyUp = getLetter;
Key.addListener(keyListener);
}

Чтобы создать случайную карту букв, нужно просто перебрать все буквы и приписать новую, случайную букву к каждой букве алфавита. Однако это не так просто. Вам нужно быть уверенным не только в том, что вы взяли какую-нибудь букву, но также и в том, что раньше вы ее не брали. Например, вы не хотите приписать Р как к А, так и к Б.
Следующая сложность появляется, когда вы осознаете, что не хотели бы обозначить букву как саму себя. Таким образом, например, если Г обозначает Г, вы должны выкинуть эту карту и сделать новую.
Функция createLetterMap отрабатывает цикл, пока не найдет пригодную карту букв. Обычно это происходит с первой или со второй попытки.

// Создаем случайную строку,
function createLetterMap() {
do {
// Повторяем, пока не будет найдена корректная карта.
letterMap ="";
for (var i=0;i do {
// Повторяем пока не выбрана буква
r = Math.floor(Math.random()*26);
//Случайное число,
с = String.fromCharCode(r+65);
//Конвертируем в букву.
} while (letterMap.indexOf(с) > -1);
letterMap += с;
// Проверяем верность карты,
bad = false; forfvar i=0;i if (letterMap.charCodeAt(i) == i+65) {
bad = true;
// Буква в разрешенной позиции.
break;}
} } while (bad);
}

Функция showPhrase просматривает фразу. Она прогоняет каждую букву через letterMap, чтобы получить зашифрованное значение. Затем она прогоняет каждую зашифрованную букву через userMap, чтобы придать текущее, определенное пользователем, значение. Если знак является не буквой, а пробелом или знаком препинания, он показывается без зашифровки.

Когда пользователь нажимает клавишу, листенер объекта Key вызывает функцию getLetter. Нажатая клавиша помещается в две переменные ascii для ASCII-кода и code для кода клавиатуры. Значения ascii используются для идентификации букв, а значения code - для идентификации клавишей со стрелками.
Если клавиши со стрелками нажаты, происходит обновление переменной charpos. В конце этой функции вызывается функция showCursor, и правильная буква выделяется полужирным шрифтом.
Если нажата буква, происходит обновление userMap, чтобы показать, что пользователь хочет поставить нажатую клавишу в соответствие с текущей закодированной буквой. Текстовое поле обновляется с помощью showPhrase. После этого расшифрованная фраза сравнивается с исходной, чтобы выяснить, насколько она ей соответствует.

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

// Заменяем букву в строке.
function replaceChar(mainString, num, newchar) {
newString = mainString.substring(0,num)+ newchar +mainString.substring(num+1,mainString.length) ;
return(newString);
}

Чтобы показать пользователю, к какой букве относится переменная charpos, эта буква выделяется полужирным и в зашифрованном, и в расшифрованном поле. Сделать это можно с помощью объекта типа TextFormat:, появившегося в версии Flash MX. Объекты TextFormat имеют множество свойств. Когда вы применяете формат текста к текстовому полю, в поле меняются только те свойства, которые были специаль заданы в объекте.
Объект plainFormat типа TextFormat обозначает только то, что полужирное выделение ошибочно. Таким образом, если он применен к текстовым полям decryptedText и encryptedText все полужирные буквы заменяются на обычные. Объект cursorFormat имеет противоположное действие. Все буквы, к которым он применен, становятся полужирными. Код устанавливает формат текста только одной буквы в поле, которая соответствует charpos.

function showCursorf) {
// Оба поля устанавливаем невыделенным шрифтом.
plainFormat = new TextFormat();
plainFormat.bold = false;
decryptedText.setTextFormat(plainFormat);
encryptedText.setTextFormat(plainFormat);
// Одну букву выделяем полужирным.
cursorFormat = new TextFormat();
cursorFormat.bold = true;
decryptedText.setTextFormat(charpos,cursorFormat);
encryptedText.setTextFormat(charpos,cursorFormat);

В этой игре при начислении очков

Рисунок 12.4 В этой игре при начислении очков принимается во внимание быстрота ответа

В криптограмме нижние буквы это

Рисунок 12.6 В криптограмме нижние буквы - это зашифрованное послание, а верхние буквы меняются в зависимости от выбора игрока. Последняя буква в первой строке выделена полужирным шрифтом, поскольку это буква, которая только что выбрана

В основном кадре игры показан

Рисунок 12.1 В основном кадре игры показан вопрос и четыре варианта ответа

Викторина с учетом времени

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

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

Викторина во Flash

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

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

На экране отображается кадр

Рисунок 12. 2 На экране отображается кадр "loading" до тех пор, пока не будут загружены все вопросы

Каждое из пяти основных текстовых полей помечено в клипе словом "text". Один клип называется "question", остальным присвоены имена от "answer0" до "answer3". Так сделано для того, чтобы не создавать простые текстовые поля и иметь возможность перемешать клипы на рабочем поле (об этом эффекте будет рассказано далее).

Потенциально каждый вопрос стоит 1000

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

в среде Flash. Игрок может

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

Цель проекта - воссоздать классическую игру "Виселица" в среде Flash. Игрок может с помощью клавиатуры угадывать буквы. Программа показывает буквы и рисует повешенного человека или, как в рассматриваемом примере, лису.

и бумаги. Компьютер сильно облегчает

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

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

Цель игры совпадений удалить все

Рисунок 13.4 Цель игры совпадений - удалить все карты, чтобы стала видна фоновая картинка

Центр этого элемента определяется

Рисунок 13.2 Центр этого элемента определяется по отношению к центру всей картинки

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

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

Эта игра - самая простая из программ составных картинок-загадок, Вы без труда можете ее усовершенствовать. Например, можно зaпoминать исходное положение элемента при перетаскивании, а затем возвращать его на место, если игрок неправильно поместил его.
Еще один способ сделать игру интереснее - написать функцию, которая будет проверять, все ли элементы уже находятся на своем месте и если да, будет осуществлять переход к кадру с поздравлением с победой. Можно усложнить игру, создав более 24 кусочков, тем самым получив больше мелких элементов.
Если хотите, позвольте игроку поворачивать каждый элемент на 90°, 180° или 270°. Для этого пользователь мог бы нажимать клавишу Пробел. Элемент будет фиксироваться в своем положении только в том случае, если он правильно повернут.
Конечно, есть более сложные варианты, например, картинки-загадки, у которых нет очерченного контура. Игрок может соединить два или более элементов в любом месте экрана, а затем прикрепить их к целой картине. Однако для такой игры потребуется написать большой сценарий. Вместо этого давайте перейдем к другому виду составления картинок.

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

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

Игра будет интереснее, если программа будет определять, когда картинка полностью собрана, и на экране будет появляться кадр с поздравлением. Это можно сделать, сохранив исходное положение элементов в массиве и выясняя после каждого шага, в нужном ли месте оказался элемент. Когда все позиции совпадут, картинка собрана.

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

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

Самый простой способ изменить эту игру - добавить фоновый рисунок, который будет отображаться за картами. Картинки на картах могут соответствовать теме фоновой картинки. Вы можете выбрать практически любую тему. Также в первый кадр клипа "Cards" нетрудно добавить картинку для рубашки карты.
Хотя в примере 36 карт, ничто не мешает вам уменьшить или увеличить это число. Просто не забудьте откорректировать размер сетки, а также длину массива в начале игры. Если число карт не будет вписываться в квадратную сетку, вам понадобится изменить код или написать новый, чтобы определить расположение карт.
Еще одна возможность - использовать четыре однотипные карты, а не две. Так будет гораздо проще найти совпадения.
Если вы хотите, чтобы игра определяла, когда найдены все совпадения, добавьте счетчик, который будет увеличиваться при каждом совпадении. Когда счетчик станет равен 18, игра закончится. Затем можно перейти к кадру "you win".

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

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

Вам должно быть легко добавлять картинки в эту игру. Вы можете иметь их столько, сколько хотите. Только помните, что надо установить код, узнающий последнюю картинку в обработчике onMouseDown.
Вы также можете сделать клип "button" больше, чем 36x36. Помните только, что тогда вам придется переделать функцию setUpRound так, чтобы она помещала кнопку дальше, чем на 18 пикселов от каждого края.
Вместо растрового изображения вы можете использовать векторный рисунок. Это сделает игру более простой и доступной для маленьких детей. Сделав соответствующее оформление и добавив анимационное вступление, можно создать хорошую игру даже для самых маленьких детей, которые еще не умеют читать.

Игра совпадений

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

Следующая программа, наверное, является самой популярной Web-игрой. Существуют ее варианты, созданные с помощью Shockwave, Flash, Java, JavaScript и даже простого HTML с применением CGI. Такую игру просто создать, в нее быстро привыкаешь играть и ее легко можно приспособить для любого сайта или ситуации.
Игра совпадений (или игра памяти, как ее иногда называют) использует сетку с картами, расположенными рубашками вверх. Существует две карты каждого типа. Игрок может одновременно открыть две карты. Если они совпадают, карты удаляются. В противном случае обе карты снова переворачиваются рубашками вверх. Игрок пытается запомнить, где какая карта расположена, чтобы было проще отыскать совпадения.
На Рисунок 13.4 показан фрагмент этой игры (файл Matching.fla): в ней 36 карт, из которых четыре уже удалены и две только что открыты. Эти две карты не совпадают, следовательно, они снова будут перевернуты, как только игрок выберет следующую карту.

К сведению

К сведению

В рассмотренном варианте игры элементы мозаики расположены друг от друга на расстоянии 54 пиксела, а игровое пространство представлено сеткой 4x4. Если вы хотите изменить один из этих параметров, необходимо тщательно проверить код и внести необходимые изменения.

К сведению

К сведению

Не забудьте вставить команду stop () в первый кадр клипа "Cards". В противном случае во всех картах будут отображаться все картинки.

К сведению

К сведению

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

Найди картинку

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

Эта игра необычная, ее можно найти скорее в книге пазлов, чем на компьютере. Создание Flash-версии этой игры помогает показать несколько полезных приемов.
В игре "Найди картинку" игрок ищет не целую картинку, а ее сегмент. Целиком картинка показана; справа, а слева показана ее увеличенная часть. Задача состоит в том, чтобы быстро найти место увеличенного сегмента на целой картинке.
Игра показана на Рисунок 13.6. Сегмент слева выбран случайно и увеличен в три раза. Игрок должен щелкнуть по соответствующему месту большой картинки. В зависимости от того, насколько быстро он нашел правильное место, начисляются дополнительные очки.

Рисунок 13.6 В этой игре ваша задача найти место маленького изображения слева на большом изображении справа

Пазл

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

Игра "Пазл" состоит из элементов одного размера, которые, соединяясь, образуют целостное изображение. Обычно они сделаны из картона и для составления картинки требуется большая площадь, например, обеденный стол. Так как экран монитора слишком мал по сравнению со столом, создать компьютерный аналог такой игры очень сложно.
Однако в упрошенном варианте подобная игра вполне применима для Web-сайта в качестве развлекательного материала. На Рисунок 13.1 показан кадр ролика Jigsawpuzzle.fla. На игровом поле имеются 24 элемента картинки и пустая сетка, куда эти элементы должны быть помещены.

Пазл почти собран Задача проекта

Рисунок 13.1 Пазл почти собран

Пятнашки

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

В отличие от пазла игра "Пятнашки" куда интереснее в качестве компьютерной игры, чем в виде обычной игры. "Пятнашки" обычно состоят из 15 квадратных элементов, которые перемешаются вдоль сетки, рассчитанной на 16 элементов. Пустое место - дополнительная область, куда может быть перемещен элемент мозаики.
На Рисунок 13.3 показана мозаика с изображением лисы. Попробуйте сыграть в эту игру, открыв файл Slidingpuzzle.fla. Вы можете щелкнуть по любому из четырех элементов, смежных с пустым квадратиком, чтобы переместить его. Цель игры - правильно собрать картинку, оставив пустым место в нижнем правом углу.

Подготовка ролика Так как же я

Я начал с изображения, которое представляло собой набор линий и областей на одном слое, после чего преобразовал все линии в области, так чтобы в изображении остались только сплошные области.
Затем я создал кадр для мозаики (см. Рисунок 13.1). Я нарисовал только небольшую часть сетки вдоль направляющих Flash, затем скопировал и вставил этот кусочек несколько раз, так что получилось очертание картинки (как в пазле).
Затем каждую область сетки залил красным цветом и выделил все залитые области, кроме той, которая предназначена для элемента мозаики в верхнем правом углу. Скопировал выделение и вставил его в верхнюю часть моей картинки. Потом выделил и удалил всю красную область, таким образом, на рабочем поле остался только один элемент.
Так как мои действия уничтожили созданное ранее, я сохранил копии очертания и картинки в других слоях. Теперь я могу повторить эти действия для создания следующей картинки. Для 24 элементов пришлось проделать это 24 раза.
Когда все было сделано и получилось 24 клипа, понадобилась сетка для повторного выравнивания элементов, так чтобы их центр располагался в нужном месте. Для завершения мне понадобилось 20 минут. Однако, возможно, вы сделаете то же самое гораздо быстрее. ,
После того как у меня получились все элементы, я поместил экземпляр каждого клипа на рабочее поле и присвоил экземпляру клипа имя, соответствующее имени самого клипа. 24 элемента называются от "0-0" до "5-3" в зависимости от вертикального и горизонтального положения элемента. Однако я разместил элементы вокруг границы рабочего поля в произвольном порядке. Также каждому клипу присвоил значение _apha=75. Затем я поместил клип контура картинки в центр и назвал его "outline".

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

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

Можно воспользоваться любым понравившимся вам методом создания элементов. Чтобы получить 15 элементов, я выделял квадраты на графическом изображении. В отличие от элементов составной картинки-загадки здесь не нужно размешать их определенным образом. Центром каждого элемента мозаики может бьпъ его собственный геометрический центр. То есть для этой игры создать элементы гораздо проще.
После того как вы создали все элементы, поместите их на рабочее поле так, как они должны располагаться в собранной мозаике. Я сделал кусочки размером 54x54 пиксела, то есть они должны бьпъ расположены друг от друга на расстоянии 54 пиксела как по вертикали, так и по горизонтали. Поскольку Flash не гарантирует точность при размещении клипов вручную, даже если показана сетка, выравнивать элементы перед началом игры лучше с помощью ActionScript.
Очень важно поместить элементы близко к их исходному положению и присвоить им имена. Я дал им имена от tilel до tileis, чтобы к ним можно было обращаться в коде программы.

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

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

В ролике Matching.fla есть клип "Cards", временная шкала которого содержит 19 кадров (Рисунок 13.5).

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

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

Имя эталона основного клипа в библиотеке — "picture". Он содержит три растровых изображения, по одному в каждом кадре. В первом кадре находится команда stop (). Картинки выстроены так, что верхний левый угол каждой располагается в центральной точке клипа.
Клип "picture" никогда не находится в рабочем поле сам по себе, а внутри двух других клипов: "fullPicture" и "maskedPicture".
В клипе "fullPicture", клип "picture" находится на одном слое, а маленький квадратный клип "button" - поверх него в другом слое.
В клипе "maskedPicture" клип "picture" также находится на одном слое, а клип "button" - на другом. Однако слой кнопки - это слой-маска, маскирующий слой картинки. Это значит, что только сегмент картинки под квадратом остается видимым, когда клип "maskedPicture" расположен в рабочем поле.
В рабочем поле клипы "fullPicture" и "maskedPicture" расположены бок о бок. Размешать клип "maskedPicture" достаточно сложно, поскольку, когда вы его двигаете, он показывает свои границы, которые довольно велики и покрывают все рабочее поле. Як тому же увеличил этот клип до 300%, что сделало его еще больше.
Главная временная шкала содержит четыре кадра. Первый - это страница с правилами. Потом идет кадр "play". Когда игрок заканчивает одну картинку, ролик переходит к кадру "next", чтобы дать игроку передохнуть перед следующей картинкой. Последний кадр - это кадр "game over".
В ролике используются два динамических текстовых поля. Первое, displayBonus, используется в кадре "play". Поле displayScore используется в кадрах "next" и "game over".

Подход

Подход

Большая часть рассматриваемой программы представляет собой по сути подготовку к собственно игре, обеспечивая перемешивание элементов мозаики. Сначала случайным образом выбирается элемент. Потом выполняется проверка, является ли один из четырех смежных элементов пустым. Если да, то выбранный элемент перемещается туда. В противном случае выбирается другой элемент до тех пор, пока не будет найден элемент, смежный с пустым квадратом. Этот процесс повторяется 100 раз.
Когда перемешивание закончено, пользователь может передвигать элементы сам. Когда он щелкает по элементу, код проверяет, есть ли рядом с этим элементом пустой квадрат, если да, выбранный элемент перемещается туда.

Подход

Подход

Способ, каким сегмент картинки отображается на экране, основан на использовании слоев. В клипе картинка находится на одном слое, а маленький квадрат используется как маска для этого слоя. Только та часть картинки, которая находится под квадратом, оказывается видимой, когда клип отображается на экране.
Картинка имеет размер 400x300. Квадрат - размер 36x36. Когда картинка передвигается под квадратиком маски, видна только та часть картинки размером 36x36, которая находится под квадратом. Хотя перемещение
картинки сделано в ActionScript, маска создана во временной шкале клипа во время подготовки ролика.
Когда пользователь отмечает положение сегмента на целой картинке, ему нужно щелкнуть по этому месту. Было бы естественно расположить на этом месте невидимую кнопку, дело только в том, что кнопка должна сама себя уничтожить, поскольку курсор пользователя заменяется на руку. Вместо этого поместите обычный клип на это место и используйте hitTest, чтобы определить, когда по нему щелкнут.
В ролике используются Flash МХ-листенеры, чтобы поместить весь код в главную временную шкалу. Это значит, что реакция на щелчок мыши и обслуживание изменяющегося таймера должны быть частью сценария главной временной шкалы, а не одного из "actions''-клипов.

С помощью Flash MX и Flash 6 плеера стало возможным делать почти что угодно с помощью всего лишь одного сценария в главной временной шкале. Для этого необходимо регистрировать события, такие как onMouseUp и onEnterFrame, в функциях. Это может заменить обработчик onclipEvent в "actions''-клипах. Но поскольку эта технология не совместима сверху вниз с Flash 5, может пройти некоторое время, прежде чем она начнет широко применяться.

Эта игра показывает не одну картинку, а три. Общее число набранных игроком очков складывается из бонусных очков, полученных за все три картинки. Сыграйте прямо сейчас, чтобы познакомиться с игрой.

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

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

Весь сценарий прикреплен к клипу "actions", расположенному за пределами рабочего поля. Он начинается с обработчика событий onClipEvent (mouseDown), который реагирует на щелчок мыши по рабочему полю.
Этот код просто просматривает элементы картинки и определяет, находится ли один из них под курсором, а также является ли элемент полностью непрозрачным, то есть размещен ли на своем месте.
Если элемент найден, программе Flash сообщается, что теперь он подвижный и может перемещаться с помощью команды startDrag. Затем программа завершается.

Команда startDrag - основное действие, позволяющее пользователю перетаскивать клип. Оно не такое универсальное, как методы перетаскивания, рассмотренные ранее, но в простых случаях работает хорошо. Команда stopDrag останавливает перетаскивание.

onClipEvent(mouseDown) {
// Определяем положение курсора.
mx = _root._xmouse;
my = _root._ymouse;
// Просматриваем все элементы картинки,
for (x=0;x for(y=0;y piece = _root[x+"-"+y];
// Выясняем, находится ли элемент под курсором
// и не находится ли он уже на своем месте?
if (piece.hitTest(mx,my) and (piece._alpha < 100)){
// Пользователь щелкнул по элементу.
piece.startDrag();
// Выходим из циклов.
х = 6 ;
У = 4;
break;
}}
}}

Когда пользователь отпускает кнопку мыши, элемент фиксируется, Код проверяет расстояние от центра элемента до центра контура: если оно не превышает 10. пикселов, элемент перемешается точно в свое положение и становится полностью непрозрачным, так что пользователь видит: элемент находится на своем месте.

onClipEvent(mouseUp) {
// Прекращаем перемещение элемента.
stopDrag();
// Измеряем расстояние от центра элемента до центра контура.
dx = _root.outline._x - piece._x;
dy = _root.outline._x - piece._y;
dist = Math.sqrt(dx*dy+dy*dy);
// Если расстояние меньше 10 пикселов,
// элемент помещается на свое место,
if (dist < 10) {
piece._x = _root.outline._x;
piece. _y = _root.outline._y;
// Делаем элемент полностью непрозрачным,
piece._alpha = 100;
}
}

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

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

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

function initGame() {
// Устанавливаем горизонтальное и вертикальное расстояние
// между элементами.
tileDist = 54;
// Помещаем все элементы на свои места,
for (x=l;x for (y=0;y tile = х+у*4;
_root["tile"+tile];
_x = x*tileDist;
_root["tile"+tile];
_y = y*tileDist+tileDist;
}}
// Совершаем 100 произвольных перемещений,
for(tilenum=0;tilenum do {
// Выбираем элемент случайным образом.
tile = "tile"+(random(15)+1);
//- Проверяем, есть ли рядом свободный квадрат.
emptySpace = findEmpty(tile);
// Цикл продолжается до тех пор, пока не будет найден
// элемент, рядом с которым расположен свободный квадрат.
} while (emptySpace == "none");
// Перемещаем элемент на свободное место.
moveTile(tile,findEmpty(tile));
}}

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

// Проверяем, есть ли свободное место около данного элемента,
function findEmpty (tile) {
// Определяем положение элемента.
tilex = _root[tile]._x;
tiley = _root[tile]._y;
// Проверяем, есть ли элемент мозаики слева,
if (tilex > tileDist) {
if (!tileThere(tilex-tileDist, tiley)) {
return("left");
}}
// Проверяем, есть ли элемент мозаики справа,
if (tilex > tileDistM) {
if (!tileThere(tilex+tileDist, tiley)) {
return("right");
}} // Проверяем, есть ли элемент мозаики сверху. if (tiley > tileDist) { if (!tileThere(tilex, tiley-tileDist)) { return)"above");
}}
// Проверяем, есть ли элемент мозаики снизу,
if (tiley > tileDistM) {
if (!tileThere(tilex, tiley+tileDist)) {
return("below");
}}
// Элементы мозаики имеются со всех сторон,
return ("none");
}

Если перед выражением стоит восклицательный знак, значит, OHO отрицается, то есть true превращается в false, a false в true. Эта операция известна как логическое не (not). Например, в предыдущем коде проверяется не tileThere, a not tileThere.

Функция findEmpty использует метод tileThere, чтобы определить, находится ли элемент на определенном месте. Метод tileThere вызывается для определения элементов слева, справа, снизу и сверху.

// Проверяем, находится ли элемент мозаики на определенном месте,
function tileThere (thisx, thisy) {
// Просматриваем элементы на предмет совпадения координат,
for (i=l;i // Выясняем, совпадают ли значения положения
//по горизонтали,
if (_root["tile"+i]._x == thisx) {
// Совпадает ли положение по вертикали,
if (_root["tile"+i]._у == thisy) {
return true;
}
}} // Эти координаты соответствуют пустому квадратику,
return false;
}

После того как было решено переместить элемент, вызывается функция moveTile. Эта же функция используется, когда игрок перемешает элементы.

// Перемещаем элемент в определенном направлении,
function moveTile (tile, direction) {
if (direction == "above") {
_root[tile]._y -= tileDist;
} else if (direction == "below") {
_root[tile]._y += tileDist;
} else if (direction == "left") {
_root[tile]._x -= tileDist;
} else if (direction == "right") {
_root[tile]._x += tileDist;
}}

После того как контроль передается игроку, надо определить, по какому элементу щелкнули мышкой. Для этого вызывается функция tileUnderMouse.

// Определяем, по какому элементу щелкнул игрок,
function tileUnderMouse О {
for (i = l; i< = 15; i + +) {
if (_root["tile"+i].hitTest(_xmouse, _ymouse)) {
return (i);
}
}}

Сценарий в основной временной шкале заканчивается вызовом функции initGame и выводом на экран перемешанных элементов.

initGame();
stop();

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

onClipEvent (mouseDown) {
// Определяем, по какому элементу щелкнул пользователь.
tileClicked = _root.tileUnderMouse();
// Определяем, есть ли рядом пустое пространство.
emptySpace = _root.findEmpty("tile"+tileClicked);
// Перемещаем элемент на свободное место.
_root.moveTile("tile"+tileClicked, emptySpace);
}

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

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

Почти весь код этой игры находится в основной временной шкале. Ролик начинается с вызова функции initGame, которая создает список 18 пар карт, случайным образом выбирает карты из первого списка, а затем помешает их во второй список, чтобы перемешать колоду карт.
Потом функция создает 36 карт. Каждый клип автоматически начинается с того, что карта помещается рубашкой вверх, а свойству клипа ("picture") присваивается номер картинки, которую карта будет представлять.

initGame();
stop();
function initGame() {
// Создаем отсортированный список карт.
cardsListOrdered = [];
cardsListOrdered.push(i,i);
}
// Список перемешанных карт.
cardsListSorted = [];
while (cardsListOrdered.length > 0) {
r = int(Math.random()*cardsListOrdered.length);
cardsListSorted.push(cardsListOrdered[r]};
cardsListOrdered.splice(r,1);}
// Создаем клипы карт и определяем их положение и картинки,
х = 0; У = 'О; for(i=0;i attachMovie("card", "card" + i, i) ;
_root["card"+i].picture = cardsListSorted[i];
_root["card"+i]._x = x*60+200;
_root["card"+i]._y = y*60+50;
// Переходим к следующей карт
х++;
if (х > 5) {
х = 0;
У++;
}} // Располагаем эти две карты рубашками вверх,
firstclip.gotoAndStop(1);
secondclip.gotoAndStop(1);
firstclip = 0; secondclip = 0;
firstdip = 0;
}

Обратите внимание, что с помощью команды push в массив можно добавить сразу более одного элемента, Например, выражение myArray.push(7,12) добавит в массив myArray числа 7 и 12.

Функция initGame заканчивается тем, что обнуляется переменная firstclip. В этой переменной содержится ссылка на карту, по которой щелкнули первой. Когда щелкают по клипу, кнопка внутри этого клипа отреагирует и на основную временную шкалу с помощью функции clickCard будет добавлена ссылка к клипу.
Функция clickCard может выполнить одну из 3-х функций. Если значение переменной firstclip равно 0, ей присваивается клип, по которому щелкнули, карта переворачивается, то есть программа переходит к кадру, содержащему соответствующую картинку.
Если в переменной firstclip хранится ссылка на некий клип, значит, одна карта уже перевернута. В этом случае программа пepeвopaчивает и вторую карту, присваивает переменной secondclip значение клипа и сравнивает два клипа. Если они совпадают, оба клипа удаляются.
Третье условие, которое, на самом деле, проверяется до двух первых, возникает тогда, когда игрок щелкает по одной и той же карте дважды. В таком случае значение переменной clip будет равно firstclip. Карта просто снова переворачивается и значение firstclip обнуляется.
Прежде чем проверить эти три условия, функция clickCard определяет, перевернуты ли уже две карты. Если да, значит, игрок уже выбрал две карты, но они не совпали. Прежде чем перевернуть следующую карту, эти две карты поворачиваются рубашками вверх

Вот все, что нужно для игры. У кнопки внутри клипа "Cards" только одна строчка кода, которая передает основной временной шкале информацию о том, что по клипу щелкнули.

on (press) {
// Передаем основной временной шкале информацию о щелчке мышью
_root.clickCard(this);
}

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

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

В начале ролика задаются функции roundNum и score. Переменная roundNum содержит номер картинки, которая должна появиться.

// Начинаем с первой картинки.
roundNum = 1;
score = 0;
stop();

Игра начинается, когда пользователь нажимает кнопку в первом кадре. Все коды содержатся на главной временной шкале, в первом слое. Нажатие кнопки вызывает функцию setUpRound.
После того как функция отправляет ролик к кадру "Play", она определяет два клипа. Содержащийся в каждом из них клип "picture" устанавливается в кадр, определяемый переменной roundNum.
После этого выбирается случайное место на картинке. Это происходит с учетом того, что площадь сегмента 36x36, таким образом, это случайное место должно быть не ближе 18 пикселов от края изображения.
В клипе "maskedPicture" положение картинки изменяется таким образом, что случайное место располагается в позиции (0,0), на которой располагается квадрат-маска. Таким образом, если сегмент выбрана из позиции (100, 150), то увеличенная картинка должна быть сдвинута на -100 пикселов по горизонтали и на -150 - по вертикали.
В клипе "fullPicture" картинка остается неподвижной, а движется клип "button", пока не займет нужное положение. Свойство _alpha равно 0, чтобы кнопка была невидимой.

Вместо того, чтобы задавать свойство _alpha клипа равным 0, попробуйте задать его равным 25 во время отладки программы. Поскольку клип будет видимым, вам будет легче понять, что игра работает.

function setUpRound(pictureNum) {
// Переходим к кадру игры. gotoAndStop("Play");
// Выбираем картинку в обоих клипах.
fullPicture.picture.gotoAndStop(pictureNum);
maskedPicture.picture.gotoAndStop(pictureNum);
// Задаем случайное положение картинки.
w = fullPicture._width;
h = fullPicture._height;
x = Math.random()*(w-36)+18;
у = Math.random))*(h-36)+18;
// Передвигаем картинку под маской в это положение.
maskedPicture.picture._x = -х;
maskedPicture.picture. _y = -у;
// Задаем координаты кнопки.
fullPicture.button._x = х;
fullPicture.button._y = у;
// Делаем кнопку невидимой.
fullPicture.button._alpha = 0;
// Запускаем таймер.
startTime = getTimer();
}

В конце функции setupRound. переменной startTime присваивается текущее время. Это время используется следующим фрагментом кода, который все время пересчитывает бонусные очки. Он берет текущее время,вычитает startTime, а потом вычитает итог из 30000 миллисекунд. В результате бонусное время начинается с 30000 миллисекунд и происходит обратный отсчет до 0. Вместо того чтобы поместить этот процесс в клип "actions", я просто назначил функцию событию onEnterFrame. Это новый прием, появившийся в версии MX.

// Пересчитывем бонусные очки при каждом обращении к кадру.
_root.onEnterFrame = function!) {
// Бонус равен 30000 минус значение startTime.
bonus = 30000-Math.floor(getTimer() - startTime);
if (bonus< 0) bonus = 0;
displayBonus = "BONUS: "+bonus;
}

Другое событие, нуждающееся в отслеживании, это onMouseDown. Когда оно происходит, используется hitTest, чтобы определить, нажал ли пользователь на скрытую кнопку. Если да, то кнопка становится видимой (полупрозрачной) и ролик переходит к другому кадру. Количество бонусных очков прибавляется к общему количеству, и очки показываются на экране.

// Определяем функцию, отслеживающую нажатие кнопки мыши
// (листенер).
- _root.onMouseDown = function!) {
// Смотрим,щелкнул ли пользователь по мыши,
if (fullPicture.button.hitTest (_root ._xmouse,_root ._ymouse)) {
// Смотрим, была ли кнопка спрятана,
if (fullPicture.button._alpha < 50) {
// Показываем кнопку.
fullPicture.button._alpha = 50;
// Начисляем очки, score += bonus;
displayScore = "SCORE:"+score;
i f (roundNum < 3) {
// Если не все картинки пройдены,показываем
// следующую.
gotoAndStop("next");
} else{
// Если была последняя - заканчиваем игру.
gotoAndStop("game over");
}}
}}

В "Пятнашках" используется 15

Рисунок 13.3 В "Пятнашках" используется 15 элементов и один пустой квадрат

Во временной шкале клипа "Cards"

Рисунок 13.5 Во временной шкале клипа "Cards" имеется 19 кадров, первый без картинки и остальные 18 с различными картинками

В первом кадре расположена рубашка карты, то есть никакой картинки нет. В остальных 18 кадрах содержатся изображения, соответствующие разным картам.
Кнопка - просто прямоугольник такого же размера, что и карта. Она расположена в третьем слое клипа "Cards" (см. Рисунок 13.5), то есть за фоном.
Хотя кнопку не будет видно, она будет реагировать на действия пользователя.
Также в клипе "Cards" присутствует фон. У первого кадра, содержащего рубашку карты, фон серый. У остальных кадров, в которых находится какая-либо картинка, белый фон.

Для создания этой игры можно

Подход

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

Когда кнопка мыши отпускается, код определяет, находится ли элемент мозаики рядом со определенным для него местом, и, если да, элемент фиксируется.
Сначала устанавливаем для всех клипов, содержащих элементы мозаики, свойство _alpha=75, чтобы они стали немного светлее. Затем, когда игрок поместит элемент на свое место, соответствующий клип станет полностью непрозрачным. Таким образом, будет обеспечена некая обратная связь с игроком, ему будет сообщаться, что элемент находится на своем месте. Также будет проверяться, является ли элемент мозаики полностью непрозрачным в тот момент, когда пользователь щелкает по нему мышкой и начинает перетаскивать. Это необходимо, чтобы те элементы, которые уже находятся на своем месте, больше не перемешались.
Узнать, находится элемент на своем месте или нет, несложно, потому что они сделаны таким образом, чтобы их центр находился в центре основной картинки. Например, у элемента из верхнего левого угла центр будет правее и ниже (Рисунок 13.2).
Теперь представьте, что каждый элемент создан именно так. Центр элемента останется в центре картины не зависимо от того, где он будет располагаться. Если вы не совсем поняли, что я имею в виду, просмотрите исходный ролик Jigsawpuzzle.fla. Изучите несколько клипов, содержащих элементы мозаики, и увидите, что центр остается постоянным.
Это намного упрощает код. Каждый элемент должен быть помещен точно на свое место, чтобы вписаться в контур картинки. Так что способ определения надлежащего положения элемента будет одинаковым для всех клипов.

в начале игры случайным образом

Очень важно в начале игры случайным образом расположить элементы. Для этого Flash-ролик сначала нарисует все элементы мозаики на своих местах, а затем будет выполнено 100 произвольных перемещений. Таким образом, элементы окажутся перемешаны, и собрать такую мозаику будет сложно, но возможно.

В игре используется только два

Подход

В игре используется только два библиотечных элемента. Первый – клип, в первом кадре которого представлена рубашка карты. В остальных кадрах содержатся картинки. Так как будет 18 различных картинок, в клипе окажется 19 кадров. Если вы хотите, чтобы клип отобразил рубашку, карты, перейдите к первому кадру; если хотите увидеть картинку, перейдите к одному из кадров 2-19.

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

Чтобы создать эту игру, ваш

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

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