<canvas id="gc" width="400" height="400"></canvas> <script> window.onload=function() { canv = document.getElementById("gc"); ctx = canv.getContext("2d"); document.addEventListener("keydown",keyPush); setInterval(game,1000/15); } px=py=10; gs=tc=20; ax=ay=15; xv=yv=0; trail=[]; tail=5; function game() { px+=xv; py+=yv; if(px<0) { px = tc-1; } if(px>tc-1) { px = 0; } if(py<0) { py = tc -1; } if(py>tc-1) { py = 0; } ctx.fillStyle = 'black'; ctx.fillRect(0,0,canv.width,canv.height); ctx.fillStyle = 'yellow'; for(var i=0;i<trail.length;i++) { ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2); if(trail[i].x==px && trail[i].y==py) { tail = 5; } } trail.push({x:px,y:py}); while(trail.length>tail) { trail.shift(); } if(ax==px && ay==py) { tail++; ax=Math.floor(Math.random()*tc); ay=Math.floor(Math.random()*tc); } ctx.fillStyle = 'orange'; ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2); } function keyPush(evt) { switch(evt.keyCode) { case 37: xv=-1;yv=0; break; case 38: xv=0;yv=-1; break; case 39: xv=1;yv=0; break; case 40: xv=0;yv=1; break; } } </script>