<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇H5</title>
</head>
<body>
<canvas width="400px" height="400px" style="border:1px solid gray" id="mycanvas"></canvas>
</body>
<script>
var c=document.getElementById("mycanvas");//画布
var cxt=c.getContext("2d");//蛇
cxt.fillstyle="black";//画出蛇
var snake=[];//用数组保存蛇身的长度
var derection=3;//蛇头的前进方向
var x=y=8;//蛇头的坐标
var len=6;//蛇身长度
var foodx=foody=20;//食物的初始坐标
cxt.fillRect(foodx*8,foody*8,8,8);
window.setInterval(move,200);//蛇前进的速度
function move(){//让蛇移动
document.οnkeydοwn=function(e){
switch(e.keyCode){
case 37:derection=1;break;//左
case 38:derection=2;break;//上
case 39:derection=3;break;//右
case 40:derection=4;break;//下
}}
switch(derection){
case 1:x-=8;break;
case 2:y-=8;break;
case 3:x+=8;break;
case 4:y+=8;break;
}
snake.unshift({'x':x,'y':y});//蛇头改变前进方向
if(snake.length>len){
var s2=snake.pop();//蛇尾前进-
cxt.clearRect(s2['x'],s2['y'],8,8);
}
cxt.fillRect(x,y,8,8);//蛇头前进+
if(foodx*8==x && foody*8==y){//判断蛇是否吃到了食物，如果吃到了蛇身长度+1，并且产生新的食物
len=len+1;food();
}
var s1=snake[0];//蛇头
if(s1['x']>=400 || s1['x']<=0 || s1['y']>=400 || s1['y']<=0){//如果蛇头超出画布
alert("撞墙而死！游戏即将重新开始......");
window.location.reload();
}
/*for(var i=1;i<snake.length;i++)//将蛇头与蛇的每一段身体比对
if(s1['x']==snake[i].x && s1['y']==snake[i].y){//如果碰到自己的身体
alert("被自己咬死！游戏即将重新开始......");
window.location.reload();
}
*/
}
function food(){//随机产生食物的小黑点
foodx=Math.ceil(Math.random()*50);//先*50再*8，可以保证食物出现在画布之内，同时又保证了可与蛇的运行轨迹完全吻合
foody=Math.ceil(Math.random()*50);
cxt.fillRect(foodx*8,foody*8,8,8);
}
</script>
</html>
814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
