Статьи

Создание приложения Hangman для iPad с Flash — программирование геймплея

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

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

Этот учебник будет включать в себя проект TweenLite, так что давайте возьмем копию . Как только вы загрузили его, извлеките его и добавьте папку «com» ​​в ту же папку, в которой находится ваш проект hangman. Наконец, добавьте следующее вместе с остальной частью импорта вашего проекта:

1
import com.greensock.TweenLite;

Выберите инструмент Text Tool, убедитесь, что TextField не доступен для выбора, и что установлены следующие свойства:

  • Размер: 45pt
  • Цвет: # 0000FF
  • Выровнять: Центр

Нарисуйте TextField на сцене и установите следующие свойства:

  • X: 98,00
  • Y: 110,00
  • W: 540,95
  • H: 54,00

Дайте ему имя экземпляра «guess_word_text».


Выберите инструмент 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».

Теперь удалите круг со сцены.

Перейдите в 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 .


Откройте файл «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;

Эти классы нам понадобятся в этом уроке.


Введите следующий код чуть ниже 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;

Введите следующий код под конструктором 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

gameButtonArray
для нового массива.
Далее мы перебираем букву alphabetArray , создавая новый 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, поэтому в следующий раз в цикле кнопки будут расположены в шахматном порядке, а не друг над другом.


Введите следующий код под 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()
}

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


Мы будем загружать во внешний файл .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
погрузчику.


Добавьте ниже функцию 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», выведенные в окне вывода.


Мы возьмем оригинальное слово и заменим все символы на «?». Однако некоторые слова содержат апострофы (‘), поэтому мы заменим те
где уместно.

Добавьте ниже 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.


Функция 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 были заменены на «?» и «», где это необходимо.


Наш палач динамически рисуется с помощью 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 чтобы добавить его на сцену.

Протестируйте фильм, и вы должны увидеть контейнер палача, расположенный над кнопками.

Функция 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, чтобы решить, какую часть палача рисовать.

Следующий код использует 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);
}

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

1
2
3
4
function drawHead():void{
    hangmanContainer.graphics.drawCircle(180,120,30);
     
}

Этот код рисует тело палача. Добавьте следующий код ниже функции drawHead() :

1
2
3
4
function drawBody():void{
    hangmanContainer.graphics.moveTo(180,150);
    hangmanContainer.graphics.lineTo(180,300);
}

Эти две функции используются для рисования левой и правой руки. Добавьте следующие функции под функцией 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)
}

Эти две функции используются для рисования левой и правой ног. Добавьте следующие функции под функцией 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);
}

Пойдите, чтобы Вставить> Новый Символ. Дайте ему имя YouWin и убедитесь, что установлен флажок «Экспорт для ActionScript» и что для класса установлено значение «YouWin»

Выберите инструмент «Текст» и убедитесь, что установлены следующие свойства:

  • Размер: 14pt
  • Цвет: # 00FF00

Перетащите TextField в мувиклип и введите слова «ВЫ ВЫИГРЫВАЕТЕ !!» внутрь.

Затем установите следующие свойства в TextField.

  • ИКС; -49,00
  • Y: -8,00
  • W: 104,00
  • H: 19.00

Нам нужно создать переменную для хранения нашего ролика YouWin MovieClip, поэтому введите следующее в нижней части объявлений переменных:

1
var youwin:YouWin;

Пойдите, чтобы Вставить> Новый Символ. Дайте ему имя YouLose и убедитесь, что установлен флажок «Экспорт для ActionScript» и что для класса установлено значение «YouLose».

Выберите инструмент «Текст» и убедитесь, что установлены следующие свойства.

  • Размер: 14pt
  • Цвет: # FF0000

Перетащите TextField в мувиклип и введите слова «ВЫ ПОТЕРЯЕТЕ !!» внутрь.

Установите следующие свойства в TextField

  • ИКС; -49,00
  • Y: -8,00
  • W: 104,00
  • H: 19.00

Нам нужна переменная для хранения нашего YouLose MovieClip, поэтому введите следующее в нижней части объявления вашей переменной.

1
var youlose:YouLose;

Добавьте следующий код ниже функции drawLeg2() .

1
2
3
4
5
6
private function disableButtons():void{
    for(var i:int = 0;i < gameButtonArray.length;i++){
            gameButtonArray[i].disable();
    }
     
}

Этот код просто перебирает gameButtonArray и отключает все кнопки.

На этом шаге мы закончим 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 .

Функции 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 .

Нам нужно сделать окончательную очистку в функции 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 , проверяем, находятся ли кнопки на сцене и
мы их удалим.

Вам нужно будет включить «wordlist.txt» во включенные файлы. Перейдите в настройки «AIR for IOS» и на вкладке «Общие» нажмите кнопку «+».
и перейдите к «wordlist.txt», добавив его во включенные файлы.

Это завершает нашу игру! Следующим шагом будет публикация в App Store и загрузка через iTunes Connect.

Сначала вам нужно будет создать профиль обеспечения «Распространение» . Выполните шаги, описанные в шаге 4 первой части руководства, но
убедитесь, что вы находитесь в разделе «Распространение» вместо разработки.

Затем вам нужно скачать сертификат «Распространение» и преобразовать его в .P12, следуя примеру из шага 5 первой части этой серии.

Затем вернитесь к «Air For IOS» и на вкладке «DEPLOYMENT» замените devlopement .P12 с дистрибутивом .P12 и замените файл инициализации devloper.
в профиле распределения обязательно установите флажок «Развертывание — Apple App Store» и нажмите «Опубликовать».

Наконец, войдите в iTunes Connect, перейдите в «Управление приложениями» и добавьте новое приложение, следуйте инструкциям, загрузите свое приложение с помощью «Загрузчика приложений».

Эта серия дала хорошее представление о разработке мобильных приложений с помощью Flash CS5.5. Надеюсь, вы узнали что-то полезное и спасибо за чтение! Если вы хотите увидеть больше контента для разработки для Flash CS 5.5 iOS, оставьте комментарий ниже!