<!DOCTYPE html>
<html>
<body>
<canvas id=
"myCanvas"
width=
"240"
height=
"240"
style=
"border:1px solid #d3d3d3;"
>Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var
ctx=document.getElementById(
"myCanvas"
).getContext(
"2d"
);
var
r = [{x:10,y:9},{x:10,y:8}];
var
co=40;
var
e=null;
ctx.shadowBlur=20;
ctx.shadowColor=
"black"
;
function
onframe(){
if
(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)
return
;
if
(e){
if
((co==40&&r[0].x==e.x&&r[0].y+1==e.y)
||(co==38&&r[0].x==e.x&&r[0].y-1==e.y)
||(co==37&&r[0].x-1==e.x&&r[0].y==e.y)
||(co==39&&r[0].x+1==e.x&&r[0].y==e.y)){
r.unshift(e);
e=null;
}
}
r.unshift(r.pop());
switch
(co){
case
37:
r[0].x = r[1].x - 1;
r[0].y = r[1].y;
break
;
case
38:
r[0].x = r[1].x;
r[0].y = r[1].y - 1;
break
;
case
39:
r[0].x = r[1].x + 1;
r[0].y = r[1].y;
break
;
case
40:
r[0].x = r[1].x;
r[0].y = r[1].y + 1;
break
;
}
ctx.clearRect(0,0,240,240);
if
(e)ctx.fillRect(e.x*10,e.y*10,10,10);
for
(
var
i=0;i<r.length;i++){
ctx.fillRect(r[i].x*10,r[i].y*10,10,10);
}
while
(e==null || check(e)){
e={y:(Math.random()*24 >>>0),x:(Math.random()*24 >>>0)};
}
if
(check(r[0],0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24){
alert(
"game over\nYou get ["
+(r.length-2)+
"]"
);
}
}
setInterval(onframe,100);
document.onkeyup =
function
(event){
if
(event.keyCode>=37 && event.keyCode<=40 && (Math.
abs
(event.keyCode-co) != 2)){
co = event.keyCode;
}
}
function
check(e,j){
for
(
var
i=0;i<r.length;i++){
if
(j!=i && r[i].x==e.x && r[i].y==e.y)
return
true;
}
return
false;
}
</script>
</body>
</html>