Добро пожаловать во вторую часть нашей серии уроков по созданию игры Hangman для iPad с Flash. В то время как первое учебное пособие было сосредоточено в первую очередь на настройке для кодирования приложений iOS с Flash, в этом учебном пособии основное внимание будет уделено ActionScript и игровой логике, необходимой для фактического программирования палача. Давайте начнем!
Где мы остановились. , ,
В первой части этой серии руководств мы рассмотрели процесс подготовки устройства, добавили значок приложения и экран загрузки, а также способы синхронизации приложения с iPad во время разработки. В этой части урока мы закончим кодирование игрового процесса.
Добавить проект TweenLite
Этот учебник будет включать в себя проект TweenLite, так что давайте возьмем копию . Как только вы загрузили его, извлеките его и добавьте папку «com» в ту же папку, в которой находится ваш проект hangman. Наконец, добавьте следующее вместе с остальной частью импорта вашего проекта:
1
|
import com.greensock.TweenLite;
|
Шаг 15: Добавление текстового поля Guessword
Выберите инструмент Text Tool, убедитесь, что TextField не доступен для выбора, и что установлены следующие свойства:
- Размер: 45pt
- Цвет: # 0000FF
- Выровнять: Центр
Нарисуйте TextField на сцене и установите следующие свойства:
- X: 98,00
- Y: 110,00
- W: 540,95
- H: 54,00
Дайте ему имя экземпляра «guess_word_text».
Шаг 16: Создание игровых кнопок
Выберите инструмент Oval Tool и убедитесь, что на нем установлены следующие свойства:
- Цвет заливки: # 000000
- Цвет обводки: # 0000FF
- Ход: 3,00
- Стиль: Твердый
Удерживайте «Shift», чтобы овал соответствовал кругу, и вытяните круг на сцену.
С помощью «инструмента выделения» перетащите круг, чтобы выбрать заливку и обводку. Вы можете сказать, что они оба выбраны «Образцом штриховки».
Выбрав заливку и обводку, придайте кружку следующие свойства:
- Ш: 51,00
- H: 51,00
Теперь щелкните правой кнопкой мыши по кругу и выберите «Преобразовать в символ». Дайте ему имя «GameButton», убедитесь, что установлен флажок «Export For Actionscript» и
что класс установлен на «GameButton».
Теперь дважды щелкните по нему, чтобы перейти в режим редактирования. Выберите инструмент «Текст» и убедитесь, что установлены следующие свойства:
- Цвет белый
- Размер: 20pt
Перетащите TextField в MovieClip и установите для него следующие свойства:
- X: 11,00
- Y: 10,00
- Вт: 29.00
- H 28.00
Убедитесь, что TextField не доступен для выбора:
Дайте TextField имя экземпляра «game_btn_text».
Теперь удалите круг со сцены.
Шаг 17: Класс Game Button
Перейдите в File> New и выберите «Actionscript File». Сохраните это как «GameButton.as» в той же папке, что и ваш «Hangman.fla».
Введите следующий код в «GameButton.as».
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
package {
import flash.text.TextField;
import flash.display.MovieClip;
public class GameButton extends MovieClip{
public function GameButton() {
this.game_btn_text.selectable = false;
this.mouseChildren = false;
}
public function setText(theText:String):void{
this.game_btn_text.text = theText;
}
public function getText():String{
return this.game_btn_text.text;
}
public function disable():void{
this.mouseEnabled = false;
trace(«YEAH»);
}
}
}
|
Здесь мы импортируем нужные нам классы, устанавливаем, что game_button_text
не выбирается, устанавливаем mouseChildren
в false, чтобы
TextField не может получать события мыши, добавлены некоторые методы получения и установки для установки текста в TextField и функция disable()
это отключит кнопки от получения событий мыши. Получить и установить текст в game_btn_text
.
Шаг 18: Импорт для основной игры
Откройте файл «Main.as», который должен быть доступен в первой части. Добавьте следующий импорт в начало, под декларацией пакета:
1
2
3
4
5
|
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;
import flash.display.Sprite;
|
Эти классы нам понадобятся в этом уроке.
Шаг 19: Создание переменных
Введите следующий код чуть ниже public function Main extends MovieClip
:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
public class Main extends MovieClip{
//Used for the TextFields on Our Game Buttons
var alphabetArray = [«A»,»B»,»C»,»D»,»E»,»F»,»G»,»H»,»I»,»J»,»K»,
«L»,»M»,»N»,»O»,»P»,»Q»,»R»,»S»,»T»,»U»,
«V»,»W»,»X»,»Y»,»Z»];
//The original word
var theWord:String;
//The guess Word
var guessWord:Array;
//An array for our game buttons
var gameButtonArray:Array = new Array();
//This will hold all the words
var wordList:Array;
//A Sprite we draw the hangman into
var hangmanContainer:Sprite;
//Number of Wrong Guess
var numWrong:int = 0;
|
Шаг 20: Создание игровых кнопок
Введите следующий код под конструктором public function Main()
:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
private function setupGameButtons():void{
var xPos=150;
var yPos = 600;
gameButtonArray = new Array();
for(var i:int = 0;i<alphabetArray.length;i++){
if(i == 8 || i == 16){
yPos+= 65;
xPos = 150;
}
if(i == 24){
yPos+=65;
xPos = 330;
}
var gameButton = new GameButton;
gameButton.setText(alphabetArray[i]);
gameButton.x = xPos;
gameButton.y = yPos;
gameButtonArray.push(gameButton);
addChild(gameButton);
gameButton.addEventListener(MouseEvent.CLICK,checkLetter);
xPos+=60;
}
}
|
Сначала мы объявляем две переменные xPos
и yPos
. Они содержат начальные позиции наших GameButtons. Затем мы создаем
gameButtonArray
для нового массива. Далее мы перебираем букву
gameButtonArrayalphabetArray
, создавая новый GameButton. Мы проверяем, равен ли i
8 или 16, и если это так, мы увеличиваем переменную yPos
на 65 и сбрасываем переменную xPos
до 150. Затем мы проверяем, равен ли i
до 24, и если это так, мы увеличиваем yPos
на 65 и устанавливаем xPos
на 330. Это xPos
наши кнопки в красивой сетке.
Затем мы создаем GameButton
и устанавливаем его текст на текущую букву в массиве алфавита, используя (alphabetArray[i])
затем
установите кнопки .x
и .y
, используя xPos
и yPos
. Затем нажимаем кнопку в gameButtonArray
добавить его на сцену и добавить к нему EventListener.
Наконец, мы увеличиваем xPos
на 60, поэтому в следующий раз в цикле кнопки будут расположены в шахматном порядке, а не друг над другом.
Шаг 21: функция checkLetter
Введите следующий код под setupGameButtons()
вы создали выше.
1
2
3
4
5
6
|
private function checkLetter(e:MouseEvent):void{
var tempButton:GameButton = e.currentTarget as GameButton;
var theLetter = tempButton.getText().toLowerCase();
trace(theLetter);
}
|
Здесь мы устанавливаем tempButton
и переменную theLetter
которая получает текст кнопок и преобразует его в lowerCase. Затем мы проследим theLetter
панель вывода.
Добавьте следующее в public function Main()
.
1
2
3
|
public function Main() {
setupGameButtons()
}
|
Идите вперед и протестируйте фильм, и вы должны увидеть, как игровые кнопки хорошо выровнены на сцене, и если вы нажмете на них, правильная буква должна
проследить до панели вывода.
Шаг 22: загрузка в список слов
Мы будем загружать во внешний файл .txt, содержащий слова, используемые в этой игре, разделенные символом новой строки.
Я загрузил список слов из SourceForge и использую «Вариант_1-слова.95». Я переименовал его в
«Wordlist.txt».
Введите следующий код ниже функции checkLetter
вы создали выше.
1
2
3
4
5
6
|
function doRequest():void{
wordList = new Array();
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest(«wordlist.txt»));
loader.addEventListener(Event.COMPLETE,wordListLoaded);
}
|
Здесь мы устанавливаем wordList
в новый массив, устанавливаем URLLoader, загружаем «wordlist.txt», а затем настраиваем прослушиватель Event.COMPLETE
погрузчику.
Шаг 23: функция wordListLoaded
Добавьте ниже функцию doRequest
, созданную на шаге выше:
1
2
3
4
|
function wordListLoaded(e:Event):void{
var tempString:String = e.target.data as String;
trace(tempString);
}
|
Добавьте следующее к public function Main()
.
1
2
3
4
|
public function Main() {
setupGameButtons();
doRequest();
}
|
Идите и протестируйте фильм снова. Вы должны увидеть слова из «wordlist.txt», выведенные в окне вывода.
Шаг 24: Создание Угадай слова
Мы возьмем оригинальное слово и заменим все символы на «?». Однако некоторые слова содержат апострофы (‘), поэтому мы заменим те
где уместно.
Добавьте ниже wordListLoaded()
вы создали на wordListLoaded()
шаге:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
function createGuessWord():void{
guessWord = new Array();
var randomWord = Math.floor(Math.random() * wordList.length);
theWord = wordList[randomWord];
trace(theWord);
theWord = theWord.substring(0,theWord.length-1);
for(var i:int = 0; i< theWord.length;i++){
if(theWord.charAt(i) == «‘»){
guessWord[i] =»‘»;
}else{
guessWord[i]=»?»;
}
}
var newGuessWord = guessWord.join(«»);
guess_word_text.text = newGuessWord;
}
|
Поскольку строки являются неизменяемыми в AS3, мы будем хранить каждый символ в массиве, а затем преобразовывать массив в строку. Используя массив, мы можем легко
изменить каждого персонажа.
Первое, что мы делаем, это устанавливаем на guessWord
новый массив. Затем мы выбрали случайный элемент из нашего массива wordList
и установили theWord
равно случайному элементу из списка слов, который в свою очередь дает нам случайное слово.
Далее мы используем метод substring
чтобы отрубить последний символ слова. Во время тестирования я заметил, что слова имеют дополнительный пробел в конце. Это позаботится об этом дополнительном пространстве.
Затем мы циклически перебираем theWord
, проверяем, является ли текущий символ апострофом (‘), и устанавливаем текущий индекс
массив к апострофу (‘), в противном случае мы устанавливаем его в «?».
Наконец, мы создаем newGuessWord
, используя массивы, встроенные в метод join
который берет элементы массива и поворачивает их
в строку. Наконец, мы устанавливаем guess_word_text
TextField для guess_word_text
в тексте для нового GuessWord.
Шаг 25: Сброс игры
Функция resetGame()
— это место, где мы resetGame()
все наши игровые элементы для новой игры. На данный момент мы просто используем его, чтобы создать WessWord и настроить наши кнопки.
Введите следующий код ниже функции createGuessWord
вы создали в createGuessWord
шаге.
1
2
3
4
|
function resetGame():void{
setupGameButtons();
createGuessWord();
}
|
Измените код в public function Main()
на следующий.
1
2
3
|
public function Main() {
doRequest();
}
|
Затем добавьте следующую строку в функцию wordListLoaded
.
1
2
3
4
5
|
function wordListLoaded(e:Event):void{
var tempString:String = e.target.data as String;
wordList = tempString.split(«\n»);
resetGame();
}
|
Здесь мы добавляем слова в массив wordList
используя метод Strings, встроенный в метод split()
, передавая «\ n», так как наши слова
разделяются символами новой строки, затем мы вызываем функцию resetGame
мы создали выше.
Идите и протестируйте фильм, и вы должны увидеть, что предположения Word были заменены на «?» и «», где это необходимо.
Шаг 26: Рисуем контейнер Палача
Наш палач динамически рисуется с помощью API рисования AS3. Первое, что нам нужно сделать, это нарисовать контейнер для палача. Введите следующий код
ниже функции resetGame()
:
1
2
3
4
5
6
7
8
|
private function addHangmanContainer():void{
hangmanContainer = new Sprite();
hangmanContainer.x = 180;
hangmanContainer.y = 180;
hangmanContainer.graphics.lineStyle(3,0×000000);
hangmanContainer.graphics.drawRect(0,0,400,400);
addChild(hangmanContainer);
}
|
Здесь мы устанавливаем hangmanContainer
на новый Sprite, устанавливаем его свойства .x
и .y
и используем чертеж
API для установки lineStyle
на lineStyle
черную линию. Затем мы рисуем прямоугольник с помощью метода drawRect()
и добавляем его на сцену.
Добавьте следующее в resetGame()
:
1
2
3
4
5
6
7
8
9
|
function resetGame():void{
if(hangmanContainer != null){
removeChild(hangmanContainer);
hangmanContainer = null;
}
addHangmanContainer();
setupGameButtons();
createGuessWord();
}
|
Сначала мы проверяем, что hangmanContainer
не равен нулю. Если это не так, то мы удаляем его со сцены и устанавливаем в ноль, тогда мы
используйте addHangmanContainer
чтобы добавить его на сцену.
Протестируйте фильм, и вы должны увидеть контейнер палача, расположенный над кнопками.
Шаг 27: функция drawHangman ()
Функция drawHangman()
будет использоваться для рисования отдельных фигур палача по ходу игры. Введите следующий код под
addHangmanContainer()
:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function drawHangman(drawNum:int):void{
switch(drawNum)
{
case 0:
drawGallows();
break;
case 1:
drawHead();
break;
case 2:
drawBody();
break;
case 3:
drawArm1();
break;
case 4:
drawArm2();
break;
case 5:
drawLeg1();
break;
case 6:
drawLeg2();
break;
}
}
|
Эта функция будет принимать int в качестве параметра и использовать оператор switch, чтобы решить, какую часть палача рисовать.
Шаг 28: функция drawGallows ()
Следующий код использует API рисования для рисования виселицы внутри спрайта hangmanContainer. Добавьте следующее ниже drawHangman()
.
1
2
3
4
5
6
7
8
|
function drawGallows():void{
hangmanContainer.graphics.moveTo(20,380);
hangmanContainer.graphics.lineTo(360,380);
hangmanContainer.graphics.moveTo(290,380);
hangmanContainer.graphics.lineTo(290,50);
hangmanContainer.graphics.lineTo(180,50);
hangmanContainer.graphics.lineTo(180,90);
}
|
Шаг 29: функция drawHead ()
Этот код используется для рисования головы палача. Добавьте следующий код ниже функции drawGallows()
.
1
2
3
4
|
function drawHead():void{
hangmanContainer.graphics.drawCircle(180,120,30);
}
|
Шаг 30: функция drawBody ()
Этот код рисует тело палача. Добавьте следующий код ниже функции drawHead()
:
1
2
3
4
|
function drawBody():void{
hangmanContainer.graphics.moveTo(180,150);
hangmanContainer.graphics.lineTo(180,300);
}
|
Шаг 31: Функции drawArm
Эти две функции используются для рисования левой и правой руки. Добавьте следующие функции под функцией drawBody()
:
1
2
3
4
5
6
7
8
9
|
function drawArm1():void{
hangmanContainer.graphics.moveTo(180,200);
hangmanContainer.graphics.lineTo(130,190);
}
function drawArm2():void{
hangmanContainer.graphics.moveTo(180,200);
hangmanContainer.graphics.lineTo(230,190)
}
|
Шаг 32: функции drawLeg
Эти две функции используются для рисования левой и правой ног. Добавьте следующие функции под функцией drawArm2()
.
01
02
03
04
05
06
07
08
09
10
11
|
function drawLeg1():void{
hangmanContainer.graphics.moveTo(180,300);
hangmanContainer.graphics.lineTo(130,330);
hangmanContainer.graphics.lineTo(120,320);
}
function drawLeg2():void{
hangmanContainer.graphics.moveTo(180,300);
hangmanContainer.graphics.lineTo(230,330);
hangmanContainer.graphics.lineTo(240,320);
}
|
Шаг 33: Создание муви клипа You Win
Пойдите, чтобы Вставить> Новый Символ. Дайте ему имя YouWin и убедитесь, что установлен флажок «Экспорт для ActionScript» и что для класса установлено значение «YouWin»
Выберите инструмент «Текст» и убедитесь, что установлены следующие свойства:
- Размер: 14pt
- Цвет: # 00FF00
Перетащите TextField в мувиклип и введите слова «ВЫ ВЫИГРЫВАЕТЕ !!» внутрь.
Затем установите следующие свойства в TextField.
- ИКС; -49,00
- Y: -8,00
- W: 104,00
- H: 19.00
Нам нужно создать переменную для хранения нашего ролика YouWin MovieClip, поэтому введите следующее в нижней части объявлений переменных:
1
|
var youwin:YouWin;
|
Шаг 34: Создание муви клипа You Lose
Пойдите, чтобы Вставить> Новый Символ. Дайте ему имя YouLose и убедитесь, что установлен флажок «Экспорт для ActionScript» и что для класса установлено значение «YouLose».
Выберите инструмент «Текст» и убедитесь, что установлены следующие свойства.
- Размер: 14pt
- Цвет: # FF0000
Перетащите TextField в мувиклип и введите слова «ВЫ ПОТЕРЯЕТЕ !!» внутрь.
Установите следующие свойства в TextField
- ИКС; -49,00
- Y: -8,00
- W: 104,00
- H: 19.00
Нам нужна переменная для хранения нашего YouLose MovieClip, поэтому введите следующее в нижней части объявления вашей переменной.
1
|
var youlose:YouLose;
|
Шаг 35: функция disableButtons ()
Добавьте следующий код ниже функции drawLeg2()
.
1
2
3
4
5
6
|
private function disableButtons():void{
for(var i:int = 0;i < gameButtonArray.length;i++){
gameButtonArray[i].disable();
}
}
|
Этот код просто перебирает gameButtonArray
и отключает все кнопки.
Шаг 36: Завершение checkLetter ()
На этом шаге мы закончим checkLetter()
которая лежит в основе игры. Введите следующий код
внутри функции checkLetter()
вы создали ранее.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
private function checkLetter(e:MouseEvent):void{
var tempButton:GameButton = e.currentTarget as GameButton;
var theLetter = tempButton.getText().toLowerCase();
var correctGuess:Boolean = false;
var newGuessWord;
tempButton.removeEventListener(MouseEvent.CLICK,checkLetter);
removeChild(tempButton);
for(var i:int =0;i<theWord.length;i++){
if(theWord.charAt(i) == theLetter){
guessWord[i] = theLetter;
correctGuess = true;
}
}
newGuessWord = guessWord.join(«»);
guess_word_text.text = newGuessWord;
if(!correctGuess){
numWrong++;
drawHangman(numWrong);
}
if(newGuessWord == theWord){
disableButtons();
youwin = new YouWin();
youwin.x = 375;
youwin.y = 400;
addChild(youwin);
TweenLite.to(youwin,3,{scaleX:3,scaleY:3,onComplete:resetTheGame});
}
if(numWrong == 6){
disableButtons();
for( var j:int = 0; j < theWord.length;j++){
guessWord[j] = theWord.charAt(j);
newGuessWord = guessWord.join(«»);
guess_word_text.text = newGuessWord;
}
youlose = new YouLose();
youlose.x = 375;
youlose.y = 400;
addChild(youlose);
TweenLite.to(youlose,3,{scaleX:3,scaleY:3,onComplete:resetTheGame});
}
}
|
tempButton
и theLetter
были объяснены в предыдущих шагах. Переменная correctGuess
установлена в
сначала false, если пользователь выбрал правильную букву, мы устанавливаем значение true. newGuessWord
— это временная переменная, которую мы будем использовать, чтобы создать новое слово для отображения.
Далее мы удаляем EventListener из кнопки и удаляем его со сцены.
Мы перебираем theWord
за символом и проверяем, равен ли текущий символ в theWord
theLetter
, и
если это так, мы устанавливаем соответствующую букву в массиве theLetter.
в theLetter.
Затем мы используем метод join класса String, чтобы превратить наш массив guessWord
в строку (newGuessWord), и устанавливаем для newGuessWord
guess_word_text
значение newGuessWord
.
Мы проверяем, если correctGuess
имеет значение false, и если это так, мы увеличиваем numWrong
и вызываем нашу функцию drawHangman, передавая значение numWrong
.
Затем мы проверяем, равен ли theWord
и если это так, отключаем кнопки, youwin
экземпляр нашего youwin
MovieClip, устанавливаем его .x
и .y
, добавьте его на сцену и вызовите TweenLite для его анимации с помощью функции onComplete
.
Наконец, мы проверяем, numWrong
ли numWrong
шести, и если это так, мы перебираем theWord
и устанавливаем каждую букву в guessWord
массив, равный текущему символу в theWord
. Затем мы используем соединение, как описано выше, и показываем слово. Мы отключаем кнопки, youLose
экземпляр нашего youLose
,
добавьте его на сцену и снова вызовите TweenLite для анимации с помощью функции onComplete
.
Шаг 37: функция resetTheGame ()
Функции resetTheGame()
вызываются по окончании анимации youWin
и youLose
. Введите следующий код
ниже функции drawLeg2()
:
01
02
03
04
05
06
07
08
09
10
11
|
function resetTheGame():void{
if(youwin!=null){
removeChild(youwin);
youwin = null;
}
if(youlose!=null){
removeChild(youlose);
youlose = null;
}
resetGame();
}
|
Эта функция проверяет, являются ли youWin
и youLose
не youLose
NULL, и если они не являются, мы вызываем removeChild
для удаления
их со сцены и установить их на ноль. Наконец мы вызываем функцию resetGame
.
Шаг 38: Завершение resetGame ()
Нам нужно сделать окончательную очистку в функции resetGame
. Добавьте следующий код в resetGame()
:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
function resetGame():void{
numWrong = 0;
if(gameButtonArray.length>0){
for(var i:int =0;i<gameButtonArray.length;i++){
if(gameButtonArray[i].stage){
removeChild(gameButtonArray[i]);
}
}
}
if(hangmanContainer != null){
removeChild(hangmanContainer);
hangmanContainer = null;
}
addHangmanContainer();
setupGameButtons();
createGuessWord();
drawHangman(numWrong);
}
|
Сначала мы сбрасываем numWrong
на 0, затем перебираем gameButtonArray
, проверяем, находятся ли кнопки на сцене и
мы их удалим.
Шаг 39: Добавление WordList
Вам нужно будет включить «wordlist.txt» во включенные файлы. Перейдите в настройки «AIR for IOS» и на вкладке «Общие» нажмите кнопку «+».
и перейдите к «wordlist.txt», добавив его во включенные файлы.
Это завершает нашу игру! Следующим шагом будет публикация в App Store и загрузка через iTunes Connect.
Шаг 40: Подготовка к магазину приложений
Сначала вам нужно будет создать профиль обеспечения «Распространение» . Выполните шаги, описанные в шаге 4 первой части руководства, но
убедитесь, что вы находитесь в разделе «Распространение» вместо разработки.
Затем вам нужно скачать сертификат «Распространение» и преобразовать его в .P12, следуя примеру из шага 5 первой части этой серии.
Затем вернитесь к «Air For IOS» и на вкладке «DEPLOYMENT» замените devlopement .P12 с дистрибутивом .P12 и замените файл инициализации devloper.
в профиле распределения обязательно установите флажок «Развертывание — Apple App Store» и нажмите «Опубликовать».
Наконец, войдите в iTunes Connect, перейдите в «Управление приложениями» и добавьте новое приложение, следуйте инструкциям, загрузите свое приложение с помощью «Загрузчика приложений».
Вывод
Эта серия дала хорошее представление о разработке мобильных приложений с помощью Flash CS5.5. Надеюсь, вы узнали что-то полезное и спасибо за чтение! Если вы хотите увидеть больше контента для разработки для Flash CS 5.5 iOS, оставьте комментарий ниже!