Games Maken in HTML5 , les 5
Physicsmodel uitbreiden
Na de reset-stylesheet heb ik wat wijzigingen gemaakt in de style (css) en html. Alles blijft hetzelfde, alleen heb ik block hernoemd en een vaste breedte en hoogte gegeven. Ook heb ik de achtergrond geel gemaakt.Nu wil ik het physics model een beetje uitbreiden, zodat we ook zwaartekracht hebben (en wrijving) en dus een wat natuurlijker gedrag krijgen..
http://jsfiddle.net/Lt6LZ/4/
In de gameloop typen we het volgende erbij:
// gravity
block.dy+=0.5;
dy kon je zien als de snelheid. Als we continu iets bij deze snelheid optellen, kun je dat zien als een kracht. In dit geval de zwaartekracht:
EXPERIMENT:
probeer te voorspellen wat er gebeurd als je de + in een - veranderd. Doe het, druk op run en kijk of je gelijk had.
Vraag: hoe zou je er wind bij kunnen maken als kracht?
In de gameloop (na of voor zwaartekracht,dat maakt niet veel uit) typen we:
// air friction
block.dx*=0.99;
block.dy*=0.99;
Dit is misschien niet het meest toegankelijke.. als a+=1 betekent a=a+1..
Dan betekend a*=2; -> a=a*2; Ok, ik vermenigvuldig block.dx en block.dy dus met iets.
Met 0.99. Dat betekend, dat welke kant de snelheid ook op is: positief of negatief, hij wordt kleiner en wel met 1 honderdste per keer.
Dit is ook zo met luchtweerstand: Hoe harder je gaat, hoe meer luchtweerstand.
Sta je stil (dus is je snelheid 0, dan is de luchtweerstand ook 0)
EXPERIMENT: verander de waarde in een 0.999 of 0.9 en bekijk het effect. Wellicht ziet het er logischer uit, als je dx met een andere waarde vermenigvuldigd dan dy. Dit klopt natuurkundig gezien niet. Heb je daar een verklaring voor?
Canvas
Goed. We snappen een beetje hoe HTML in elkaar zit.Deze manier van animeren is niet de meest efficiente, maar hij werkt wel op alle browsers.
Om het onszelf wat makkelijker te maken, gebruiken we voortaan canvas.
Op een canvas kun je tekenen. Oudere browsers kunnen een canvas helaas niet laten zien.
Als het allemaal vanaf nu niet meer werkt is het dus tijd om je browser te updaten!
Hier is hetzelfde programma, maar dan met een canvas:
http://jsfiddle.net/Lt6LZ/5/
Je ziet nu goed het verschil tussen de manier van animeren op een canvas en op een html-pagina.
Op een canvas teken je, op een HTML pagina schuif je met blokken.
Om ECHT hetzelfde effect te krijgen, moeten we wat we getekend hebben ook weer wissen.
http://jsfiddle.net/Lt6LZ/6/
Events
Nu wil ik klikken afvangen en iedere keer dat ik ergens klik, wil ik dat het blokje daarheen beweegt.Klikken kun je ook op een canvas afvangen.
Dat maakt het wel makkelijker:
Kijk eens hier: http://jsfiddle.net/Lt6LZ/7/
Ik heb een EventListener toegevoegd op het canvas.
Events is een belangrijk concept en behoorlijk complex.Het komt hierop neer:
Als er iets gebeurd, maakt de computer een nieuwsbrief waarop staat wat er gebeurd.
Dit gaat naar ALLE onderdelen die zich abonneren middels een EventListener.
Alleen gaan er heel wat nieuwsbrieven uit. In het geval van mousemove events honderden per seconde.
Maar het principe is ongeveer hetzelfde.. (Er is VEEEL meer over te zeggen, natuurlijk..)
Voor nu is het genoeg: kijk wat er gebeurd in de fiddle als je klikt op het gele vlak.
Ik heb block (ons bewegende block) een variabele "state" gegeven. In het begin zet ik de state op
"fall". In dat geval doet block precies wat hij eerder al deed.
In de functie die wordt aangeroepen door de eventlistener.(Mousedown) wordt block.staat gezet op "follow".
In de gameloop kijk ik eerst wat voor waarde er in state zit.
Afhankelijk van die waarde ("fall" of "follow") doe ik iets.
Of het blok valt, of het blok krijgt een continue kracht in de richting van het punt, waar mijn muis het laatst klikte.
Hartstikke leuk, maar nu wil ik het ook horen, als mijn muis stopt met klikken.
Daarom voeg ik nog een listener toe:
http://jsfiddle.net/Lt6LZ/8/
met mouseup en mousemove is het stel compleet. Zodra de gebruiker nu iets met zijn muis doet (behalve het muiswiel) hoor ik ervan.
Ik verander block.state weer terug in "fall" als de muis omhoog gaat en ik zet tx en ty (target x, target y) weer als de muis beweegt. Op die manier beheers je het blok volkomen.
En zie je dat je het gemakkelijk kunt slepen.
Ik hoop dat jullie al een beetje een spelletje beginnen te zien.
Het is moeilijk voor te stellen met alleen een blok.
Laten we DAAR eens wat aan doen.
In de volgende les gaan we animeren.
Links voor zelfstudie:
Canvas: http://www.w3schools.com/tags/tag_canvas.asp
Switch: http://www.w3schools.com/js/js_switch.asp
Events: http://www.w3schools.com/js/js_htmldom_events.asp
Geen opmerkingen:
Een reactie posten