微信小程序之贪吃蛇小游戏开发第三天

微信小程序之贪吃蛇游戏开发最后一天了，今天主要讲的是以下三点：

1：绘制蛇身

2：碰撞函数

3：重新开始

 

一：绘制蛇身

　　蛇的身体一开始有个默认长度，然后等吃到食物的时候就加一长度。

//身体对象（数组）
var snakeBodys = [];

也是给了一个数组对象，并且逻辑是不断往数组里添加元素，但是当大于长度4的时候就停止自动添加元素

只有当吃到食物才继续变长

//蛇身体数组添加一个上一个的位置（身体对象）
        snakeBodys.push({
          x: snakeHead.x,
          y: snakeHead.y,
          w: 20,
          h: 20,
          color: "#00ff00"
        });

绘制身体部分代码：

//绘制蛇身
      for(var i=0;i<snakeBodys.length;i++){
        var snakeBody = snakeBodys[i];
        draw(snakeBody);
      }

再加一个判断条件用来控制初始最大身体长度

 if (snakeBodys.length > 4) {
          //移除不用的身体位置
            snakeBodys.shift();
     //.shift()数组删除函数
        }

 

二：碰撞函数

只有当蛇头碰到食物的时候才会增加蛇身长度。逻辑如下：

蛇头为一个四方边框，我们设置了蛇头的坐标和长宽，那么就可以利用四边的坐标值是否大于等于食物

所在的坐标值，以此来判断是否发生了碰撞。

那么就有这么个逻辑函数：

//蛇头与食物碰撞函数
    function collide(obj1,obj2){
      var l1 = obj1.x;
      var r1 = obj1.w + l1;
      var t1 = obj1.y;
      var b1 = obj1.h+t1;

      var l2 = obj2.x;
      var r2 = obj2.w + l2;
      var t2 = obj2.y;
      var b2 = obj2.h + t2;

      //这里1是蛇头方块的上下左右边框  2是食物，同样是上下左右
//（当蛇头又边框撞到食物左边框也就是大于左边框时就是碰撞了）
      if(r1>l2 && l1<r2 && b1 > t2 && t1< b2){
        return true;
      }else{
        return false;
      }
    }

obj1接收的是蛇头对象，obj2接收的是食物对象。

l1:蛇头左边框坐标值，r1：蛇头右边框坐标值，t1:蛇头上边框坐标值，b1:蛇头下边框坐标值

同理l2,r2,t2,b2

然后再设置一个用来确认是否增加蛇身的变量

//用于确定是否删除

var collideBol = true; 一开始默认是直接调用.shift()方法的

当碰撞到食物后

if (snakeBodys.length > 4) {
          //移除不用的身体位置
          if (collideBol){
            snakeBodys.shift();
          }else{
            collideBol = true;
          }
         
        }

对于碰撞后食物的重新绘制，代码如下：

在Food()对象创建方法里加一个内部方法：

this.reset = function (){
        this.x = rand(0,windowWidth);
        this.y = rand(0,windowHeight);
        this.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";
      }

在绘制食物的同时加上是否碰撞的逻辑判断

//绘制食物
      for(var i=0;i<foods.length;i++){
        var foodObj = foods[i];
        draw(foodObj); 
        if (collide(snakeHead,foodObj)){
          //console.log("撞上了");
          collideBol = false;
          foodObj.reset();//撞到后食物对象重绘，内部方法reset()
        }
      }

三：蛇头与墙壁碰撞函数（重新开始）

    //蛇头与墙壁碰撞函数
    function collide2(obj1){
      var l1 = obj1.x;
      var r1 = obj1.w + l1;
      var t1 = obj1.y;
      var b1 = obj1.h + t1;
      if (l1 <=snakeHead.w || r1 >=windowWidth || t1 <=snakeHead.h || b1 >= windowHeight){
        return true;
      }else{
        return false;
      }
    }

对于这里的windowWidth等屏幕长宽，我设置了全局变量来获取

//窗口的宽高
var windowWidth = 0;
var windowHeight = 0;

//用来获取屏幕大小
wx.getSystemInfo({
  success: function (res) {
    windowWidth = res.windowWidth;
    windowHeight = res.windowHeight;
  }
});

 

好了这就是微信小程序之贪吃蛇小游戏开发代码解析所有内容了。后一文将会贴出完整的代码