Untitled

<html>
<head></head>
<body>
<canvas id="mijnCanvasje" width="500" height="500"
        style="border: 1px dotted black">
</canvas>
<script>

	var beginX = 100;
	var beginY = 100;

	function drawDisc( x,y,r ) {
	theContext.fillStyle = "rgba(0,0,255 	,1)";
	theContext.beginPath();
	theContext.arc(x,y,r,0,Math.PI*2,false);
	theContext.closePath();
	theContext.fill();
    }

	function schrijfVierkant(){
		theContext.fillStyle = "rgba(255,0,0,1)";
		theContext.beginPath();
		theContext.moveTo(beginX, beginY);
		theContext.lineTo(beginX + 20, beginY);
		theContext.lineTo(beginX, beginY +20);
		theContext.lineTo(beginX - 20, beginY);
		theContext.lineTo(beginX,beginY);
		theContext.closePath();
		theContext.fill();
		console.log("vierkant: x, y = " + beginX + ", " + beginY);
	}

	function genereerVierkant(){
//		willekeurigeXCoordinaat(0, 480);
//		willekeurigeYCoordinaat(0,480);
		schrijfVierkant();
	}

	function willekeurigeXCoordinaat( min, max ) {
	   beginX = Math.floor( Math.random()*(max-min+1) )+min;
	}

	function willekeurigeYCoordinaat ( min, max ) {
		beginY = Math.floor( Math.random()*(max-min+1) )+min;
	}

   function startDrawing(canvasId) {
      var canvasElement = document.getElementById(canvasId);
      var drawingContext = canvasElement.getContext("2d");
      return drawingContext;
   }

	var theContext = startDrawing("mijnCanvasje")
	var frameTeller = 0;

	var x = 250;
	var y = 250;
	var beurt;
	var snelheid = 5;

	var naarLinks = 2;
	var naarRechts = 0;
	var naarBeneden = 1;
	var naarBoven = 3;
	var stop= 4;

	function beweging(){
		if (beurt == naarRechts){
			// naar rechts
			x += snelheid;
			y = y;
		}else if (beurt == naarBeneden){
			//naar beneden
			x = x;
			y += snelheid;
		}else if (beurt == naarLinks){
			// naar links
			x -= snelheid;
			y = y;
		}else if (beurt == naarBoven){
			// naar boven
			x = x;
			y -= snelheid;
		}else if (beurt == stop){
			x = x;
			y = y;
		}
	}

	function richtingOmdraaien(){
		if (beurt == 1){
			beurt = 0;
		}else{
			beurt = 1;
		}
	}

	function animatieStap(){
      		theContext.clearRect(0,0,500,500);
      		drawDisc( x, y, 30 );
			if (x <= 30){
				beurt = naarRechts;
			}else if (x >= 470){
				beurt = naarLinks;
			}else if (y <= 30){
				beurt = naarBeneden;
			}else if (y >= 470){
				beurt = naarBoven;
			}
	}

	setInterval( mijnFunctie, 16.7 )

	function mijnFunctie() {
//		console.log("x: ", x, " y: ", y );
//		console.log("beurt: ",beurt);
		frameTeller++;
		beweging();
		animatieStap();
	}

	document.onkeydown = checkKey;

	function checkKey(e) {

		e = e || window.event;

		if (e.keyCode == '38') {
			beurt = 3;
		}
		else if (e.keyCode == '40') {
			beurt = 1;
		}
		else if (e.keyCode == '37') {
		   beurt = 2;
		}
		else if (e.keyCode == '39') {
		   beurt = 0;
		}
		else if (e.keyCode == '32') {
			beurt = 4;
		}
	}

	genereerVierkant();
	mijnFunctie();


</script>
</body>
</html>