<!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! You 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>