Costruire un'app per iPad Hangman con Flash - Programmazione del gioco

Benvenuti alla seconda parte della nostra serie di tutorial sulla creazione di un gioco Hangman per iPad con Flash. Mentre il primo tutorial si concentrava principalmente sull'ottimizzazione del programma per la codifica di app iOS con Flash, questo tutorial si focalizzerà sull'ActiveScript e sulla logica di gioco necessaria per programmare realmente l'hangman. Iniziamo!

Da dove siamo partiti?

Nella prima parte di questa serie di tutorial, abbiamo esaminato il processo di provisioning dei dispositivi, aggiungendo un'icona di app e una schermata di caricamento e come sincronizzare l'app con l'iPad durante lo sviluppo. In questa parte del tutorial, termineremo la codifica del gameplay.

Aggiungi il progetto TweenLite

Questo tutorial incorporerà il progetto TweenLite, quindi vai avanti e prendine una copia. Dopo averlo scaricato, estrailo e aggiungi la cartella "com" alla stessa cartella in cui si trova il tuo progetto hangman. Infine, aggiungi quanto segue insieme al resto delle importazioni del tuo progetto:

 import com.greensock.TweenLite;

Passaggio 15: aggiunta di un campo di testo di Guessword

Seleziona lo strumento di testo, assicurati che il campo di testo non sia selezionabile e che siano impostate le seguenti proprietà:

Dimensione: 45pt
Colore: # 0000FF
Allinea al centro

Disegna un campo di testo sullo stage e imposta le seguenti proprietà su di esso:

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

Dagli il nome dell'istanza "guess_word_text".

Passaggio 16: creazione dei pulsanti di gioco

Seleziona lo strumento Ovale e assicurati che le seguenti proprietà siano impostate su di esso:

Colore riempimento: # 000000
Colore tratto: # 0000FF
Corsa: 3,00
Stile: solido

Tieni premuto "Shift" per conformare l'ovale a un cerchio e trascinare un cerchio sul palco.

Con lo "Strumento di selezione" trascinare attorno al cerchio per selezionare sia il riempimento che il tratto. Puoi dire che sono entrambi selezionati da un "Tratteggio".

Con sia il riempimento che il tratto selezionati danno al cerchio le seguenti proprietà:

V .: 51,00
H: 51,00

Ora fai clic con il tasto destro sul cerchio e scegli "Converti in simbolo". Dagli il nome "GameButton", assicurati che "Export For Actionscript" sia selezionato e
che la classe è impostata su "GameButton".

Ora fai doppio clic su di esso per andare in modalità di modifica. Seleziona lo strumento di testo e assicurati che siano impostate le seguenti proprietà:

Colore bianco
Dimensione: 20pt

Trascina un campo di testo in MovieClip e imposta le seguenti proprietà su di esso:

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

Assicurati che TextField non sia selezionabile:

Dare a TextField il nome dell'istanza "game_btn_text".

Ora elimina il cerchio dal palco.

Passaggio 17: Classe del pulsante di gioco

Vai su File> Nuovo e scegli "File Actionscript". Salva questo come "GameButton.as" nella stessa cartella del tuo "Hangman.fla".

Inserisci il codice seguente nel "GameButton.as".

 package import flash.text.TextField; import flash.display.MovieClip; public class GameButton estende 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; traccia ( "Sì");

Qui importiamo le classi di cui abbiamo bisogno, impostiamo il game_button_text non essere selezionabile, impostare mouseChildren a falso così il
TextField non può ricevere eventi Mouse, aggiunto alcuni metodi getter e setter per impostare il testo sul TextField e un disattivare() funzione
che disabiliterà i pulsanti dalla ricezione di eventi del mouse. Ottieni e imposta il testo sul game_btn_text.

Passaggio 18: Importazioni per il gioco principale

Apri "Main.as" che dovresti avere a disposizione dalla parte 1. Aggiungi le seguenti importazioni in alto, sotto la dichiarazione del pacchetto:

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

Queste sono le classi che avremo bisogno di questo tutorial

Passaggio 19: creazione delle variabili

Inserisci il codice seguente appena sotto funzione pubblica Main estende MovieClip:

 public class Main estende MovieClip // Utilizzato per i campi di testo sui nostri pulsanti di gioco 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"]; // La parola originale var theWord: String; // La parola indovina var guessWord: Array; // Un array per i nostri pulsanti di gioco var gameButtonArray: Array = new Array (); // Questo contiene tutte le parole var wordList: Array; // A Sprite disegniamo il boia in var hangmanContainer: Sprite; // Number of Wrong Guess var numWrong: int = 0;

Passaggio 20: creazione dei pulsanti di gioco

Inserisci il seguente codice sotto il funzione pubblica Main () costruttore:

 private function setupGameButtons (): void var xPos = 150; var yPos = 600; gameButtonArray = new Array (); per (var i: int = 0; i Per prima cosa dichiariamo due variabili xPos e yPos. Questi tengono le posizioni iniziali dei nostri GameButtons. Quindi istanziamo il 
gameButtonArray a una nuova matrice. Quindi passiamo attraverso il alphabetArray, creando un nuovo GameButton. Controlliamo se io è uguale a
8 o 16, e se lo è aumentiamo il yPos variabile per 65, e resettare il xPos variabile a 150. Quindi controlliamo se io è uguale
a 24, e se lo siamo aumentiamo yPos da 65 e impostare xPos a 330. Questo espone i nostri pulsanti in una bella griglia.
 Quindi creiamo a GameButton e imposta il suo testo alla lettera corrente nell'array alfabetico usando (AlphabetArray [i]) noi allora
imposta i pulsanti .X e .y usando xPos e yPos. Abbiamo quindi premere il pulsante nel gameButtonArray
aggiungilo allo stage e aggiungilo ad EventListener.
 Infine, incrementiamo il xPos per 60 quindi la prossima volta attraverso il ciclo i pulsanti saranno sfalsati anziché uno sopra l'altro.
 
  Passo 21: Funzione checkLetter
 Inserisci il seguente codice sotto il setupGameButtons () hai creato sopra.
  private function checkLetter (e: MouseEvent): void var tempButton: GameButton = e.currentTarget come GameButton; var theLetter = tempButton.getText (). toLowerCase (); trace (theLetter); 
 Qui installiamo a tempButton, e a la lettera variabile che ottiene il testo dei pulsanti e lo converte in lowerCase. Quindi tracciamo la lettera a
il pannello di output.
 Aggiungi il seguente all'interno del funzione pubblica Main ().
  funzione pubblica Main () setupGameButtons ()
 Vai avanti e prova il film e dovresti vedere i pulsanti di gioco ben allineati sul palco, e se clicchi su di essi, la lettera corretta dovrebbe
essere tracciato al pannello di output.
 
  Passaggio 22: caricamento in un elenco di parole
 Verrà caricato in un file .txt esterno con le parole utilizzate in questo gioco, separate da un carattere di nuova riga.
 Ho scaricato un elenco di parole da SourceForge e sto usando "variant_1-words.95". L'ho ribattezzato
"Wordlist.txt".
 Inserisci il seguente codice sotto il checkLetter funzione che hai creato sopra.
  function doRequest (): void wordList = new Array (); var loader: URLLoader = new URLLoader (); loader.load (new URLRequest ("wordlist.txt")); loader.addEventListener (Event.COMPLETE, wordListLoaded); 
 Qui ci ambientiamo elenco di parole in un nuovo array, impostare un URLLoader, caricare "wordlist.txt", quindi configurare un Event.COMPLETE ascoltatore
al caricatore.
 
  Passaggio 23: Funzione wordListLoaded
 Aggiungi il seguente sotto il doRequest funzione creata nel passaggio precedente:
  function wordListLoaded (e: Event): void var tempString: String = e.target.data as String; trace (tempString); 
 Aggiungi il seguente a funzione pubblica Main ().
  funzione pubblica Main () setupGameButtons (); doRequest (); 
 Vai avanti e prova di nuovo il film. Dovresti vedere le parole da "wordlist.txt" tracciate alla finestra di output.
 
  Passaggio 24: creazione della parola indovina
 Prenderemo la parola originale e sostituiremo tutti i caratteri con un "?". Tuttavia, alcune delle parole contengono apostrofi ('), quindi le sostituiremo
ove opportuno.
 Aggiungi il seguente sotto il wordListLoaded () funzione creata nel passaggio precedente:
  function createGuessWord (): void guessWord = new Array (); var randomWord = Math.floor (Math.random () * wordList.length); theWord = wordList [randomWord]; traccia (theWord); theWord = theWord.substring (0, theWord.length-1); per (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; 
 Poiché le stringhe sono immutabili in AS3, memorizzeremo ogni carattere in una matrice e quindi convertiremo la matrice in una stringa. Usando un array possiamo facilmente
cambia ogni singolo personaggio.
 La prima cosa che facciamo è impostare guessWord a una nuova matrice. Abbiamo quindi scelto un elemento casuale dal nostro elenco di parole array e set la parola
uguale all'elemento casuale dalla lista di parole, che a sua volta ci dà una parola a caso.
 Quindi usiamo il sottostringa metodo per tagliare l'ultimo carattere della parola. Durante i test ho notato che le parole avevano uno spazio in più alla fine di esse. Questo si prende cura di quello spazio extra.
 Quindi passiamo in rassegna la parola carattere per carattere, controlla se il carattere corrente è un apostrofo ('), e se è impostato l'indice corrente del guessWord
array su un apostrofo ('), altrimenti lo impostiamo su "?". 
Finalmente, creiamo a newGuessWord usando gli array costruiti nel aderire metodo che prende gli elementi di un array e li trasforma
in una stringa. Alla fine, impostiamo il guess_word_text TextCollega il testo alla nuova GuessWord.
 
  Passaggio 25: reimposta il gioco
 Il RESETgame () la funzione è dove ripristineremo tutti i nostri elementi di gioco per un nuovo gioco. Per ora lo stiamo usando solo creando guessWord e impostando i nostri pulsanti.
 Inserisci il seguente codice sotto il createGuessWord funzione creata nel passaggio precedente.
  function resetGame (): void setupGameButtons (); createGuessWord (); 
 Cambia il codice all'interno funzione pubblica Main () al seguente.
  funzione pubblica Main () doRequest (); 
 Quindi aggiungere la seguente riga al wordListLoaded funzione.
  function wordListLoaded (e: Event): void var tempString: String = e.target.data as String; wordList = tempString.split ("\ n"); RESETgame (); 
 Qui aggiungiamo le parole al elenco di parole array usando le stringhe integrate Diviso() metodo, passando "\ n" dalle nostre parole
sono separati da caratteri di nuova linea, quindi chiamiamo il RESETgame funzione che abbiamo creato sopra.
 Vai avanti e prova il film e dovresti vedere che guessWord è stato sostituito da "?" e "" "dove appropriato.
 
  Passo 26: Disegnare il contenitore dell'impiccato
 Il nostro boia è disegnato dinamicamente usando l'API di disegno di AS3. La prima cosa che dobbiamo fare è disegnare il contenitore per il boia. Inserisci il seguente codice
sotto il RESETgame () funzione:
  funzione privata addHangmanContainer (): void hangmanContainer = new Sprite (); hangmanContainer.x = 180; hangmanContainer.y = 180; hangmanContainer.graphics.lineStyle (3,0x000000); hangmanContainer.graphics.drawRect (0,0,400,400); addChild (hangmanContainer); 
 Qui impostiamo il hangmanContainer a un nuovo Sprite, impostalo .X e .y proprietà e utilizzare il disegno
API per impostare il lineStyle a una linea nera 3px. Quindi disegniamo un rettangolo usando il drawRect () metodo e aggiungerlo al palco.
 Aggiungi il seguente al RESETgame () funzione:
  function resetGame (): void if (hangmanContainer! = null) removeChild (hangmanContainer); hangmanContainer = null;  addHangmanContainer (); setupGameButtons (); createGuessWord (); 
 Per prima cosa, assicuriamoci hangmanContainer non è uguale a null. Se non lo fa, lo rimuoviamo dallo stage e lo impostiamo su null, quindi noi
uso addHangmanContainer per aggiungerlo al palco. 
Prova il film e dovresti vedere il contenitore dell'impiccato posizionato bene sopra i pulsanti.
  Passaggio 27: drawHangman () Function
 Il drawHangman () la funzione verrà utilizzata per disegnare i singoli pezzi del boia mentre il gioco procede. Inserisci il seguente codice sotto il
addHangmanContainer () funzione:
  function drawHangman (drawNum: int): void switch (drawNum) caso 0: drawGallows (); rompere; caso 1: drawHead (); rompere; caso 2: drawBody (); rompere; caso 3: drawArm1 (); rompere; caso 4: drawArm2 (); rompere; caso 5: drawLeg1 (); rompere; caso 6: drawLeg2 (); rompere; 
 Questa funzione prende un int come parametro e usa un'istruzione switch per decidere quale parte del boia deve disegnare.
  Passaggio 28: Funzione drawGallows ()
 Il seguente codice usa l'API di disegno per disegnare la forca all'interno dello sprite di hangmanContainer. Aggiungi il seguente sotto il drawHangman () funzione.
  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); 
  Passaggio 29: drawHead () Function
 Questo codice è usato per disegnare la testa del boia. Aggiungi il seguente codice sotto il drawGallows () funzione.
  function drawHead (): void hangmanContainer.graphics.drawCircle (180,120,30); 
  Passaggio 30: DrawBody () Function
 Questo codice disegna il corpo del boia. Aggiungi il seguente codice a drawHead () funzione:
  function drawBody (): void hangmanContainer.graphics.moveTo (180,150); hangmanContainer.graphics.lineTo (180.300); 
  Passaggio 31: funzioni DrawArm
 Queste due funzioni sono utilizzate per disegnare le braccia sinistra e destra. Aggiungi le seguenti funzioni sotto il drawBody () funzione:
  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)
  Passo 32: funzioni drawLeg
 Queste due funzioni sono utilizzate per disegnare le gambe sinistra e destra. Aggiungi le seguenti funzioni sotto il drawArm2 () funzione.
  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); 
  Passaggio 33: creazione del filmato You Win
 Vai a Inserisci> Nuovo simbolo. Dagli il nome YouWin e assicurati che "Export for ActionScript" sia selezionato e che la classe sia impostata su "YouWin"
  Seleziona lo strumento di testo e assicurati che siano impostate le seguenti proprietà:
  Dimensioni: 14pt
 Colore: # 00FF00
 
  Trascina un campo di testo nella MovieClip e inserisci le parole "VINCI !!" dentro.
 Quindi impostare le seguenti proprietà sul TextField.
  X; -49,00
 Y: -8,00
 W: 104,00
 H: 19.00
 
  Abbiamo bisogno di creare una variabile per mantenere il nostro YouWin MovieClip in modo da inserire quanto segue nella parte inferiore delle dichiarazioni delle variabili:
  var youwin: YouWin;
  Passaggio 34: creazione del filmato di You Lose
 Vai a Inserisci> Nuovo simbolo. Dagli il nome YouLose e assicurati che "Export for ActionScript" sia selezionato e che la classe sia impostata su "YouLose".
  Seleziona lo strumento di testo e assicurati che siano impostate le seguenti proprietà.
  Dimensioni: 14pt
 Colore: # FF0000
 
  Trascina un campo di testo nella MovieClip e inserisci le parole "TI PERDI !!" dentro.
 Imposta le seguenti proprietà nel campo di testo
  X; -49,00
 Y: -8,00
 W: 104,00
 H: 19.00
 
  Abbiamo bisogno di una variabile per contenere il YouLose MovieClip, quindi inserisci quanto segue nella parte inferiore della dichiarazione delle variabili.
  var youlose: YouLose;
  Passaggio 35: Funzione disableButtons ()
 Aggiungi il seguente codice sotto il drawLeg2 () funzione.
  funzione privata disableButtons (): void for (var i: int = 0; i < gameButtonArray.length;i++) gameButtonArray[i].disable();  
 Questo codice scorre semplicemente attraverso il gameButtonArray e disabilita tutti i pulsanti.
  Passaggio 36: Finishing checkLetter ()
 In questo passaggio finiremo il checkLetter () funzione che è dove si trova il cuore del gioco. Inserisci il seguente codice
dentro il checkLetter () funzione creata in precedenza.
  private function checkLetter (e: MouseEvent): void var tempButton: GameButton = e.currentTarget come GameButton; var theLetter = tempButton.getText (). toLowerCase (); var correctGuess: Boolean = false; var newGuessWord; tempButton.removeEventListener (MouseEvent.CLICK, checkLetter); removeChild (tempButton); per (var i: int = 0; i Il tempButton e la lettera le variabili sono state spiegate nei passaggi precedenti. Il correctGuess la variabile è impostata su
falso in un primo momento, se l'utente ha scelto una lettera corretta abbiamo impostato su true. Il newGuessWord è una variabile temporanea che useremo per costruire la nuova parola da visualizzare.
 Successivamente, rimuovere EventListener dal pulsante e rimuoverlo dallo stage.
 Passiamo attraverso la parola carattere per carattere e verificare se il carattere corrente in la parola è uguale a la lettera, e
se lo è, impostiamo la lettera appropriata in guessWord matrice a la lettera.
 Quindi usiamo il metodo di join della String Class per trasformare il nostro guessWord array in una stringa (newGuessWord) e impostare il guess_word_text a newGuessWord.
 Controlliamo se correctGuess è falso, e se lo è, incrementiamo numWrong e chiama la nostra funzione drawHangman che passa numWrong.
 Quindi controlliamo se newGuessWordM è uguale a la parola e se lo è, disabilitiamo i pulsanti, istanziamo il nostro hai vinto MovieClip, imposta il suo .x
e .y, aggiungilo al palco e chiama TweenLite per animarlo con un onComplete funzione.
 Infine, controlliamo se numWrong è uguale a sei e se lo è, passiamo attraverso la parola e imposta ogni lettera nel guessWord
array uguale al carattere corrente in la parola. Quindi usiamo join come spiegato sopra e mostriamo la parola. Disabilitiamo i pulsanti, istanziamo il nostro hai perso Un filmato,
aggiungilo al palco e ancora una volta chiama TweenLite per animare con un onComplete funzione.
  Passaggio 37: resetTheGame () Function
 Il resetTheGame () le funzioni sono chiamate quando le animazioni del hai vinto e hai perso I MovieClip sono finiti. Inserisci il seguente codice
sotto il drawLeg2 () funzione:
  function resetTheGame (): void if (youwin! = null) removeChild (youwin); youwin = null;  if (youlose! = null) removeChild (youlose); youlose = null;  resetGame (); 
 Questa funzione controlla se il hai vinto e hai perso non sono nulli, e se non lo sono chiamiamo removeChild rimuovere
li dal palcoscenico e li metti a zero. Alla fine chiamiamo il RESETgame funzione.
  Passaggio 38: Finitura resetGame ()
 Dobbiamo fare un po 'di pulizia finale nel RESETgame funzione. Aggiungi il seguente codice al RESETgame () funzione:
  function resetGame (): void numWrong = 0; if (gameButtonArray.length> 0) for (var i: int = 0; i Per prima cosa resettiamo numWrong a 0, quindi passiamo attraverso il gameButtonArray, controlla se i pulsanti sono sul palco, e se loro
li rimuoviamo.
  Passaggio 39: aggiunta di WordList
 Dovrai includere "wordlist.txt" nei file inclusi. Quindi vai alle impostazioni "AIR for IOS" e nella scheda "Generale" fai clic sul pulsante "+"
e vai al "wordlist.txt" aggiungendolo ai file inclusi.
  Questo completa il nostro gioco! Il prossimo passo è pubblicare per l'App Store e caricare tramite iTunes Connect.
  Passaggio 40: Preparazione per l'App Store
 Prima dovrai generare un "Distribuzione" Profilo di provisioning. Seguire i passaggi del punto 4 della prima parte del tutorial, ma
assicurati di essere in "Distribuzione" invece di sviluppo.
 Successivamente sarà necessario scaricare il "Distribuzione" certificato e convertirlo in un .P12 seguendo l'esempio del passaggio 5 della prima parte di questa serie.
 Quindi, torna a "Air For IOS" e nella scheda "DEPLOYMENT", scambia lo sviluppo .P12 con la distribuzione .P12 e sostituisci il file di provisioning di devloper
con il profilo di distribuzione, assicurati di spuntare "Distribuzione - App Store di Apple" e fai clic su Pubblica.
 Infine, accedi a iTunes Connect, vai su "Gestisci applicazioni" e aggiungi una nuova app, segui le istruzioni, carica la tua app con "Caricatore app".
 Conclusione
 Questa serie ha dato una buona introduzione allo sviluppo mobile con Flash CS5.5. Spero tu abbia imparato qualcosa di utile e ti ringrazio per aver letto! Se vuoi vedere più contenuti di sviluppo per iOS di Flash CS 5.5, lascia un commento qui sotto!



		
			
	   
	




Codice