Programmeren, Game maken, les 2

Games Maken in HTML5 , les 2

Programmeren

In het javascript vak geef je opdrachten, waarmee je zowel de inhoud (HTML) als stijl (CSS) kan veranderen. Daarvoor gebruik je de id's die je aan objecten geeft.
Ook gebruik je javascript voor allerlei (andere) vormen van input en output. Input is alles wat je programma in gaat. Output is alles wat je programma uit gaat.
Bijvoorbeeld voor het reageren op de muis of het toetsenbord (input) of het afspelen van geluid op het juiste moment (output).

Een voorbeeld van het veranderen van de stijl/css:
Tik in het vak javascript:

var block=document.getElementById("tekst1");
block.style.width='150px';

UITLEG: var block=
Het woordje 'var' staat voor 'variabele'. Als je dat niet kent uit de wiskunde, mij is het ooit zo uitgelegd.
Stel je een kast voor met laadjes. Op deze laadjes staat een naam. Zo'n laadje is een 'variabele' en de kast is het geheugen van de computer. Door de namen van de laadjes kun je dingen die je in het geheugen stopt terugvinden. Het sleutelwoord 'var' betekent dat er een nieuw laadje moet worden gemaakt, genaamd block.
Vanaf dat moment is voor de computer 'block' gelijk aan wat ik erin stop.

We vullen de variabele 'block' met een formule om bij de 'div' tekst1 te komen.
Op de tweede regel, veranderen we de breedte van het blok naar 150 pixels. (Pixels zijn beeldpunten in CSS worden ze afgekort tot px)

Nu type je eronder:

block.innerHTML = "test";

en drukt op RUN.

Hiermee veranderen we wat er in de div tekst1 (block) zit. Het geeft hetzelfde effect als wanneer we

<div id="tekst1">test</div>

hadden getikt. Met javascript kun je dus achteraf, programmatisch de look en content van je pagina bepalen.

JSFiddle: http://jsfiddle.net/6W5f4/

EXPERIMENT: verander de breedte naar een andere waarde en als je jezelf dapper voelt:
kleur programmatisch het block met: 'style.background-color'
Je kunt in feite alles wat je in CSS gebruikt, ook in javascript gebruiken en vaak is de syntax (een computerterm voor woorden/correcte spelling, letterlijk: zinsbouw) hetzelfde.

Beweging

Als we javascript zover krijgen meerdere malen uit te voeren, kunnen we de breede van het block iedere keer een beetje veranderen. Daar is een functie voor:
setTimeout (of requestanimationframe, maar daarover later meer!)

Verander je javascript naar het volgende:

var block=document.getElementById("tekst1");
block.innerHTML = "test";
var w=200;
move();

function move()
{
  w=w-1;
  block.style.width=w+'px';
  if(w>30)
  {
    setTimeout(move,40);
  }
}

Of ga naar: http://jsfiddle.net/Lt6LZ/1/

In plaats van de breedte (width) eenmalig te zetten, willen we het nu meerdere keren doen.
Daarom maken we er een functie van. Dat is de functie move.
Ook hebben we een variabele nodig om de breedte bij te houden, dat is de nieuwe variabele w.

Nu moeten we de functie 'move' nog schrijven.
Functies zien er ALTIJD zo uit:

function naam(...)
{
    .....
}

In de functie gebeurd het volgende:

    
   w=w-1;

We veranderen w naar w-1; Dus de inhoud van het laadje wordt de inhoud van het laadje -1. W begint op 200. Als we de functie hebben uitgevoerd,

 block.style.width=w+'px';

We veranderen de breedte van block op dezelfde manier als eerder. Maar nu naar 'w' pixels.

Vervolgens komt een beslissing. Als w groter is dan 30 willen we move NOG een keer uitvoeren, maar na een kleine vertraging. Is w kleiner dan 30, dan stoppen we met het uitvoeren van javascript.


JS FIDDLE: http://jsfiddle.net/Lt6LZ/1/
EXPERIMENT: Druk op run.
Kijk of je de animatie kan laten stoppen bij 40 pixels. En of je hem kan laten beginnen bij 100 pixels.
Ook interessant: kun je hem omdraaien? Verander steeds 1 ding en druk op run.
Gebeurt er niks, verander het dan terug.

In de volgende les gaan we alles zo instellen, dat we makkelijk een simpel spelletje kunnen maken.

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

Links voor zelfstudie:
Wat is Javascript: http://en.wikipedia.org/wiki/JavaScript#Version_history

Leren programmeren met javascript: http://www.codecademy.com/courses/javascript-beginner-en-rV00O/0/1?curriculum_id=50eb35e0878e6f8ba50008b2