<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="贪吃蛇游戏"><!--关键字-->
<meta name="description" content="贪吃蛇单人游戏"><!--描述-->
<title>Document</title><!--标题-->
<style type="text/css">
*{
margin:0;
padding:0;
}
#canvas{
width:500px;
height:500px;
display:block;
margin:100px auto 0;
border:1px solid #3d3d3d;
}
</style>
</head>
<body>
<!--画布-->
<canvas id="canvas">
您的浏览器不支持canvas，请您更换浏览器
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");//创建2D绘图空间，画笔
var r=[{x:10,y:9},{x:10,y:8}];//r数组表示贪吃蛇
var co=40;//前进的方向(37：←，38：↑，39:→，40：↓)
var food=null;//表示食物
var stop=false;//暂停功能
ctx.shadowBlur=20;//设置阴影的模糊程度，此值越大，阴影越模糊
ctx.shadowColor="#000000";//设置阴影颜色
function onframe(){
//如果有食物，则根据蛇前进的方向判断是否吃到食物，并且将蛇数组的最后一个元素放到首部
if(food){
if(stop || r[0].x<0 || r[0].x>=50 || r[0].y<0 || r[0].y>=50) return;
if((co==40&&r[0].x==food.x&&r[0].y+1==food.y) || (co==38&&r[0].x==food.x&&r[0].y-1==food.y) || (co==39&&r[0].x+1==food.x&&r[0].y==food.y) || (co==37&&r[0].x-1==food.x&&r[0].y==food.y)){
r.unshift(food);
food=null;
}
}
//将数组中最后一个元素换到首部
r.unshift(r.pop());
//pop()方法用于删除并返回数组的最后一个元素;
//unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
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,500,500);//清除画布
//绘制贪吃蛇
for(var i=0;i<r.length;i++){
ctx.fillRect(r[i].x*10,r[i].y*10,10,10);//绘制矩形
}
//如果没有食物，则在随机位置上加上一粒食物
if(food==null){
//food={y:Math.floor(Math.random()*50),x:Math.floor(Math.random()*50)};
food={y:(Math.random()*50 >>> 0),x:(Math.random()*50 >>> 0)};
}
//如果有食物，则绘制食物
if(food){
ctx.fillRect(food.x*10,food.y*10,10,5);
}
//死，游戏结束
if(r[0].x<0 || r[0].x>=50 || r[0].y<0 || r[0].y>=50){
alert("Game over!\nYou got "+(r.length-2)+" scores!");
}
}
setInterval(onframe,500);
//加入键盘事件,来控制蛇的前进方向
//每一个键盘都对应一个值
document.onkeyup=function(event){
/*var a=event.keyCode;//获取键盘对应的键值
console.log(a);*/
if(event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co)) !=2 ){
co=event.keyCode;
}else if(event.keyCode==32){
stop=!stop;
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号