Bouw een Hangman iPad-app met Flash - programmeergameplay

Welkom bij het tweede deel van onze tutorialserie over het bouwen van een Galgje-spel voor de iPad met Flash. Hoewel de eerste zelfstudie voornamelijk was gericht op het instellen van iOS-apps om code te coderen met Flash, zal deze zelfstudie zich richten op het ActionScript en de spellogica die nodig is om Hangman daadwerkelijk te programmeren. Laten we beginnen!

Waar we gebleven zijn?

In het eerste deel van deze tutorialserie hebben we het apparaatconfiguratieproces doorlopen, een app-pictogram en laadscherm toegevoegd en de app tijdens de ontwikkeling gesynchroniseerd met uw iPad. In dit deel van de tutorial beëindigen we het coderen van de gameplay.

Voeg het TweenLite-project toe

In deze zelfstudie wordt het TweenLite-project opgenomen, dus ga je gang en neem een exemplaar. Als je het eenmaal hebt gedownload, pak je het uit en voeg je de map "com" toe aan dezelfde map waarin je beul-project zich bevindt. Voeg ten slotte het volgende toe samen met de rest van je projectimport:

 import com.greensock.TweenLite;

Stap 15: Een Guessword-tekstveld toevoegen

Selecteer het tekstgereedschap, zorg dat het TextField niet kan worden geselecteerd en dat de volgende eigenschappen zijn ingesteld:

Grootte: 45pt
Kleur: # 0000FF
Uitlijnen: centreren

Teken een TextField uit op het podium en stel de volgende eigenschappen in:

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

Geef het de instantienaam "guess_word_text".

Stap 16: De spelknoppen maken

Selecteer het ovaalgereedschap en zorg ervoor dat de volgende eigenschappen zijn ingesteld:

Vulkleur: # 000000
Lijnkleur: # 0000FF
Beroerte: 3,00
Stijl: vast

Houd "Shift" ingedrukt om het ovaal in een cirkel te passen en een cirkel naar het werkgebied te slepen.

Sleep met het "Selectiehulpmiddel" rond de cirkel om zowel de vulling als de streek te selecteren. Je kunt zien dat ze allebei geselecteerd zijn door een "Hatch-patroon".

Als zowel de vulling als de streek is geselecteerd, geeft u de cirkel de volgende eigenschappen:

W: 51,00
H: 51,00

Klik nu met de rechtermuisknop op de cirkel en kies "Converteren naar symbool". Geef het de naam "GameButton", zorg ervoor dat "Exporteren voor Actionscript" is aangevinkt en
dat de klasse is ingesteld op "GameButton".

Dubbelklik er nu op om naar de bewerkmodus te gaan. Selecteer het tekstgereedschap en zorg dat de volgende eigenschappen zijn ingesteld:

Kleur wit
Grootte: 20pt

Sleep een TextField naar de MovieClip en stel de volgende eigenschappen in:

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

Zorg ervoor dat het TextField niet selecteerbaar is:

Geef het TextField de instantienaam "game_btn_text".

Schrap nu de Cirkel van het podium.

Stap 17: Spelknoppenklasse

Ga naar Bestand> Nieuw en kies "Actionscript File". Sla deze op als "GameButton.as" in dezelfde map als je "Hangman.fla".

Voer de volgende code in de "GameButton.as" in.

 pakket import flash.text.TextField; import flash.display.MovieClip; openbare klasse GameButton breidt MovieClip uit openbare functie GameButton () this.game_btn_text.selectable = false; this.mouseChildren = false;  public function setText (theText: String): void this.game_btn_text.text = theText;  openbare functie getText (): String return this.game_btn_text.text;  public function disable (): void this.mouseEnabled = false; trace ( "JA");

Hier importeren we de klassen die we nodig hebben, stel de game_button_text om niet selecteerbaar te zijn, in te stellen mouseChildren onwaar dus de
TextField kan Mouse Events niet ontvangen, enkele methoden voor getter en setter toevoegen om de tekst in het TextField in te stellen, en een uitschakelen () functie
die ervoor zorgt dat de knoppen geen muisgebeurtenissen meer ontvangen. Zoek en zet de tekst op de game_btn_text.

Stap 18: Import voor het hoofdspel

Open "Main.as" die u beschikbaar zou moeten hebben bij deel 1. Voeg de volgende import toe aan de bovenkant, onder de pakketverklaring:

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

Dit zijn de lessen die we in deze les nodig zullen hebben

Stap 19: De variabelen maken

Voer de onderstaande code net onder in openbare functie Main breidt MovieClip uit:

 public class Main breidt MovieClip uit // Gebruikt voor de TextFields op onze spelknoppen 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"]; // Het oorspronkelijke woord var theWord: String; // De gissing Word var guessWord: Array; // Een array voor onze gameknoppen var gameButtonArray: Array = new Array (); // Dit bevat alle woorden var wordList: Array; // A Sprite we the hangman into var hangmanContainer: Sprite; // Aantal verkeerde schattingen var numWrong: int = 0;

Stap 20: De spelknoppen maken

Voer de volgende code onder de openbare functie Hoofd () constructor:

 private function setupGameButtons (): void var xPos = 150; var yPos = 600; gameButtonArray = new Array (); for (var i: int = 0; i We verklaren eerst twee variabelen xpos en YPOS. Deze bevatten de beginposities van onze GameButtons. We instantiëren het 
gameButtonArray naar een nieuwe array. Vervolgens doorlopen we de alphabetArray, een nieuwe GameButton maken. We controleren of ik is gelijk aan
8 of 16, en als dat het geval is, verhogen we de YPOS verander met 65 en reset de xpos variabel tot 150. We controleren dan of ik is gelijk
tot en met 24, en als dat het geval is, worden we verhoogd YPOS bij 65 en instellen xpos tot 330. Dit legt onze knoppen in een mooi raster.
 We maken vervolgens een GameButton en stel de tekst in op de huidige letter in de alfabetarray met behulp van (AlphabetArray [i]) Wij dan
stel de knoppen in .X en .Y door het gebruiken van xpos en YPOS. Vervolgens duwen we de knop in de gameButtonArray
voeg het toe aan het podium en voeg er een EventListener aan toe.
 Als laatste verhogen we de xpos door 60 dus de volgende keer door de lus zullen de knoppen verspringen in plaats van op elkaar.
 
  Stap 21: checkLetter-functie
 Voer de volgende code onder de setupGameButtons () je hebt hierboven gemaakt.
  private functie checkLetter (e: MouseEvent): void var tempButton: GameButton = e.currentTarget as GameButton; var theLetter = tempButton.getText (). toLowerCase (); trace (theLetter); 
 Hier hebben we een opgezet tempButton, en een de brief variabele die de tekst van de knoppen krijgt en converteert naar lowerCase. Dan traceren we de brief naar
het uitvoerpaneel.
 Voeg het volgende toe binnen de openbare functie Hoofd ().
  public function Main () setupGameButtons ()
 Ga je gang en test de film en je zou de spelknoppen mooi op het podium moeten zien uitkomen, en als je erop klikt, moet de juiste letter
teruggevoerd naar het uitvoerpaneel.
 
  Stap 22: in een woordenlijst laden
 We laden in een extern txt-bestand met de woorden die in dit spel worden gebruikt, gescheiden door een nieuwlijnteken.
 Ik heb een woordenlijst gedownload van SourceForge en gebruik de "variant_1-words.95". Ik gaf het een nieuwe naam
"Wordlist.txt".
 Voer de volgende code onder de checkLetter functie die u hierboven hebt gecreëerd.
  function doRequest (): void wordList = new Array (); var loader: URLLoader = new URLLoader (); loader.load (nieuwe URLRequest ("wordlist.txt")); loader.addEventListener (Event.COMPLETE, wordListLoaded); 
 Hier gaan we zitten woordenlijst naar een nieuwe array, stel een URLLoader in, laad de "woordenlijst.txt" en stel vervolgens een Event.COMPLETE luisteraar
naar de loader.
 
  Stap 23: wordListLoaded-functie
 Voeg het volgende toe onder de doRequest functie die je in de bovenstaande stap hebt gemaakt:
  function wordListLoaded (e: Event): void var tempString: String = e.target.data as String; trace (tempString); 
 Voeg het volgende toe aan openbare functie Hoofd ().
  public function Main () setupGameButtons (); doRequest (); 
 Ga je gang en test de film opnieuw. Je zou de woorden uit "wordlist.txt" terug moeten zien in het outputvenster.
 
  Stap 24: Het Guess-woord maken
 We nemen het oorspronkelijke woord en vervangen alle tekens door een "?". Sommige woorden bevatten echter apostrofs ('), dus we zullen die vervangen
waar passend.
 Voeg het volgende toe onder de wordListLoaded () functie die je in de bovenstaande stap hebt gemaakt:
  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; 
 Omdat Strings onveranderlijk zijn in AS3, zullen we elk karakter in een array opslaan en vervolgens de array in een string converteren. Door een array te gebruiken, kunnen we eenvoudig
verander elk individueel karakter.
 Het eerste wat we doen is instellen guessWord naar een nieuwe array. We kozen vervolgens een willekeurig element uit onze woordenlijst array en set het woord
gelijk aan het willekeurige element uit de woordenlijst, wat ons op zijn beurt een willekeurig woord geeft.
 Vervolgens gebruiken we de substring methode om het laatste teken van het woord af te hakken. Tijdens het testen zag ik dat de woorden aan het einde van de tekst een extra spatie hadden. Dit zorgt voor die extra ruimte.
 We doorlopen vervolgens het woord teken voor teken, controleer of het huidige teken een apostrof is ('), en als dit het geval is, stellen we de huidige index van de guessWord
array naar een apostrof ('), anders zetten we het op een "?". 
Eindelijk maken we een newGuessWord door de arrays te gebruiken die in de toetreden methode die de elementen van een array neemt en deze omzet
in een string. Ten slotte hebben we de guess_word_text TextField's tekst naar het nieuwe GuessWord.
 
  Stap 25: Spel opnieuw instellen
 De resetGame () De functie is waar we al onze spelelementen zullen resetten voor een nieuwe game. Voor nu gebruiken we het gewoon om het guessWord te maken en onze knoppen in te stellen.
 Voer de volgende code onder de createGuessWord functie die u in de bovenstaande stap hebt gemaakt.
  function resetGame (): void setupGameButtons (); createGuessWord (); 
 Wijzig de code in openbare functie Hoofd () Naar het volgende.
  public function Main () doRequest (); 
 Voeg vervolgens de volgende regel toe aan de wordListLoaded functie.
  function wordListLoaded (e: Event): void var tempString: String = e.target.data as String; wordList = tempString.split ("\ n"); resetGame (); 
 Hier voegen we de woorden toe aan de woordenlijst array met behulp van de ingebouwde snaren split () methode, doorgeven in "\ n" sinds onze woorden
worden gescheiden door newline chracters, dan noemen we de resetGame functie die we hierboven hebben gecreëerd.
 Ga je gang en test de film en je zou moeten zien dat guessWord is vervangen door "?" en "" indien nodig.
 
  Stap 26: De beul-container tekenen
 Onze galgje wordt dynamisch getekend met de teken-API van AS3. Het eerste wat we moeten doen is de container voor de beul tekenen. Voer de volgende code in
onder de resetGame () functie:
  private function 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); 
 Hier hebben we de hangmanContainer naar een nieuwe Sprite, stel het in .X en .Y eigenschappen en gebruik de tekening
API om de lineStyle naar een 3px zwarte lijn. Vervolgens tekenen we een rechthoek met behulp van de drawRect () methode en voeg het toe aan het podium.
 Voeg het volgende toe aan de resetGame () functie:
  function resetGame (): void if (hangmanContainer! = null) removeChild (hangmanContainer); hangmanContainer = null;  addHangmanContainer (); setupGameButtons (); createGuessWord (); 
 We controleren eerst om ervoor te zorgen hangmanContainer is niet gelijk aan nul. Als dat niet het geval is, verwijderen we het uit het werkgebied en stellen het in op null, dan wij
gebruik addHangmanContainer om het toe te voegen aan het podium. 
Test de film en je zou de beulcontainer mooi boven de knoppen moeten zien staan.
  Stap 27: drawHangman () Functie
 De drawHangman () functie zal worden gebruikt om de individuele beulstukken te tekenen terwijl het spel vordert. Voer de volgende code onder de
addHangmanContainer () functie:
  function drawHangman (drawNum: int): void switch (drawNum) case 0: drawGallows (); breken; geval 1: drawHead (); breken; geval 2: drawBody (); breken; geval 3: drawArm1 (); breken; geval 4: drawArm2 (); breken; geval 5: drawLeg1 (); breken; geval 6: drawLeg2 (); breken; 
 Deze functie neemt een int als een parameter en gebruikt een switch-instructie om te beslissen welk deel van de beul moet tekenen.
  Stap 28: drawGallows () Functie
 De volgende code gebruikt de teken-API om de galg in de spinner van de hangmanContainer te tekenen. Voeg het volgende toe onder de drawHangman () functie.
  functie 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); 
  Stap 29: drawHead () Functie
 Deze code wordt gebruikt om de kop van de beul te tekenen. Voeg de volgende code toe onder de drawGallows () functie.
  functie drawHead (): void hangmanContainer.graphics.drawCircle (180,120,30); 
  Stap 30: drawBody () Functie
 Deze code trekt het lichaam van de beul. Voeg de volgende code toe onder de drawHead () functie:
  functie drawBody (): void hangmanContainer.graphics.moveTo (180,150); hangmanContainer.graphics.lineTo (180.300); 
  Stap 31: DrawArm-functies
 Deze twee functies worden gebruikt om de linker- en rechterarmen te tekenen. Voeg de volgende functies toe onder de drawBody () functie:
  functie drawArm1 (): void hangmanContainer.graphics.moveTo (180.200); hangmanContainer.graphics.lineTo (130.190);  functie drawArm2 (): void hangmanContainer.graphics.moveTo (180.200); hangmanContainer.graphics.lineTo (230,190)
  Stap 32: DrawLeg-functies
 Deze twee functies worden gebruikt om de linker- en rechterpoten te tekenen. Voeg de volgende functies toe onder de drawArm2 () functie.
  functie drawLeg1 (): void hangmanContainer.graphics.moveTo (180,300); hangmanContainer.graphics.lineTo (130.330); hangmanContainer.graphics.lineTo (120.320);  functie drawLeg2 (): void hangmanContainer.graphics.moveTo (180,300); hangmanContainer.graphics.lineTo (230.330); hangmanContainer.graphics.lineTo (240.320); 
  Stap 33: Creëer de You Win Movie Clip
 Ga naar Invoegen> Nieuw symbool. Geef het de naam YouWin en zorg ervoor dat "Exporteren voor ActionScript" is aangevinkt en dat de klasse is ingesteld op "YouWin"
  Selecteer het tekstgereedschap en zorg dat de volgende eigenschappen zijn ingesteld:
  Grootte: 14pt
 Kleur: # 00FF00
 
  Sleep een TextField naar de MovieClip en voer de woorden "YOU WIN !!" in erin.
 Stel vervolgens de volgende eigenschappen in op het TextField.
  X; -49,00
 Y: -8,00
 W: 104,00
 H: 19.00
 
  We moeten een variabele maken om onze YouWin MovieClip op te slaan, dus vul het volgende in onderaan je variabelenverklaringen:
  var youwin: YouWin;
  Stap 34: Creëer de filmclip You Lose
 Ga naar Invoegen> Nieuw symbool. Geef het de naam YouLose en zorg ervoor dat "Exporteren voor ActionScript" is aangevinkt en dat de klasse is ingesteld op "YouLose".
  Selecteer het gereedschap Tekst en zorg ervoor dat de volgende eigenschappen zijn ingesteld.
  Grootte: 14pt
 Kleur: # FF0000
 
  Sleep een TextField naar de MovieClip en voer de woorden "YOU LOSE !!" in. erin.
 Stel de volgende eigenschappen in het TextField in
  X; -49,00
 Y: -8,00
 W: 104,00
 H: 19.00
 
  We hebben een variabele nodig om onze YouLose MovieClip te houden, dus vul het volgende in onderaan je variabele verklaring.
  var youlose: YouLose;
  Stap 35: disableButtons () Functie
 Voeg de volgende code toe onder de drawLeg2 () functie.
  private function disableButtons (): void for (var i: int = 0; i < gameButtonArray.length;i++) gameButtonArray[i].disable();  
 Deze code loopt gewoon door de gameButtonArray en schakelt alle knoppen uit.
  Stap 36: Finish checkLetter ()
 In deze stap maken we het af checkLetter () functie waar het hart van het spel ligt. Voer de volgende code in
binnen in de checkLetter () functie die u eerder hebt gecreëerd.
  private functie 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 De tempButton en de brief variabelen werden in de vorige stappen uitgelegd. De correctGuess variabele is ingesteld op
in eerste instantie onjuist, als de gebruiker een correcte letter koos, zetten we dit op true. De newGuessWord is een tijdelijke variabele die we zullen gebruiken om het nieuwe woord te construeren om weer te geven.
 Vervolgens verwijderen we de EventListener van de knop en verwijderen deze uit het werkgebied.
 We lopen door het woord teken voor teken en controleer of het huidige teken in het woord is gelijk aan de brief, en
als dat zo is, plaatsen we de juiste letter in de guessWord array naar de brief.
 Vervolgens gebruiken we de join-methode van de String Class om onze guessWord array in een String (newGuessWord) en stel de guess_word_text naar newGuessWord.
 We controleren of correctGuess is niet waar, en als dat het geval is, nemen we toe numWrong en bel onze drawHangman-functie passeren numWrong.
 We controleren dan of newGuessWordM is gelijk aan het woord en als dat het geval is, schakelen we de knoppen uit, veroorzaken we onze jij wint MovieClip, stel zijn .x in
en .Y, voeg het toe aan het podium en bel TweenLite om het te animeren met een onComplete functie.
 Ten slotte controleren we of numWrong is gelijk aan zes en als dat zo is, lopen we door het woord en stel elke letter in de guessWord
matrix gelijk aan het huidige teken in het woord. We gebruiken dan join zoals hierboven uitgelegd en tonen het woord. We schakelen de knoppen uit, maken een instantie van ons jij verliest Filmclip,
voeg het toe aan het podium en bel opnieuw TweenLite om te animeren met een onComplete functie.
  Stap 37: resetDe game () functie
 De resetTheGame () functies worden aangeroepen wanneer de animaties van de jij wint en jij verliest MovieClips zijn voltooid. Voer de volgende code in
onder de drawLeg2 () functie:
  function reset De game (): void if (youwin! = null) removeChild (youwin); youwin = null;  if (youlose! = null) removeChild (youlose); youlose = null;  resetGame (); 
 Deze functie controleert of de jij wint en jij verliest zijn niet nul en als ze dat niet zijn, noemen we dat removeChild verwijderen
ze van het podium en zet ze op nul. Eindelijk noemen we de resetGame functie.
  Stap 38: Bezig met voltooien van resetGame ()
 We moeten een laatste opruimactie uitvoeren in de resetGame functie. Voeg de volgende code toe aan de resetGame () functie:
  function resetGame (): void numWrong = 0; if (gameButtonArray.length> 0) for (var i: int = 0; i We resetten eerst numWrong tot 0, dan doorlopen we de gameButtonArray, controleer of de knoppen op het podium staan en of ze
zijn we ze verwijderen.
  Stap 39: De WordList toevoegen
 U moet de "wordlist.txt" opnemen in de opgenomen bestanden. Ga dus naar de "AIR for IOS" -instellingen en klik op het tabblad "Algemeen" op de knop "+"
en blader naar de "wordlist.txt" om het toe te voegen aan de opgenomen bestanden.
  Dit maakt onze game compleet! De volgende stap is om te publiceren voor de App Store en te uploaden via iTunes Connect.
  Stap 40: Voorbereiden op de App Store
 U moet eerst een genereren "Distributie" Voorzieningenprofiel. Volg de stappen in stap 4 van het eerste deel van de zelfstudie, maar
zorg ervoor dat u onder "Distributie" staat in plaats van ontwikkeling.
 Vervolgens moet je het downloaden "Distributie" certificaat en converteer het naar een .P12 volgens het voorbeeld uit stap 5 van het eerste deel van deze serie.
 Ga dan terug naar de "Air For IOS" en onder de "DEPLOYMENT" tab, verwissel de devlopement .P12 met de distributie .P12, en verwissel het devloper provisioning-bestand
met het distributieprofiel, zorg ervoor dat u "Deployment - Apple App Store" aanvinkt en klik op Publiceren.
 Log ten slotte in op iTunes Connect, ga naar "Apps beheren" en voeg een nieuwe app toe, volg de instructies, upload uw app met "App Loader".
 Conclusie
 Deze serie gaf een goede inleiding tot mobiele ontwikkeling met Flash CS5.5. Hopelijk heb je iets nuttigs geleerd en bedankt voor het lezen! Als je meer inhoud van de iOS-ontwikkeling van Flash CS 5.5 wilt zien, kun je hieronder een reactie achterlaten!



		
			
	   
	




Code