贪吃蛇游戏代码解析-优快云博客

基于lufy大神的代码，根据自己的理解写的，且修正了游戏里的bug，为了便于自己和大家的理解，代码都加了注释，并且没有缩减行数之类的，符合我这样的初学者观看

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇1</title>
</head>
<body>
<canvas  id="canvas" style="border:1px solid #d3d3d3;">
    你的浏览器不支持h5
</canvas>
<script>
     var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    canvas.width = 500;
    canvas.height = 500;
     //初始化  蛇的初始长度
     var r = [{x:10,y:9},{x:10,y:8},{x:10,y:7}];
     //给蛇加上阴影效果
     ctx.shadowBlur=20,ctx.shadowColor="black";
     //key是键盘的按键,默认向下，wsad代表上下左右  e代表食物
     var key="down",e=null;
     var interval = setInterval(function(){
         //判断是否结束
         if(check(r[0],0)||r[0].x>=50||r[0].x<0||r[0].y>=50||r[0].y<0){

            return;
         }

         ctx.fillStyle='red';
         //清空屏幕
        ctx.clearRect(0,0,500,500);

         //绘制食物
         if(e){
             ctx.fillRect(e.x*10,e.y*10,10,10);
         }
         while(e==null){
             e={
             x : Math.floor(50*Math.random()),
             y : Math.floor(50*Math.random())
             }


         }


         //判断吃食物
         if(conn(r)&&key=='up'&&(r[0].x == e.x&&r[0].y-1== e.y)||key=='down'&&(r[0].x == e.x&&r[0].y+1== e.y)
                 || key=='left'&&(r[0].y == e.y&&r[0].x-1== e.x)||key=='right'&&(r[0].y == e.y&&r[0].x+1== e.x)
         ){

             r.unshift(e);
             e = null;
            // r.unshift(r.pop());
         }else{
             //蛇行走
             r.unshift(r.pop());
         }
         //控制方向
         if(conn(r)&&key=="up"){
             r[0].x = r[1].x;
             r[0].y = r[1].y-1;
         }else if(conn(r)&&key=="down"){
             r[0].x = r[1].x;
             r[0].y = r[1].y+1;
         }else if(conn(r)&&key=="left"){
             r[0].x = r[1].x-1;
             r[0].y = r[1].y;
         }else if(conn(r)&&key=="right"){
             r[0].x = r[1].x+1;
             r[0].y = r[1].y;
         }
         //绘制蛇
         for(var i = 0;i< r.length;i++){

             ctx.fillRect(r[i].x*10,r[i].y*10,10,10);
         }
        //判断游戏是否结束
         if(check(r[0],0)||r[0].x>=50||r[0].x<0||r[0].y>=50||r[0].y<0){

             alert("游戏结束,吃了"+(r.length-3)+"个果实");
             clearInterval(interval);
         }
    },100);
     function conn(r){
         for(var i = 0;i< r.length;i++){

         }

         return true;

     }

     //加入键盘事件，用方向键来控制蛇前进的方向
     document.οnkeydοwn=function(event)
     {
         if(event.keyCode==87){key = "up"}
         if(event.keyCode==83){key = "down"}
         if(event.keyCode==65){key = "left"}
         if(event.keyCode==68){key = "right"}

     }
     //判断指定位置是否与蛇重叠
     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>

这是原网址：
https://blog.youkuaiyun.com/lufy_legend/article/details/8233520#comments

while(e==null||check(e))


2
 //控制方向
         if(key=="up"){
             r[0].x = r[1].x;
             r[0].y = r[1].y-1;

         }else if(key=="down"){
             r[0].x = r[1].x;
             r[0].y = r[1].y+1;

         }else if(key=="left"){
             r[0].x = r[1].x-1;
             r[0].y = r[1].y;
         }else if(key=="right"){
             r[0].x = r[1].x+1;
             r[0].y = r[1].y;
         }

画食物修改了添加了check(e)方法这样不会把食物刷在蛇的身上
删除了所有 conn® 和这个方法本身，这个方法是空方法，并没有用