<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript”>
var leftKey = false;
var rightKey = false;
var upKey = false;
var downKey = false;
var spaceKey = false;
var GAME_SPEED = 1000 / 60; // game rate
var x = 100;
var y = 100;
var sideLength = 10;
window.onload = function(){
c = document.getElementById(“myCanvas”);
c.width = window.innerWidth*0.9;
c.height = window.innerHeight*0.9;
window.setInterval(“draw()”, GAME_SPEED);
}
document.onkeyup = function(event){
switch(event.keyCode){
case 37: leftKey = false;
break;
case 39: rightKey = false;
break;
case 38: upKey = false;
break; // up
case 40: downKey = false;
break; // down
case 32: spaceKey = false;
break; // space
}
}
document.onkeydown = function(event){
switch(event.keyCode){
case 37: leftKey = true;
break;
case 39: rightKey = true;
break;
case 38: upKey = true;
break; // up
case 40: downKey = true;
break; // down
case 32: spaceKey = true;
break; // space
}
}
function draw(){
var c = document.getElementById(“myCanvas”);
var cntxt = c.getContext(“2d”);
cntxt.fillStyle=”#00FFFF”;
cntxt.fillRect(x,y, sideLength, sideLength);
if(leftKey == true){
x–;
}
if(rightKey == true){
x++;
}
if(upKey == true){
y–;
}
if(downKey == true){
y++;
}
if(spaceKey == true){
sideLength++;
}
}
</script>
</head>
<body>
<canvas id=”myCanvas” style=”border:5px solid #000000;”>
</canvas>
</body>
</html>
