<html>
<head>
<style type="text/css">
body {padding:0px;margin:0px;}
</style>
</head>
<body>
<canvas id="demo"></canvas>
<script>
//get the canvas element and create the 2d-drawing context
var c=document.getElementById('demo');
var cc=c.getContext("2d");
//the following variables have a global scope, because they are used in various functions.
var x,y;
//this is where the animation is started.
//25ms is a good framerate for animations.
//the function "draw" (see below) will be executed each 25 milliseconds from now on.
var animation=setInterval(draw,25);
//let's add some event listeners, to respond to specific events raised by the user
window.addEventListener("load",setDimensions);
window.addEventListener("resize",setDimensions);
window.addEventListener("keydown",directions); // whenever a key is pressed, the function "directions" will execute
var goDown=false;goUp=false;goLeft=false;goRight=false;
//this function sets the x and y variables, thus causing to move the block.
function directions (e) {
goDown=false;
goUp=false;
goLeft=false;
goRight=false;
switch(e.keyCode) {
case 38: //arrow-up
goUp=true;
break;
case 40: //arrow-down
goDown=true;
break;
case 37: //arrow-left
goLeft=true;
break;
case 39: //arrow-right
goRight=true;
break;
}
}
//this function makes sure we'll always be using the entire width and
//height of a browser window, giving the animation somehow a
//responsive look and feel.
function setDimensions() {
c.width=window.innerWidth;
c.height=window.innerHeight;
x=(window.innerWidth/2)-25;
y=(window.innerHeight/2)-25;
};
var arrBlocks=[ ];
//this is the main function where you can program the animation.
function draw() {
//check boundaries. avoid escaping the canvas
if (x<0) {x=0;return false;}
if (y<0) {y=0;return false;}
if (x>window.innerWidth-50) {x=window.innerWidth-50;return false;}
if (y>window.innerHeight-50) {y=window.innerHeight-50;return false;}
//set the direction of the moving block
if (goUp) {y-=5};
if (goDown) {y+=5};
if (goLeft) {x-=5};
if (goRight) {x+=5};
var block = {opacity:1, xPos:x, yPos:y};
//add the newly created block to the array arrBlocks (unshift: add the block at the first position in the array)
arrBlocks.unshift (block);
//here the black rectangle will be drawn on the canvas
cc.clearRect(0,0,c.width,c.height);
for (var i=0;i<arrBlocks.length;i++) {
cc.globalAlpha=arrBlocks[i].opacity;
cc.fillStyle="darkred";
cc.fillRect(arrBlocks[i].xPos, arrBlocks[i].yPos, 50, 50);
arrBlocks[i].opacity=arrBlocks[i].opacity-0.05;
};
//remove the last item in the array (pop-function) - this is how the block is removed from the array as it's invisible anyway
if (arrBlocks.length>20) {arrBlocks.pop()};
};
</script>
</body>
</html>