RomyBlankendaal op 16 mrt 2016 om 14:35

2016-03-16T14:35:40Z

← Oudere versie		Versie van 16 mrt 2016 16:35
Regel 1:		Regel 1:
			{{Module-status
			\|status=Alpha
			\|auteur= [[Gebruiker:Eelco\|Eelco Dijkstra]]
			\|badge=[[Badges/JavaScript voor games-0\|JavaScript voor games-0]]
			}}

	{{Zijbalk Modules}}		{{Zijbalk Modules}}

Eelco: Eelco heeft de pagina Modules/Javascript voor games-0 hernoemd naar Modules/JavaScript voor games-0 zonder een doorverwijzing achter te laten

2016-03-16T13:18:40Z

Eelco heeft de pagina Modules/Javascript voor games-0 hernoemd naar Modules/JavaScript voor games-0 zonder een doorverwijzing achter te laten

← Oudere versie	Versie van 16 mrt 2016 15:18
(geen verschil)

Eelco: Eelco heeft de pagina Modules/Javascript voor Games-0 hernoemd naar Modules/Javascript voor games-0 zonder een doorverwijzing achter te laten

2016-03-16T13:18:11Z

Eelco heeft de pagina Modules/Javascript voor Games-0 hernoemd naar Modules/Javascript voor games-0 zonder een doorverwijzing achter te laten

← Oudere versie	Versie van 16 mrt 2016 15:18
(geen verschil)

Eelco: Eelco heeft pagina Javascript voor Games (0) hernoemd naar Modules/Javascript voor Games-0

2016-03-16T13:16:37Z

Eelco heeft pagina Javascript voor Games (0) hernoemd naar Modules/Javascript voor Games-0

← Oudere versie	Versie van 16 mrt 2016 15:16
(geen verschil)

Eelco: 1 versie geïmporteerd

2015-08-16T16:48:48Z

1 versie geïmporteerd

← Oudere versie	Versie van 16 aug 2015 18:48
(geen verschil)

Eelco: Eelco heeft pagina Javascript voor Games (1) naar Javascript voor Games (0) hernoemd

2015-01-20T21:21:21Z

Eelco heeft pagina Javascript voor Games (1) naar Javascript voor Games (0) hernoemd

Nieuwe pagina

{{Zijbalk Modules}}

== 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:
# Codecademy Javascript: ca. 20-40 minuten per opdracht
# Canvas tutorial: ca. 1 uur per opdracht
# Stuiterende ballen: ca. 1-2 uur

== Lesmateriaal ==

Het materiaal bestaat (voorlopig) uit
# een aantal onderdelen van de Inleiding Javascript van Codecademy;
# een aantal onderdelen van een tutorial over het gebruik van HTML Canvas;
# een kleine opdracht (100 stuiterende ballen).

==== 1. Codecademy ====

{| class="wikitable"
! 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.

{| class="wikitable"
! 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 ===

{| class="wikitable"
! 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. || Arrays and Objects in JS-| '''les 11''' || --- || || || || ||
|-
| 9. || Canvas || || || || || ||
|-
| 10. || Drawing || || || || || ||
|-
| 11. || Image || || || || || ||
|-
| 12. || Animation || || || || || ||
|-
| 13. || Key events (interaction) || || || || || ||
|-
| 14. || 100 stuiterende ballen || || || || || ||

|}

Modules/JavaScript voor games-0 - Bewerkingsoverzicht

RomyBlankendaal op 16 mrt 2016 om 14:35

Eelco: Eelco heeft de pagina Modules/Javascript voor games-0 hernoemd naar Modules/JavaScript voor games-0 zonder een doorverwijzing achter te laten

Eelco: Eelco heeft de pagina Modules/Javascript voor Games-0 hernoemd naar Modules/Javascript voor games-0 zonder een doorverwijzing achter te laten

Eelco: Eelco heeft pagina Javascript voor Games (0) hernoemd naar Modules/Javascript voor Games-0

Eelco: 1 versie geïmporteerd

Eelco: Eelco heeft pagina Javascript voor Games (1) naar Javascript voor Games (0) hernoemd