//判断指定位置是否与蛇重叠
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>
鉴于有些朋友感觉代码读起来费劲,下面再提供一个经过格式调整后的代码,对应上面代码的各部分功能完全相同,只是写法不一样罢了
<!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 .x - 1;
r[0].y = r .y;
break;
case 38:
r[0].x = r .x;
r[0].y = r .y - 1;
break;
case 39:
r[0].x = r .x + 1;
r[0].y = r .y;
break;
case 40:
r[0].x = r .x;
r[0].y = r .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 overnYou 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>