Physics model, Games Maken in HTML5 , les 4

Games Maken in HTML5 , les 4

Restyling

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.
Ook heb ik 'block', onze 'div' een absolute positionering gegeven, zodat ik hem overal kan plaatsen op de pagina.

Kijk maar of je er uit kan komen, waar dit gebeurd, als je alle vorige lessen hebt gevolgd, zou je dat moeten kunnen volgen.
(straks duiken we in de javascript)
http://jsfiddle.net/Lt6LZ/3/

Physics model

In het javascript gedeelte heb ik alles weggehaald.. En dit er voor in de plaats gezet:

var block={};
block.ref=document.getElementById("block");
block.x=15;
block.y=35;
block.dx=3;
block.dy=3;

Block wordt een {}. Dit is een leeg object. Een object is een manier om dingen te groeperen.  In dit geval is het een verzameling van variabelen.
Binnen in een object, mag je variabelen maken, zonder 'var'.
De eerste variabele die ik maak in block is 'ref'. In 'block.ref' stop ik een verwijzing naar de 'div' met id='block'.
Vervolgens zet ik de variabelen x en y. In wiskunde staan x en y voor horizontale en verticale positie.
Samen bepalen ze de plek op een twee dimensionaal vlak.
Bij computers is x=0 en y=0 de linker bovenhoek. (In Wiskunde zou het de linker onderhoek zijn)
block.dx en block.dy kun je zien als de snelheid van 'block'. Dat gaan we later regelen, voorlopig zetten we ze op 3.

var loop_interval=window.setInterval(gameloop, 40);

In het vorige voorbeeld maakten we animatie met setTimeOut. Dit is een andere manier. Met window.setInterval is een standaard functie van window. We geven deze functie een block code dat we periodiek willen uitvoeren. In dit geval iedere 40 milliseconden.
Dat betekend dus dat de functie 'gameloop' 25 keer per seconde wordt uitgevoerd.
(1000 milliseconden / 40 milliseconden =25)

var w = window.innerWidth;
var h = window.innerHeight;

Als laatste vraag ik aan window wat de breedte en hoogte van het results window zijn.
Deze waarden stop ik in w en h. (omdat window.innerWidth nogal een mond vol is)

function gameloop()
{

Met function geven we aan dat er een block code aankomt. Deze code kunnen we aanspreken met de naam 'gameloop'

    // calculate new position

Met // geef je aan, dat wat er op die regel staat commentaar is. Commentaar wordt NIET uitgevoerd. Je zet het erin voor jezelf. Ook is het makkelijk (als je veel code hebt) om op te zoeken.
Ik zet mijn commentaren in het Engels, dat is een afspraak met mezelf. Zo weet ik dat ik moet zoeken op 'position' ipv 'positie'

    block.x+=block.dx;
    block.y+=block.dy;

Als eerste in het codeblock gameloop zetten we dus een nieuwe positie (x,y) voor block.
a+=2 is een kortere manier om a=a+2 te zeggen. Dus block.x+=block.dx betekent, dat de waarde in block.dx wordt opgeteld bij waarde in block.x en het resultaat wordt opgeslagen in block.x
Omdat block.dx=3 en block.x=15, zal block.x na deze operatie 18 zijn.
De volgende keer is hij 21, daarna 24 etc.
Hetzelfde doen we voor block.y.

    // bounce
    if(block.x>(w-15)) block.dx=-Math.abs(block.dx);

'if' bekijkt wat er tussen de haakjes staat (...) . Als deze uitdrukking waar is, wordt de code erna uitgevoerd. Zoniet,dan niet.
Dus if kijkt of 'block.x>(w-15)' waar is. > betekent groter dan. Dus er staat:
Is de horizontale positie van de linkerkant van block groter is dan de breedte van het window minus de breedte van block, dan ....
In het Nederlands:
Als block aan de rechterkant is aangekomen dan ....

Wat dan..? Nou, block.dx=-Math.abs(block.dx);
Math.abs is een standaard rekenkundige functie.
Math.abs(1)=1, Math.abs(-1)=1, Math.abs(-3.15)=3.15
-Math.abs(1)=-1, -Math.abs(-1)=-1 enz.
Dus, als je Math.abs een negatief getal geeft, maakt hij er hetzelfde positieve getal van. En als je daar een minnetje voor zet, wordt het altijd een negatief getal.
Dus block.dx blijft block.dx, behalve als block.dx positief is, dan wordt hij even groot, maar negatief.
In het Nederlands:
Als block aan de rechterkant is aangekomen dan ..verandert hij van richting. (Want dx is de snelheid, weet je nog?).

Dit is niet makkelijk leesbaar, maar gelukkig krijg je genoeg regels om te oefenen.
Want dit bepaald alleen de rechterkant. Ook de linkerkant en boven- en onderkant wil ik bepalen.

    if(block.x<0) block.dx=Math.abs(block.dx); 

    if(block.y>(h-15)) block.dy=-Math.abs(block.dy);

    if(block.y<0)block.dy=Math.abs(block.dy); 

< betekent kleiner dan. Voor de rest is het hetzelfde als net uitgelegd..
Dit is de code die zorgt voor het stuiteren.
Hierna volgt nog een klein stukje.

    block.ref.style.left=block.x+"px";
    block.ref.style.top=block.y+"px";
}

Dit lijkt op de code die we in het vorige voorbeeld gebruikte om de breedte te zetten. Want block.reg wat gelijk aan getElementById('block'), weet je nog?
Alleen gebruiken we nu de eigenschap left (linkerkant) en top (bovenkant). Deze zetten we op de positie, die opgeslagen is in block.x en block.y.

In de volgende les gaan we dingen laten bewegen. We gaan kijken naar het javascript vak!

NAAR LES 5
Beginnen bij les 1: http://games-maken.blogspot.nl/2014/06/games-maken-les-1.html

Links voor zelfstudie:
CSS (opmaak pagina's): http://www.w3schools.com/css/DEFAULT.asp
Kleur in HTML: http://www.w3schools.com/tags/ref_colorpicker.asp
Basis cursus HTML: http://www.homepage-maken.nl/htmlcursus/lessenoverzicht.php
HTML-escape characters: http://www.theukwebdesigncompany.com/articles/entity-escape-characters.php