Vangspel

Ticker

We werken met een Ticker.

Want dan hebben we veel meer controle over onze animatie.

If statement zodat de cirkel alleen beweegt zolang hij in beeld is

De Ticker geeft problemen tijdens het typen. Daarom passen we de instellingen in Codepen aan.

Met if else maken we een loop waardoor de cirkel steeds opnieuw in beeld komt.

We berekenen wanneer de cirkel buiten beeld is.

 

extra uitleg

Als de cirkel op de y-positie van de hoogte van de stage staat zie je nog de helft van de cirkel.

Dat komt omdat gemeten wordt vanuit het midden van de cirkel.

Daarom moet je de helft van de hoogte van de cirkel optellen bij de hoogte van de stage.

De cirkel weer bovenaan plaatsen, willekeurigheid toevoegen en zwaartekracht toevoegen

We kijken hoe we de cirkel bovenaan net uit beeld plaatsen.

We zetten de cirkel op een willekeurige plek neer op de horizontale lijn van de stage.

Willekeur

Willekeurigheid is belangrijk in een spel. Zonder willekeur wordt je spel voorspelbaar en daardoor veel te gemakkelijk. Als je weet waar de cirkel verschijnt is dat dus niet leuk.

 

Math.random() is een ingebouwde functie in Javascript.
We krijgen daarmee een willekeurig getal tussen 0 en 1.
Als je een willekeurig getal wilt tussen 0 en 100 vermenigvuldig je de uitkomst met 100.
Want: 1 x 100 = 100
Als je een willekeurig getal wilt binnen de breedte van de stage vermenigvuldig je met de breedte van de stage.

Want: 1 x stage.width = stage.width

Zwaartekracht

Door zwaartekracht vallen dingen sneller naarmate ze langer vallen. Ze versnellen dus. Met zwaartekracht krijgt ons spel een natuurlijker gevoel.

 

Daarom gebruiken we de Ticker. Elke keer als hij tikt voegen we een beetje extra snelheid toe. Dat doen we zolang de cirkel valt.

 

Als de cirkel weer bovenaan staat resetten we de snelheid weer. Anders loopt het compleet uit de hand met die snelheid.

Besturing in de vorm van twee knoppen

We zetten twee knoppen neer en zetten ze daar waar we ze willen hebben.

Naar knopgebeurtenissen luisteren

We voegen een luisteraar toe aan de stage. Want dat reageert ook als je op de knoppen klikt.

We luisteren naar de gebeurtenis "mousedown" op de knoppen. Want "click" reageert pas als je de knop weer loslaat.

We zetten een functie in een functie.

Ik maak een foutje. En ik laat zien hoe je dan je fout opspoort.

Met de knoppen de speler laten bewegen

We maken de speler voordat we de knoppen maken zodat de speler altijd achter de knoppen is.

 

Ik experimenteer met de beste manier om de speler te besturen. Ik kom uit op dezelfde methode als ik gebruik met de zwaartekracht hierboven.

 

Dit reset ik als de knop losgelaten wordt.

boolean

Hier werk ik met een boolean. Dan is iets waar of niet. Als je op de linkerknop drukt is bijvoorbeeld moveLeft waar.

 

In de Ticker laat ik de speler alleen naar links bewegen als moveLeft waar is. (met een if-statement!)

 

Als de knop losgelaten wordt is moveLeft niet meer waar. Dus dan beweegt de speler niet meer.

opzoeken

We werken met Zimjs EN Createjs. Soms moeten we dan dingen opzoeken bij Createjs.

Ik zoek daar op welke muisgebeurtenissen er zijn.

 

De speler begrenzen

De speler mag natuurlijk niet buiten beeld komen. In deze video begrenzen we daarom de reikwijdte van de speler.

Dat doen we met een if-else statement in de Ticker.

Als de speler de grens bereikt staat hij stil. We zetten de snelheid dan weer terug naar de basis snelheid.

Botsingcontrole

In deze les maken we een botsingcontrole.
Zo kunnen we zien of de bal het plaatje raakt.

We zoeken de botsingcontrole met het minste rekenwerk:

hitTestBounds()

Deze botsingcontrole gaat uit van de grenzen van je object.
Er is een vierkant om elke vorm heen.
Dit vierkant kun je vinden met de ingebouwde functie van Zim:

outline();

Kijk hiervoor nog eens hier:
https://franklos.nl/animeren/

Reactie op hitTest

Ik bedenk een slimme manier om de hitTest te beëindigen als de bal is geraakt.

Ik zet bal weer boven in beeld op een willekeurige positie.

Speler belonen

Ik maak een scoreteller en een emitter.

Startknop maken

Ik maak een startknop.
Pas als je die hebt ingedrukt begint het spel.

Foutmeldingen maken

Ik maak 3 bollen die als foutmeldingen gaan dienen.

Ik doe dat met een for-loop.
https://franklos.nl/arrays-en-loops/

Foutmeldingen in beeld brengen

Als de speler een bal mist maken we een nieuwe foutmelding zichtbaar.

Game Over

Het spel stoppen als er meer dan 3 fouten worden gemaakt.

Ik laat een tekst animeren.

En ik maak een knop om opnieuw te kunnen starten.

Spel resetten

We resetten het spel zodat het weer opnieuw begint.

Meer bekijken

Weer een blog van Frank Los

Ik deel graag mijn visie en projecten.
Dit soort berichten maandelijks in je mail?
Meld je dan hier aan.

illustratie kadootje

Ik geef gelijk ook een e-book cadeau met tips over goede uitleg!

Delen is fijn!

Wil je zelf uitblinken met visuele communicatie?

Bekijk dan mijn aanpak.

Wellicht wil je meer weten over mij.

illustratie van Frank Los
Frank Los
frank@weereenlos.nl06 430 466 58

TUSSEN DE OREN

uitleg die aankomt

Goede uitleg
is ontzettend lastig.

Deze tips helpen jou
keer op keer.
Download mijn gratis e-book
met poster!
illustratie van Frank Los
CookiesDisclaimerPrivacystatement