Modules/JavaScript voor games-0

Badge-omschrijving

Dit onderdeel biedt de voorkennis voor het project Game Programming met de Hogeschool van Amsterdam.

Na afronding van dit onderdeel kun je, in eenvoudige opdrachten:

• werken met de basisconstructies van Javascript;
• werken met het HTML Canvas, door middel van Javascript;
  • figuren tekenen op het HTML Canvas
  • animaties maken op het HTML Canvas
• interactie met de gebruiker via het toetsenbord afhandelen in de browser (via Javascript).

Globale tijdsindeling

Voor de opdrachten moet je ongeveer 10 uur rekenen. Voor de verschillende opdrachten:

1. Codecademy Javascript: ca. 20-40 minuten per opdracht
2. Canvas tutorial: ca. 1 uur per opdracht
3. Stuiterende ballen: ca. 1-2 uur

Lesmateriaal

Het materiaal bestaat (voorlopig) uit

1. een aantal onderdelen van de Inleiding Javascript van Codecademy;
2. een aantal onderdelen van een tutorial over het gebruik van HTML Canvas;
3. een kleine opdracht (100 stuiterende ballen).

1. Codecademy

onderwerp	lesmateriaal
1. Getting started with programming	les 1
2. Choose your own adventure	les 2
3. Introduction to Functions in JS	les 3
4. "Rock, paper, scissors"	les 4
5. for-loops	les 5
6. search your name	les 6
7. while loops	les 7
8. Arrays and Objects in JS	les 11

Voor het uitvoeren van deze onderdelen moet je een account aanmaken op Codecademy (http://www.codecademy.com/tracks/javascript). Reken per les op ca. 20-40 minuten. De lessen 8-10 kun je voor deze badge overslaan (maar je mag die natuurlijk altijd doen).

Inleveren van dit onderdeel: laten zien aan je begeleider dat je dit afgerond hebt op Codecademy.

2. Canvas

Voor het leren werken met het HTML Canvas gebruik je het onderstaande tutorial.

onderwerp	lesmateriaal
Canvas	http://www.onlywebpro.com/2011/06/25/html5-canvas-for-absolute-beginners-part-1/
Drawing	http://www.onlywebpro.com/2011/07/02/html5-canvas-for-absolute-beginners-part-2/
Image	http://www.onlywebpro.com/2011/07/09/html5-canvas-for-absolute-beginners-part-3/
Animation	http://www.onlywebpro.com/2011/07/20/html5-canvas-for-absolute-beginners-part-4/
Key events (interaction)	http://www.onlywebpro.com/2011/07/24/html5-canvas-for-absolute-beginners-part-5/

Voor dit onderdeel moet je een account aanmaken (als je die nog niet hebt) op JSBin. Daar moet je per les van het tutorial een uitwerking maken. Reken per les op ca. 1 uur.

Inleveren van dit onderdeel: je uitwerkingen op JSBin aan je begeleider laten zien.

3. Opdracht: stuiterende ballen

Maak een webpagina (HTML, Javascript) waarop je (op een canvas) 100 stuiterende ballen laat zien. De ballen stuiteren hierbij tegen de wand, maar niet tegen elkaar ("ze zijn onzichtbaar voor elkaar").

Inleveren hiervan: op JSBin (link vermelden in de aftekentabel).

Afronden - inleveren

Maak voor deze opdracht een aparte uitwerkingenpagina als subpagina van je gebruikerspagina. Maak een kopie van de onderstaande tabel op deze uitwerkingenpagina, en vul deze in als je een deelopdracht afgerond hebt. Voor de Cadecademy opdrachten hoef je niets in te leveren. Voor de opdrachten daarna moet je steeds een uitwerking maken, in JSBin of in een apart bestand dat je op je Google Drive plaatst (gedeeld met iedereen met de link). Plaats een link naar het JSBin of Google Drive bestand in de uitwerkingentabel.

Aftekentabel

Nr.	Opdracht	Uitwerking op (link)	Gedaan dd.	Opmerkingen	Afgetekend dd.	Afgetekend door	Opmerkingen
1.	Getting started with programming - les 1	---
2.	Choose your own adventure - les 2	---
3.	Introduction to Functions in JS - les 3	---
4.	"Rock, paper, scissors" - les 4	---
5.	for-loops - les 5	---
6.	search your name - les 6	---
7.	while loops - les 7	---
8.	les 11	---
9.	Canvas
10.	Drawing
11.	Image
12.	Animation
13.	Key events (interaction)
14.	100 stuiterende ballen