js实现贪吃蛇

原创已于 2022-03-28 12:07:20 修改 · 5.5k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

于 2022-03-28 11:56:58 首次发布

本文介绍如何使用HTML5 Canvas标签实现贪吃蛇游戏，详细解释了游戏的核心逻辑，包括逐帧运动、碰撞检测及食物生成等关键技术。

很久没有打过js了，所以我翻出以前用画布(Canvas)标签做的贪吃蛇来复习一下顺便讲解一下执行原理。

实现思路：主要用到canvas标签来作为动画，采用逐帧运动法：先画一张之后销毁上一张，擦除->重绘（循环）需要利用定时器每隔一小段时间就擦除->重绘。运动产生的原理就是：每次运动过程中在前面加一个头然后判断是否吃到食物。如果没有吃到食物就删除尾部(这样就产生前进的效果)，吃到了就不用删除：这样就比原来长度长了一段。边界判定就是获取当前蛇头位置的x,y乘以像素值n 判断是否达到了边界，还有头是否碰到了身体的判断。

样式：

HTML:

<body> <canvas width="600" height="600"></canvas></body>

CSS:

<style>

canvas{

background-color:rgba(20,20,20,1);

display: block;

margin: 100px auto;

}</style>

样式不用怎么处理设置为黑色背景就行，使用Canvas标签只要在里面做内容就行了。

代码：

首先获取当前canvas的标签声明为canvas调用getContext(‘2d’) 返回一个可以平面绘制的对象。定义一个x,和y定义食物的位置，并且设置初始值，然后定义一个对象数组，里面属性值为x和y，索引0为头，其余为身体。然后我们看下面的图，一个随机生成食物位置的方法图。

定义一个随机数，xd和yd,然后遍历snake数组判断产生的食物是否生成到了蛇的身上，如果是继续调用方法递归。如果没有就直接赋值 x和y并且乘以30 ，注：30是每个格子的像素数30px。

调用监听方法获取当前document中的键盘事件当按下什么键位时蛇头就往什么方向走，并且禁止掉头走，意思就是当前我向左走时不能直接按下向右键走，只能向下走再向右走（这里原来有bug我想了很久最后想出来，我获取头对象的属性x和y减去离头最近的一节身体就会得到上次运动的方向，以前我是直接获取n和m的值得到运动方向的，但是这个方向只是我按下键盘后执行的方向，蛇其实并未执行的方向，这样的判断按太快一样会直接掉头，直接掉头就会吃到身体,用来新的判断就没有了这个问题)

接下来是重点代码(动画)：我分三段代码讲解

第一段代码：绘图和创建新的头

如图我只截取了一部分代码，其实没什么好看的如果play为true关闭当前计时器游戏结束由下面代码决定play是否为true，前面一部分就是重新绘图，然后就是生成食物，重点是这个newHead这里是个伏笔：这是用来让游戏有动画效果的重点一端代码，创建了一个新的头，这个新的头会替换掉旧的头。

第二段代码：判断是否碰到身体并且重新绘画蛇身

可以看到我用蛇的数组遍历遍历过程中我判断新的蛇头是否碰到了蛇的身体，如果碰到了就flag赋值为true游戏结束，这个身体也可以说是旧的身体，并且使用tools对象绘画出蛇。

第三段代码：动画产生的源头和边界判定。

第一个if是否判断是否达到了边界，如果没有就在蛇数组前面添加新的头snake.unshift(newHead),然后再判断是否吃到食物决定是否需要删除尾部，如果吃到食物就不用删除并且随机生成食物位置，如果没有吃到食物就删除最后一个元素。

最后下面是全部的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇开始制作</title>
</head>
<style>
    canvas{
       background-color:rgba(20,20,20,1);
       display: block;/*画布是行内标签，直接设置边距居中没效果，要加上一个block*/
        margin: 100px auto;
    }
    </style>
<body>    
    <canvas width="600"  height="600"></canvas>
    <script>
/*20*20格， 每格30px宽高*/
        var canvas=document.querySelector('canvas');
        let tools= canvas.getContext('2d');//2d的意思是平面绘制

        // 定义食物的位置，设置初始值
      var x=0;
      var y=0;
     
        //添加一个标记，标记食物有没有被吃掉
    let play=false;
  var snake=[{x:3,y:0},{x:2,y:0},{x:1,y:0}]; //初始蛇身长度和蛇头位置
        //蛇头运动初始方向
        var n=1;
        var m=0;
        
        // 操控蛇头运动方向 修正
        document.addEventListener('keydown',function(e){
           var dn=snake[0].x-snake[1].x;
           var dm=snake[0].y-snake[1].y;
        if(e.keyCode==37&&n!=1&&m!=0){
            if(dn==1&&dm==0){return;}
            n=-1;
            m=0; 
		}else if(e.keyCode==38&&n!=0&&m!=1){
                if(dn==0&&dm==1){return;}
   /*上*/     m=-1;
             n=0;
		}else if(e.keyCode==39&&n!=-1&&m!=0){
                if(dn==-1&&dm==0){return;}
                  n=1;
            /*右*/m=0;
		}else if(e.keyCode==40&&m!=-1&&n!=0){
                if(dn==0&&dm==-1){ return;}
	        n=0;
            m=1;//下
		}
       });
        
                // 操控蛇头运动方向 有bug版
//        document.addEventListener('keydown',function(e){
//        if(e.keyCode==37&&n!=1&&m!=0){
//            n=-1;
//            m=0; 
//		}else if(e.keyCode==38&&n!=0&&m!=1){
//   /*上*/     m=-1;
//             n=0;
//		}else if(e.keyCode==39&&n!=-1&&m!=0){
//                  n=1;
//            /*右*/m=0;
//		}else if(e.keyCode==40&&m!=-1&&n!=0){
//	        n=0;
//            m=1;//下
//		}
//       });
        
          RandomFood();
      //动画
       var showSnake= setInterval(function () {
            if (play) {
                alert("游戏结束");
                clearInterval(showSnake);
                return;
            }
            //先擦除再绘制 不断重复
            /*有动画效果的游戏基本是这种原理先擦除再绘制*/
            tools.clearRect(0, 0, 600, 600);
            tools.beginPath();
            tools.fillStyle = '#ff4880';
            tools.arc(x + 15, y + 15, 15, 0, Math.PI * 2);
            tools.fill();
            var oldHead = snake[0];

            var newHead = {// 之所以产生动态效果的原因是： 每次都会删除尾部加上一个新的头：产生一种让别人觉得前进的感觉，如果吃到了食物就不删除尾部，就能做到变长的效果
                x: oldHead.x + n,
                y: oldHead.y + m
            }
            

            //在这里用 新头的位置 来对 旧的身体进行判断
            for (var i = 0; i < snake.length; i++) {
                if (snake[i].x == newHead.x && snake[i].y == newHead.y) {  play = true;
                }
                if (i === 0) {
                    tools.fillStyle = 'rgba(248,119,60,1)';
                } else {
                    tools.fillStyle = '#ac5589';
                }
                tools.fillRect(snake[i].x * 30, snake[i].y * 30, 30, 30);
            }
            //游戏判定
            //把新添加的放在头部，每次定时器循环都会调用一次所以有了前进的效果
            if (newHead.x < 0 || newHead.y < 0 || newHead.x * 30 >= 600 || newHead.y * 30 >= 600) {
                /*用新创建的头来判定就可以在碰到墙之后在再次生成头之前取消定时器（这样就不会有半一截头插入到墙里面的情况）*/
                play = true;
            } else {
                snake.unshift(newHead);
                if (snake[0].x * 30 == x && snake[0].y * 30 == y) {
                    RandomFood();
                } else {
                    snake.pop(); //删除数组最后一个元素
                }
            }
        }, 200);
        
      //随机生成食物方法。
    function RandomFood(){
    var xd=Math.floor(Math.random()*20);
    var yd=Math.floor(Math.random()*20);
         for(let i=0;i<snake.length;i++){
             if(snake[i].x==xd&&snake[i].y==yd){
                 RandomFood();
                 return;
             }
         }
        x=xd*30;
        y=yd*30;
    }

    
 

    </script>
</body>
</html>

标签

#javascript