LOI Gamedesign

Afgelopen vrijdag gaf ik GameDesign op HBO niveau voor de LOI.
Als onderdeel van deze cursus zou men gamemaker moeten leren.
Aangezien gameDesign voor alle leerlingen niet echt een hoofdvak was, maar meer een verplicht nummer, besloten we de game in Javascript te gaan maken,
Gamemaker is leuk als je wilt gameDesignen, zonder iets te willen programmeren. Maar als je een multimedia/frontend opleiding doet, dan is javascript toch wel een vereiste.

Javascript zat tot nog toe niet in de cursus, hetgeen een extra uitdaging vormde:
naast basic gamedevelopment, moest ik ze ook leren programmeren.
Gelukkig heb ik dat vaker bij de hand gehad, dus op naa JSFiddle.

http://jsfiddle.net/wn8rq0m0/

var a=4;
if(1==3)
{
 a=a+1;
}
console.log("------------");
console.log("de waarde van a ="+ a);

Mijn controle vraag aan de leerlingen om het niveau in te schatten is: "Wat gaat er gebeuren?" en
 "Wat wordt de waarde van a?"
Als je hier een antwoord op wil kunnen geven moet je twee basis-concepten van programmeren snappen. Variabelen en Expressies.

var a=4;

Een variabele (in dit geval a) wordt gedeclareerd.
Dit betekent, dat je javascript verteld, hoe de variabele heet en (eventueel) wat zijn initiele waarde is.
Je kunt het zien als het maken van een doosje (met een naam) waar je iets in kan stoppen, maar het hoeft niet direct.
In dit geval heet het doosje "a" en stoppen we er 4 in.

if(1==3)

Dit is een voorbeeld van een expressie. Je kunt dit zien aan de dubbele ==. We vragen de computer of wat tussen haakjes staat waar is, of niet waar.

Dus 1=3? geeft niet waar.

Het blok code daaronder.

{
 a=a+1;
}

wordt dus overgeslagen. (Bij een ware expressie bijvoorbeeld (1==1) was het WEL uitgevoerd).
Dit is de functie van if. Na if volgt een expressie en een blok code. Is de expressie waar, dan wordt het blok uitgevoerd, anders wordt het overgeslagen.
Op deze manier kan een programma reageren op veranderende omstandigheden. De expressie kan namelijk wat complexer zijn dan 1==3? Want dat is een domme vraag.

console.log("------------");

Dan wordt de javascript gevraagd, een boodschap af te drukken, deze vind je in je console. Dat is een speciale plek voor programmeurs. Afhankelijk van je browser vind je deze op andere plekken, vaak is f12 of ctrl-shift-i een goeie plek om te beginnen.

console.log("de waarde van a ="+ a);

Dit betekent, dat er een boodschap wordt afgedrukt. Het eerste deel van de boodschap is letterlijk en staat dus tussen aanhalingstekens. (In programmeren heet dit een string). Het tweede deel van de boodschap is de waarde van a. Deze worden samengevoegd door een plus-teken.

Het resultaat van het programma is dus:
----------------------
de waarde van a=4

Als je dit snapt, heb je al bijna alles wat nodig is om een spel te programmeren.
Even vooruitspringend naar wat je in 30 stappen gaat leren maken:


Ik zal het nog allemaal uitgebreid beschrijven als ik tijd heb, maar voor nu kun je het proces terughalen met:

• http://jsfiddle.net/wn8rq0m0/1/ Loop met twee variabelen (concept3)
• http://jsfiddle.net/wn8rq0m0/2/ Loop en derde variabele
• http://jsfiddle.net/wn8rq0m0/3/ Functie (concept4)
• http://jsfiddle.net/wn8rq0m0/4/ pagina elementen besturen
• http://jsfiddle.net/wn8rq0m0/5/ pagina elementen besturen kleur
• http://jsfiddle.net/wn8rq0m0/6/ pagina elementen besturen
• http://jsfiddle.net/wn8rq0m0/7/ pagina elementen besturen
• http://jsfiddle.net/wn8rq0m0/8/ pagina elementen besturen langer worden (set interval)
• http://jsfiddle.net/wn8rq0m0/9/ ....
• http://jsfiddle.net/wn8rq0m0/10/ ....
• http://jsfiddle.net/wn8rq0m0/11/ pagina elementen besturen begewing
• http://jsfiddle.net/wn8rq0m0/12/ init loop als commentaar (handig hulpmiddel!)
• http://jsfiddle.net/wn8rq0m0/13/ snellere beweging door snellere interval loop.
• http://jsfiddle.net/wn8rq0m0/14/ objects, bouncing en gravity
• http://jsfiddle.net/wn8rq0m0/15/ catch mouse
• http://jsfiddle.net/wn8rq0m0/16/ catch mouse geactiveerd op mouse over.
• http://jsfiddle.net/wn8rq0m0/17/ ...
• http://jsfiddle.net/wn8rq0m0/18/ tweede 'sprite'
• http://jsfiddle.net/wn8rq0m0/19/ positionering beneden van tweede sprite
• http://jsfiddle.net/wn8rq0m0/20/ tweede sprite volgt muis.
• http://jsfiddle.net/wn8rq0m0/21/ ...
• http://jsfiddle.net/wn8rq0m0/22/ ...
• http://jsfiddle.net/wn8rq0m0/23/ ...
• http://jsfiddle.net/wn8rq0m0/24/ graphic voor de bal (embedded svg!)
• http://jsfiddle.net/wn8rq0m0/25/ hittest.
• http://jsfiddle.net/wn8rq0m0/26/ meer graphics toegevoegd.
• http://jsfiddle.net/wn8rq0m0/27/ geluid en blokjes toegevoegd.
• http://jsfiddle.net/wn8rq0m0/28/ blok hittest-eerste poging
• http://jsfiddle.net/wn8rq0m0/29/ blok hittest-tweede poging
• http://jsfiddle.net/wn8rq0m0/30/ finished basic game.