GameProject2014-Trappenberg 1,les 9

Layout in een paar stappen.

Basis interacties en grafische mogelijkheden...
Ik heb een canvas element gecentreerd en een absolute grootte te geven.
Ik heb hem laten luisteren naar de muis. Omdat het canvas gechaald kan zijn, afhankelijk van hoe groot de pagina is, moet je de muis coordinaten delen door een factor. De muiscoordinaten komen binnen als pageX en pageY, dus ten opzichte van de pagina. Wij zijn geinteresseerd waar we zijn op het canvas.

http://jsfiddle.net/hWj75/

Het data model:

http://jsfiddle.net/hWj75/1/

Je data model is waar alle informatie van de game zit. De posities van grafische elementen sla je traditioneel ergens anders op. Je houdt model en view (bekijken) en controls (knoppen, muis etc) zoveel gescheiden.
Ik ben geen MVC aanhanger. Ik denk dat weinig game-developers dat van nature zijn.
Toch heeft het zijn nut, om te weten waar je mee bezig bent.
Doe je dat niet, hou ze dan maar gescheiden!

De HUD

HUD toegevoegd met 1 knop.
HUD = Heads Up Display. Dat is de in game informatie, die je ziet terwijl je speelt. Normaal alleen score enzo, in dit spel VEEL meer.

http://jsfiddle.net/hWj75/2/

Nog wat knoppen en hud/shop toegevoegd
http://jsfiddle.net/hWj75/3/
Ik heb de opzet van Bloons TD overgenomen voor de HUD/layout.
In de Hud zitten twee 'knoppen', flink wat torens, credits en levens. Deze reageren allemaal nog niet.
Het veld is nu onderverdeeld in te kleine stukjes. Dat ga ik nog veranderen.

Kleur

Vakjes in het veld een goede grootte gemaakt en gekleurd. De buttons voor de torens/turrets heb ik cosy kleurtjes gegeven.
http://jsfiddle.net/hWj75/6/
Hiervoor heb ik een palet toegevoegd.

game.palet={};

game.palet.greens=["#66CC33","#33CC4D","#8BD864"];

game.palet.pastel=["#66CC99","#66CCCC","#6699CC","#66CC66","#3DB87A","#2E8A5C","#9966CC","#99CC66","#B83D7A","#CC66CC"];

game.palet.cosy=["#66CC33","#33CC99","#33B3CC","#AFE495","#3366CC","#CC9933","#B164D8","#CC4D33","#CC9966","#993366"];

Gewoon een verzameling (object) met kleuren erin.
Hoe kom ik zo gauw aan al die codes?
Een goeie manier om snel kleuren-sets te maken:
http://www.colorschemer.com/online.html

MODULO

De groenen heb ik afwisselend gemaakt in een patroontje.
Ik loop door x en y om de blokken te tekenen (horizontaal en verticaal)
Ik gebruik dan de modulo operator. Dit is een rekenkundige bewerking, net als delen of vermenigvuldigen en je leert hem op school, alleen niet, dat het zo heet.
Wij noemen dat 'rest'.
Dus 9/4 is 2 rest 1, weet je nog.. Nou 9%4 is 1.. Dus 9 modulo vier betekent: delen door 4 en neem dan de rest.
Dus (x%2+y%3) betekent: (0 of 1) + (0 of 1 of 2) en geeft dus een uitkomst van ergens tussen de 0 en 3. Ik haal dan de juiste kleur op uit de verzameling greens. (Ik gebruik dus alleen de eerste 4 kleuren)
Maar ik heb maar 3 kleuren in game.palet.greens. Om te zorgen dat ik niet buiten het gedefinieerde gebied van de lijst kleuren ga, geef ik de lengte van de verzameling op en neem de modulo.
De rest van een deling kan nooit meer zijn dan de deler.. (klinkt ingewikkeld, maar denk maar eens)
(een positief getal)%5 kan 0,1,2,3,4 zijn. Nooit 5, want is het antwoord gewoon 1 meer.

Modulo is ongelooflijk handig en het is schandalig dat we dat niet uitgebreider op school krijgen!