/* Start javascriptet ved klik på start*/
/* Definer spillefladen */ Sorry, browser does not support canvas. /* Hvis browseren ikke understøtter canvas så vis følgende besked */

/* Indsætter billedet af baren, men viser det ikke, billedet bliver hentet i javascriptet */

HTML kode:


<!DOCTYPE html>
  	<head>
  		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  		<title>Canvas Demo</title>
  		<style type="text/css">  
		    canvas {
    			border:#666 1px dashed;
	    	}
  		</style>
  		<script type="application/javascript" language="javascript" src="bouncingball.js"/>	/* inkluder javascriptet */
  		</script> 
  	</head>
  	<body >
  		<button onClick="init();">Start</button> 				/* Start javascriptet ved klik på start*/
   		<div>
  			<canvas id="canvas" width="800" height="600">		/* Definer spillefladen */
    			Sorry, browser does not support canvas.			/* Hvis browseren ikke understøtter canvas så vis følgende besked */
  			</canvas>
  		</div>
  		<p><img src="bar.png" id="bar" style="display:none"/>	/* Indsætter billedet af baren, men viser det ikke, billedet bliver hentet i javascriptet */     
    </body>
</html>

Javascript kode

var canvas;						// Variabel til canvas elementet
var ctx;						// Variabel til context
var dx = 1;						// Variabel til at holde styr på boldens x koordinater
var dy = 2;						// Variabel til at holde styr på boldens y koordinater
var bar=new Bar(400,500);				// Variabel til battet, placeres (x, y)
var circle=new Circle(400,30,10);			// Variabel til bolden, placeres (x, y, radius)
var dxBar=6;						// Variabel til at holde styr på battets x koordinater
var timer;						// variabel der holder timer der bestemmer hvor hurtig bolden bevæger sig
var barImg;						// Variabel der holder billedet til baren

function Bar(x,y){					// Funktion der placerer battet
  this.x=x;						// sætter x coordinater
  this.y=y;						// sætter y coordinater
}
function Circle(x,y,r){					// Funktion der placerer cirkel
  this.x=x;						// sætter x coordinater
  this.y=y;						// sætter y coordinater
  this.r=r;						// sætter radius
}
function drawBall(c) {					// Funktion der tegner bolden
  ctx.beginPath();					// Begynder på at tegne 
  ctx.arc(c.x, c.y, c.r, 0, Math.PI*2, true);		// former tegningen som en cirkel med koordinater og radius fra den cirkel der er sendt med som parameter
  ctx.fill();						// Udfylder cirklen så den er dækket af farve
}
function doKeyDown(e){					// Funktion der fortæller hvad der skal ske hvis de to rigtige taster aktiveres
  if(e.keyCode==37){					// Hvis pil til venstre trykkes ned så
    if(bar.x-dxBar>0)					// Hvis battets x koordinat ikke allerede har ramt yderste venstre position så
      bar.x-=dxBar;					// Tæl x koordinaten ned med 1
  }
  else if(e.keyCode==39){				// Hvis pil til højre trykkes ned så
    if(bar.x+dxBar<canvas.width)			// Hvis battets x koordinat ikke allerede har ramt yderste højre position så
      bar.x+=dxBar;					// Tæl x koordinaten op med 1
  }
}
function init() {					// funktion der køres først ved start
  window.addEventListener("keydown",doKeyDown,false);	// Sætter en eventlistener der hele tiden lytte på om taster aktiveres og kalder doKeyDown hvis de gør.
  barImg=document.getElementById("bar");		// Henter billedet fra html koden.
  canvas = document.getElementById("canvas");		// Henter canvas/lærredet fra html dokumentet
  ctx = canvas.getContext("2d");			// Henter et indbygget objekt der har mange egenskaber og metoder til at tegne stier, kasser, corkler, tekst og billeder mv.
  timer=setInterval(draw, 10);				// Indstiller timeren på hvor hurtigt bolden skal bevæge sig
  return timer;						// Returnerer timeren
}

function draw() {					// Funktionen der tegner
  ctx.clearRect(0, 0, canvas.width, canvas.height);	// Laver et rektangel til spilleområdet
  ctx.fillStyle = "#FAF7F8";				// Sætter den ønskede farve 
  ctx.fillRect(0,0,canvas.width,canvas.height);		// Udfylder canvas med den ønskede farve
  ctx.fillStyle = "#003300";				// Sætter en ny farve
  drawBall(circle);					// kalder funktionen drawBall der tegner bolden
  if (circle.x +dx > canvas.width || circle.x +dx < 0) 	// Hvis boldens nye x koordinat er større eller mindre end spillefladen
    dx=-dx;						// Skift retning
  if(circle.y+dy>bar.y && circle.x>bar.x && circle.x<bar.x+barImg.width)
  							// Hvis boldens nye y koordinater rammer battet
    dy=-dy;						// Skift retning
  if (circle.y +dy > canvas.height || circle.y +dy < 0)
  							// Hvis boldens nye y koordinater rammer toppen af spillefladen
    dy=-dy;						// Skift retning
  circle.x += dx;					// Flyt boldens x
  circle.y += dy;					// Flyt boldens y
  ctx.drawImage(barImg,bar.x,bar.y);			// Funktion der tegner battet
  if(circle.y>bar.y){					// Hvis bolden ikke fanges af battet i bunden
    clearTimeout(timer);				// Stop timeren
    ctx.clearRect(0, 0, canvas.width, canvas.height);
							// Nulstil spillefladen
    alert("Game Over");					// Giv besked "Game Over" - spillet er slut
    location.reload();					// Nulstil siden så den er klar på ny
  }
}