Construirea unui Hangman App iPad cu Flash - Gameplay de programare

Bine ați venit în a doua parte a seriei noastre de tutorial despre construirea unui joc Hangman pentru iPad cu Flash. În timp ce primul tutorial sa concentrat în primul rând pe obținerea setărilor pentru codificarea aplicațiilor iOS cu Flash, acest tutorial se va concentra pe acțiunea ActionScript și logica jocului necesare pentru a programa de fapt hangmanul. Să începem!

Unde am plecat?

În prima parte a acestei serii de tutorial am trecut prin procesul de furnizare a dispozitivului, adăugând o pictogramă de aplicație și ecranul de încărcare și cum să sincronizați aplicația cu iPad-ul în timpul dezvoltării. În această parte a tutorialului, vom termina codarea gameplay-ului.

Adăugați Proiectul TweenLite

Acest tutorial va include proiectul TweenLite, deci mergeți mai departe și apucați o copie. Odată ce ați descărcat-o, extrageți-l și adăugați folderul "com" în același folder în care se află proiectul Hangman. În final, adăugați următoarele, împreună cu restul importurilor de proiecte:

 import com.greensock.TweenLite;

Pasul 15: Adăugarea unui câmp de text Ghicitul

Selectați Instrumentul de Text, asigurați-vă că TextField nu este selectabil și că sunt setate următoarele proprietăți:

Dimensiune: 45pt
Culoare: # 0000FF
Aliniere la centru

Desenați un TextField afară pe scenă și setați următoarele proprietăți:

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

Dați-i numele de instanță "guess_word_text".

Pasul 16: Crearea butoanelor de joc

Selectați Instrumentul Oval și asigurați-vă că sunt setate următoarele proprietăți:

Color de umplere: # 000000
Culoarea stroke: # 0000FF
Accident vascular cerebral: 3,00
Stil: Solid

Țineți "Shift" pentru a se potrivi cu ovalul unui cerc și trageți un cerc pe scenă.

Cu "Instrumentul de selecție" trageți în jurul cercului pentru a selecta atât umplerea cât și cursa. Puteți spune că ambele sunt selectate printr-un "model Hatch".

Atât umplerea, cât și cursa selectată dau cercului următoarele proprietăți:

W: 51,00
H: 51,00

Acum faceți clic dreapta pe cerc și alegeți "Convertire la simbol". Dați-i numele "GameButton", asigurați-vă că este bifată opțiunea "Export pentru acțiuni" și
că clasa este setată la "GameButton".

Acum faceți dublu clic pe acesta pentru a intra în modul de editare. Selectați instrumentul Text și asigurați-vă că sunt setate următoarele proprietăți:

Culoare albă
Dimensiune: 20pt

Trageți un TextField în MovieClip și setați următoarele proprietăți:

X: 11.00
Y: 10,00
W: 29,00
H: 28,00

Asigurați-vă că TextField nu este selectabil:

Dă TextField numele de instanță "game_btn_text".

Acum ștergeți cercul de pe scenă.

Pasul 17: Clasa jocurilor

Mergeți la File> New și alegeți "File Actionscript". Salvați acest lucru ca "GameButton.as" în același folder ca și "Hangman.fla".

Introduceți următorul cod în "GameButton.as".

 pachet import flash.text.TextField; import flash.display.MovieClip; clasa publică GameButton extinde MovieClip funcția publică GameButton () this.game_btn_text.selectable = false; this.mouseChildren = false;  funcția publică setText (theText: String): void this.game_btn_text.text =Text;  funcția publică getText (): String return this.game_btn_text.text;  funcția publică disable (): void this.mouseEnabled = false; trace ( "YEAH");

Aici introducem clasele de care avem nevoie, setați game_button_text pentru a nu fi selectabil, setat mouseChildren la fals astfel încât
TextField nu poate primi Evenimente Mouse, a adăugat unele metode getter și setter pentru a seta textul pe TextField, și un dezactiva () funcţie
care va dezactiva butoanele de la primirea evenimentelor mouse-ului. Obțineți și setați textul pe game_btn_text.

Pasul 18: Importurile pentru jocul principal

Deschideți "Main.as" pe care ar trebui să îl aveți la dispoziție din partea 1. Adăugați următoarele importuri în partea superioară, sub declarația pachetului:

 importul flash.events.MouseEvent; import flash.net.URLRequest; import flash.net.URLLoader; importul flash.events.Event; import flash.display.Sprite;

Acestea sunt clasele de care vom avea nevoie prin acest tutorial

Pasul 19: Crearea variabilelor

Introduceți codul de mai jos funcția publică se extinde pe MovieClip:

 clasa publică Extensie principală MovieClip // Folosită pentru textul de pe butoanele jocului nostru var alphabetArray = ["A", "B", "C", "D", "E", "F", "G" "," J "," K "," L "," M "," N "," O "," P "," Q "," R "," S "," T " "U", "V", "W", "X", "Y", "Z"]; // Cuvantul original var theWord: String; // presupune cuvântul var guessWord: Array; // O matrice pentru butoanele noastre de joc var gameButtonArray: Array = Array nou (); // Aceasta va conține toate cuvintele var wordList: Array; // Un Sprite desenează hangman-ul în hangman-ul de tip hangmanContainer: Sprite; // Numărul de ghiciri greșite var numWrong: int = 0;

Pasul 20: Crearea butoanelor de joc

Introduceți codul de mai jos funcție publică () constructor:

 funcția privată setupGameButtons (): void var xPos = 150; var yPos = 600; gameButtonArray = Array nou (); pentru (var i: int = 0; i Mai întâi declarăm două variabile xPos și yPos. Acestea păstrează pozițiile inițiale ale GameButtons noastre. Apoi instanțiăm 
gameButtonArray la o nouă matrice. Înainte vom trece prin alphabetArray, creând un nou GameButton. Verificăm dacă eu este egal cu
8 sau 16, iar dacă se mărește valoarea yPos variabil cu 65, și resetați xPos variabil la 150. Atunci verificăm dacă eu este egal
la 24, iar dacă ne creștem yPos de 65 și set xPos la 330. Aceasta ne pune butoanele într-o rețea grea.
 Apoi creăm un GameButton și setați textul la litera actuală din matricea alfabetică utilizând (AlphabetArray [i]) atunci noi
setați butoanele .X și .y prin utilizarea xPos și yPos. Apoi apăsăm butonul în gameButtonArray
adăugați-o pe scenă și adăugați un EventListener la acesta.
 În cele din urmă, noi creștem xPos de 60, astfel încât data viitoare prin buclă, butoanele vor fi eșalonate în loc de unul peste celălalt.
 
  Pasul 21: funcția checkLetter
 Introduceți codul de mai jos setupGameButtons () ați creat mai sus.
  funcția privată checkLetter (e: MouseEvent): void var tempButton: GameButton = e.currentTarget ca GameButton; varLetter = tempButton.getText () pentru aLowerCase (); trace (theLetter); 
 Aici am creat o tempButton, și a scrisoarea care primește textul butoanelor și îl convertește la lowerCase. Apoi urmărim scrisoarea la
panoul de ieșire.
 Adăugați următoarele în cadrul funcție publică ().
  funcția publică Main () setupGameButtons ()
 Continuați și testați filmul și ar trebui să vedeți că butoanele de joc se aliniază frumos pe scenă, iar dacă faceți clic pe ele, litera corectă ar trebui
să fie trasată la panoul de ieșire.
 
  Pasul 22: Încărcarea într-o listă de cuvinte
 Vom încărca într-un fișier extern .txt care are cuvintele folosite în acest joc, separate de un caracter de linie nouă.
 Am descarcat o lista de cuvinte din SourceForge si folosesc "varianta_1-cuvinte.95". Am redenumit-o
"Wordlist.txt".
 Introduceți codul de mai jos checkLetter funcția pe care ați creat-o mai sus.
  funcția doRequest (): void wordList = array nou (); var încărcător: URLLoader = nou URLLoader (); loader.load (noua adresă URLRequest ("wordlist.txt")); loader.addEventListener (Event.COMPLETE, wordListLoaded); 
 Aici am stabilit listă de cuvinte la un nou Array, configurați un URLLoader, încărcați "wordlist.txt" și apoi configurați un Event.COMPLETE ascultător
la încărcător.
 
  Pasul 23: Funcția wordListLoaded
 Adăugați următoarele sub doRequest funcția pe care ați creat-o în pasul de mai sus:
  funcția wordListLoaded (e: Eveniment): void var tempString: String = e.target.data ca String; trace (tempString); 
 Adăugați următoarele la funcție publică ().
  funcția publică Main () setupGameButtons (); doRequest (); 
 Continuați și testați din nou filmul. Ar trebui să vedeți cuvintele din "wordlist.txt" trasate la fereastra de ieșire.
 
  Pasul 24: Crearea cuvântului Guess
 Vom lua cuvântul original și vom înlocui toate personajele cu un "?". Cu toate acestea, unele dintre cuvinte conțin apostrofuri ('), deci le vom înlocui
acolo unde este cazul.
 Adăugați următoarele sub wordListLoaded () funcția pe care ați creat-o în pasul de mai sus:
  funcția createGuessWord (): void guessWord = array nou (); var randomWord = Math.floor (Math.random () * cuvântList.length); theWord = wordList [randomWord]; trace (theWord); theWord = subversiunea Words (0, Word.length-1); pentru (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; 
 Din moment ce șirurile sunt imuabile în AS3, vom stoca fiecare caracter într-o matrice și apoi vom transforma matricea într-un șir. Folosind o matrice putem ușor
schimba fiecare caracter individual.
 Primul lucru pe care îl facem este stabilit guessWord la o nouă matrice. Apoi am ales un element aleatoriu din partea noastră listă de cuvinte matrice și set cuvantul
egal cu elementul aleatoriu din lista de cuvinte, care, la rândul său, ne dă un cuvânt aleatoriu.
 Apoi vom folosi subșir pentru a elimina ultimul caracter al cuvântului. În timpul testelor am observat că cuvintele aveau un spațiu suplimentar la sfârșitul lor. Acest lucru are grijă de acel spațiu suplimentar.
 Apoi buclele cuvantul caracterul după caractere, verificați dacă caracterul curent este un apostrof (') și dacă este setat indexul curent al guessWord
array la un apostrof ('), altfel l-am pus la un "?". 
În cele din urmă, creăm un newGuessWord utilizând matricele construite în a adera metoda care ia elementele unei matrice și le transformă
într-un șir. În cele din urmă, am setat guess_word_text Textul TextField către noul GuessWord.
 
  Pasul 25: Resetați jocul
  resetGame () funcția este locul unde vom reinițializa toate elementele jocului pentru un nou joc. Deocamdată, îl folosim doar pentru a crea ghiciul și pentru a configura butoanele noastre.
 Introduceți codul de mai jos createGuessWord funcție creată în pasul de mai sus.
  funcția resetGame (): void setupGameButtons (); createGuessWord (); 
 Schimbați codul înăuntru funcție publică () la următoarele.
  funcția publică Main () doRequest (); 
 Apoi adăugați următoarea linie la wordListLoaded funcţie.
  funcția wordListLoaded (e: Eveniment): void var tempString: String = e.target.data ca String; wordList = tempString.split ("\ n"); resetGame (); 
 Aici adăugăm cuvintele la listă de cuvinte folosind arborii încorporați Despică() metodă, trecând "\ n" de la cuvintele noastre
sunt separate de chrakters noi, apoi sunăm resetGame funcția pe care am creat-o mai sus.
 Continuați și testați filmul și ar trebui să vedeți că ghiciunea a fost înlocuită cu "?" și "" "acolo unde este cazul.
 
  Pasul 26: Desenarea containerului Hangman
 Nebunul nostru este dinamic desenat folosind API-ul de desen al lui AS3. Primul lucru pe care trebuie să-l facem este să tragem containerul pentru hangman. Introduceți codul următor
sub resetGame () funcţie:
  funcția privată addHangmanContainer (): void hangmanContainer = nou Sprite (); hangmanContainer.x = 180; hangmanContainer.y = 180; hangmanContainer.graphics.lineStyle (3,0x000000); hangmanContainer.graphics.drawRect (0,0,400,400); addChild (hangmanContainer); 
 Aici am setat hangmanContainer la un nou Sprite, setați-l .X și .y proprietăți și utilizați desenul
API pentru a seta tipuri de linii la o linie neagră de 3px. Apoi tragem un dreptunghi folosind drawRect () și adăugați-o pe scenă.
 Adăugați următoarele la resetGame () funcţie:
  funcția resetGame (): void if (hangmanContainer! = null) removeChild (hangmanContainer); hangmanContainer = null;  addHangmanContainer (); setupGameButtons (); createGuessWord (); 
 Mai întâi verificăm să ne asigurăm hangmanContainer nu este egal cu nul. Dacă nu, atunci îl scoatem din scenă și l-am lăsat pe nul, apoi noi
utilizare addHangmanContainer pentru ao adăuga pe scenă. 
Testați filmul și ar trebui să vedeți containerul agățat poziționat bine deasupra butoanelor.
  Pasul 27: Funcția drawHangman ()
  drawHangman () funcția va fi utilizată pentru a desena piesele individuale de hangman în timp ce jocul progresează. Introduceți codul de mai jos
addHangmanContainer () funcţie:
  funcția drawHangman (drawNum: int): void comutator (drawNum) caz 0: drawGallows (); pauză; cazul 1: drawHead (); pauză; cazul 2: drawBody (); pauză; cazul 3: drawArm1 (); pauză; cazul 4: drawArm2 (); pauză; cazul 5: drawLeg1 (); pauză; cazul 6: drawLeg2 (); pauză; 
 Această funcție va lua un parametru int ca parametru și va folosi o instrucțiune de comutare pentru a decide ce parte a hangmanului să deseneze.
  Pasul 28: funcția drawGallows ()
 Următorul cod folosește API-ul pentru desen pentru a desena galajele din interiorul hangmanContainer sprite. Adăugați următoarele sub drawHangman () funcţie.
  funcția 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); 
  Pasul 29: Funcția drawHead ()
 Acest cod este folosit pentru a desena capul hangman.Adăugați codul de mai jos drawGallows () funcţie.
  funcția drawHead (): void hangmanContainer.graphics.drawCircle (180,120,30); 
  Pasul 30: Funcția drawBody ()
 Acest cod trage corpul hangmanului. Adăugați codul următor indică drawHead () funcţie:
  funcția drawBody (): void hangmanContainer.graphics.moveTo (180,150); hangmanContainer.graphics.lineTo (180,300); 
  Pasul 31: Funcțiile drawArm
 Aceste două funcții sunt folosite pentru a desena brațele stângi și drepte. Adăugați următoarele funcții sub drawBody () funcţie:
  funcția drawArm1 (): void hangmanContainer.graphics.moveTo (180,200); hangmanContainer.graphics.lineTo (130,190);  funcția drawArm2 (): void hangmanContainer.graphics.moveTo (180,200); hangmanContainer.graphics.lineTo (230,190)
  Pasul 32: Funcțiile drawLeg
 Aceste două funcții sunt folosite pentru a desena picioarele stângi și drepte. Adăugați următoarele funcții sub drawArm2 () funcţie.
  funcția drawLeg1 (): void hangmanContainer.graphics.moveTo (180,300); hangmanContainer.graphics.lineTo (130,330); hangmanContainer.graphics.lineTo (120,320);  funcția drawLeg2 (): void hangmanContainer.graphics.moveTo (180,300); hangmanContainer.graphics.lineTo (230,330); hangmanContainer.graphics.lineTo (240,320); 
  Pasul 33: Crearea Clipului pentru Clipuri câștigate
 Accesați Insert> New Symbol. Dați-i numele "YouWin" și asigurați-vă că este bifată opțiunea "Export pentru ActionScript" și că clasa este setată la "YouWin"
  Selectați instrumentul Text și asigurați-vă că sunt setate următoarele proprietăți:
  Dimensiune: 14pt
 Culoare: # 00FF00
 
  Trageți un TextField în MovieClip și introduceți cuvintele "YOU WIN !!" în ea.
 Apoi setați următoarele proprietăți pe TextField.
  X; -49.00
 Y: -8.00
 W: 104,00
 H: 19,00
 
  Trebuie să creați o variabilă pentru a țineți YouWin MovieClip astfel încât să introduceți următoarele în partea de jos a declarațiilor de variabile:
  var youwin: YouWin;
  Pasul 34: Crearea filmului de film pe care îl pierdeți
 Accesați Insert> New Symbol. Dați-i numele "YouLose" și asigurați-vă că este bifată opțiunea "Export pentru ActionScript" și că clasa este setată la "YouLose".
  Selectați instrumentul Text și asigurați-vă că sunt setate următoarele proprietăți.
  Dimensiune: 14pt
 Culoare: # FF0000
 
  Trageți un TextField în filmul MovieClip și introduceți cuvintele "TREBUIEȚI!" în ea.
 Setați următoarele proprietăți în TextField
  X; -49.00
 Y: -8.00
 W: 104,00
 H: 19,00
 
  Avem nevoie de o variabilă pentru a țineți YouLose MovieClip, așa că introduceți următoarele în partea de jos a declarației dvs. de variabilă.
  var youlose: YouLose;
  Pasul 35: disableButtons () Funcție
 Adăugați următorul cod de mai jos drawLeg2 () funcţie.
  funcția privată disableButtons (): void pentru (var i: int = 0; i < gameButtonArray.length;i++) gameButtonArray[i].disable();  
 Acest cod pur și simplu trece prin gameButtonArray și dezactivează toate butoanele.
  Pasul 36: Verificare checklist ()
 În acest pas vom termina checkLetter () funcția în care se află inima jocului. Introduceți codul următor
în interiorul checkLetter () pe care ați creat-o mai devreme.
  funcția privată checkLetter (e: MouseEvent): void var tempButton: GameButton = e.currentTarget ca GameButton; varLetter = tempButton.getText () pentru aLowerCase (); var corectGuess: Boolean = false; var newGuessWord; tempButton.removeEventListener (MouseEvent.CLICK, checkLetter); removeChild (tempButton); pentru (var i: int = 0; i  tempButton și scrisoarea variabilele au fost explicate în etapele anterioare. correctGuess este setată la
fals la început, în cazul în care utilizatorul a ales o scrisoare corectă am setat-o la adevărat. newGuessWord este o variabilă temporară pe care o vom folosi pentru a construi noul cuvânt de afișat.
 Apoi, eliminăm EventListener din buton și îl scoatem din scenă.
 Ne străduim cuvantul caracter de caracter și verificați dacă caracterul curent în cuvantul este egal cu scrisoarea, și
dacă este, setăm litera corespunzătoare în guessWord array la scrisoarea.
 Apoi, folosim metoda de îmbinare a clasei String pentru a ne transforma guessWord array într-un String (newGuessWord), și setați guess_word_text la newGuessWord.
 Verificăm dacă correctGuess este falsă, iar dacă ne creștem numWrong și apelați funcția drawHangman care trece numWrong.
 Atunci verificăm dacă newGuessWordM este egal cu cuvantul și dacă este, dezactivați butoanele, instanțiați-ne ai castigat MovieClip, setați-l .x
și .y, adăugați-o pe scenă și apelați TweenLite pentru ao anima cu o onComplete funcţie.
 În sfârșit, verificăm dacă numWrong este egal cu șase și dacă este, ne buclele cuvantul și setați fiecare literă în guessWord
array egal cu caracterul curent din cuvantul. Apoi utilizăm conexiunea așa cum este explicat mai sus și arată cuvântul. Dezactivați butoanele, instanțiați-ne ai pierdut MovieClip,
adăugați-o pe scenă și, din nou, apelați la TweenLite pentru a anima cu un onComplete funcţie.
  Pasul 37: resetTheGame () Funcția
  resetTheGame () funcțiile sunt numite atunci când animațiile din ai castigat și ai pierdut MovieClips sunt terminate. Introduceți codul următor
sub drawLeg2 () funcţie:
  funcția resetTheGame (): void if (youwin! = null) removeChild (youwin); youwin = null;  dacă (youlose! = null) removeChild (youlose); youlose = null;  resetGame (); 
 Această funcție verifică dacă ai castigat și ai pierdut nu sunt nuli și dacă nu sunăm noi removeChild a sterge
ei din scena și le-au pus la zero. În cele din urmă numim resetGame funcţie.
  Pasul 38: Finalizarea resetGame ()
 Trebuie să facem o curățenie finală în resetGame funcţie. Adăugați următorul cod la resetGame () funcţie:
  resetGame (): void numWrong = 0; dacă (gameButtonArray.length> 0) pentru (var i: int = 0; i Resetăm mai întâi numWrong la 0, apoi buclele prin gameButtonArray, verificați dacă butoanele sunt pe scenă și dacă acestea sunt
le eliminăm.
  Pasul 39: Adăugarea listei de cuvinte
 Va trebui să includeți "wordlist.txt" în fișierele incluse. Deci, du-te la setările "AIR pentru IOS", iar în tab-ul "General" faceți clic pe butonul "+"
și navigați la "wordlist.txt" adăugându-l la fișierele incluse.
  Acest lucru completează jocul nostru! Următorul pas este să publicați pentru App Store și încărcați prin iTunes Connect.
  Pasul 40: Pregătirea pentru App Store
 Mai întâi va trebui să generați o „Distribuție“ Profilul profilului. Urmați pașii din Pasul 4 din prima parte a tutorialului, dar
asigurați-vă că sunteți sub "Distribuție" în loc de dezvoltare.
 Apoi va trebui să descărcați „Distribuție“ și transformați-o într-un .P12 urmând exemplul din pasul 5 din prima parte a acestei serii.
 Apoi, reveniți la "Air For IOS" și sub fila "DEPLOYMENT", schimbați devoluția .P12 cu distribuția .P12 și schimbați fișierul de furnizare devloper
cu profilul distributuion, asigurați-vă că bifați "Deployment - Apple App Store" și faceți clic pe publish.
 În cele din urmă, conectați-vă la iTunes Connect, accesați "Gestionați aplicațiile" și adăugați o nouă aplicație, urmați instrucțiunile, încărcați aplicația cu "App Loader".
 Concluzie
 Această serie a dat o bună prezentare dezvoltării mobile cu Flash CS5.5. Sperăm că ați învățat ceva util și vă mulțumesc că ați citit! Dacă doriți să vedeți mai multe conținut de dezvoltare Flash CS 5.5 iOS, lăsați un comentariu mai jos!



		
			
	   
	




Cod