HTML5 Game Jam

Workshop (beta)

Henk

Welkom!

Henk

Wat gaan we doen?

Catch me!

Programma

  • Hoe werkt het spelletje?
  • Wat is HTML(5)?
  • Wat is nu eigenlijk programmeren?
  • Catch Me!

HTML(5)?

Tags

<h1>


<p>


<ul>


<li>


Video

Opdracht 1

Maak een eenvoudige webpagina

<canvas>

Javascript

Wat is nu eigenlijk programmeren?

Kookboek

Chips

Ingrediënten
  • aardappels
  • zout

Chips

Gereedschappen
  • frietpan
  • snijmesje

Chips

Instructies
  1. Je schilt als eerste de aardappels.
  3. je wast ze en doet ze in een schaaltje.
  5. Je snijdt de aardappels in dunne schijfjes.
  6. en doet er dan beetje zout over en laat het intrekken.

Chips

Instructies (2)
  1. Je zet de frietpan aan en doet ze er in.
  3. Wacht een paar minuten to ze beetje licht bruin zijn,
    dan haal je ze er uit.
  5. Laat ze even afkoelen en klaar zijn ze!

(1) de taal van een computer spreken

(2) praten, zodat de computer je begrijpt!

Variabelen

Functies

The Game


Catch me!

Canvas

<canvas id="canvas" width="500" height="500">
</canvas>

Canvas

           
<script> 
  var canvas = document.getElementById("canvas");  
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = 'red';  
  ctx.fillRect (200,200, 50, 50);
 
 </script>

Opdracht 2

Maak een webpagina met een canvas

  • fillRect (x,y, width, height)
  • fillText('text', x, y)

Vallende blokken

init()

dropBlock()


setInterval()

           
<script> 
	var blockObj = {x: 10, y:0};
			
	function init() 
	{  
		setInterval(dropBlock, 100);
	}
	
</script>
		
  
<script>          
	function dropBlock()
	{
		var canvas = document.getElementById("game");  
		var ctx = canvas.getContext("2d");

		// clear canvas 
		ctx.clearRect(blockObj.x,blockObj.y,50,50); 

		// new position
		blockObj.y += 10;

		// draw block on new position
		ctx.fillStyle = "rgb(200,0,0)";  
		ctx.fillRect (blockObj.x,blockObj.y, 50, 50);
	 }
</script>

Opdracht 3

Vallende blokken

Bewegen van het


poppetje

  • drawPerson()
  • movePerson()
  • doKeyDown()

drawPerson()

movePerson(direction)

doKeyDown()

window.addEventListener

(event, function, false)

Opdracht 4

Bewegend poppetje

checkCollision()

checkBlockAtFloor()

drawScoreBoard()

Opdracht 5

Botsingen

Opdracht 6

Have Fun!!

Opdracht 5

Botsing