在小程序上做一个简易的贪食蛇

在小程序上做一个贪食蛇小游戏主要是使用到了 Canvas 画布。所以要对里面几个主要的属性要有一个了解即 bindtouchstart（手指触摸动作开始） 、bindtouchmove（手指触摸后移动）、bindtouchend（手指触摸动作结束），这几个属性实现了对贪食蛇的控制。蛇动画使用 RequestAnimationFrame 生成。

布局

控制与动画

1. 定义蛇头

var snake = {
  x:0,
  y:0,
  color:'red',
  w:10,
  h:10
}

w、h 为头的长宽。

2. 利用 bindtouchstart 获取手指刚触碰时的坐标

TouchStart:function(e){
    StartX = e.touches[0].x;//手指刚开始触碰时的X
    StartY = e.touches[0].y;
  }

3. 利用 bindtouchmove 获取手指移动时的坐标并判断出相对位置

 TouchMove:function(e){
    moveX = e.touches[0].x;
    moveY = e.touches[0].y;

    //移动位置与初始触碰位置差值
    absX = moveX - StartX;
    absY = moveY - StartY;

    
    //当 X 轴坐标 > Y 轴坐标且大于0时，手指相对初始触碰点往右移动
    if (Math.abs(absX) > Math.abs(absY) && absX > 0 ){
      dircetion = 'right';
      flag = 2;
      console.log('右移');
    }
      if (Math.abs(absX) > Math.abs(absY) && absX < 0 && flag != 2){
       dircetion = 'left';     
       console.log('左移');
       flag = 0;
    }
}

设立 Flag 标记用于判断上次操作与本次操作是否是两个方向相反的移动操作，当操作刚好为一组相反方向时不能对蛇头进行操作。

4. bindtouchend 获取最终移动方向

  TouchEnd:function(){
    sdircetion = dircetion;
  }

手指离开屏幕时触发，获取最终方向

5. 获取蛇头移动坐标

switch (sdircetion) {

          case 'right': snake.x += snake.w;
            break;
          case 'left': snake.x -= snake.w;
            break;
          case 'top': snake.y -= snake.h;
            break;
          case 'bottom': snake.y += snake.h;
            break;

        }

X 轴移就是在初始位置上 + 蛇头宽，Y 轴移动就是初始 + 蛇头高。

6. 动画描绘

    function drawSnake(obj) {
      context.setFillStyle(obj.color);
      context.beginPath();
      context.rect(obj.x, obj.y, obj.w, obj.h);
      context.closePath();
      context.fill();     
    }

7. 获取蛇身

        snakeBodys.push({
          x: snake.x,
          y: snake.y,
          w: 10,
          h: 10,
          color: 'blue'
        })


        if (snakeBodys.length > 4) {
         
          snakeBodys.shift();//蛇身大于4时，移出一个位置
        
  }

将蛇头移动前的一个坐标赋给蛇身，初始蛇身长度不超过4个。

8. 在屏幕上随机生成食物

    function rand(Max,Min){
      return parseInt(Math.random()*Max-Min)+Min;
    }

   

    function Food(){
      this.x = rand(windowsWidth-20,0);
      this.y = rand(windowsHeight-20,0);
      this.w = 10;
      this.h = 10;

      this.color = "rgb(" + rand(255, 0) + "," + rand(255, 0) + "," + rand(255, 0)+")";

    }

9. 判断是否与食物进行了碰撞

碰撞模拟

TBLR 分别指的是上下左右四个坐标，Y 轴向下为 + ； X 轴向右为 +

当满足 L1 < R2 && R1 > L2 && B1 > T2 && T1 < B2 蛇头与食物碰撞

 function collision(Obj1,Obj2){
      var left1 = Obj1.x;
      var right1 = Obj1.x+Obj1.w;
      var top1  = Obj1.y;
      var bottom1 = Obj1.y+Obj1.h;

      var left2 = Obj2.x;
      var right2 = Obj2.x + Obj2.w;
      var top2 = Obj2.y;
      var bottom2 = Obj2.y + Obj2.h;

      if(right1 > left2 && left1 < right2 && bottom1 > top2 && top1 < bottom2){
        return true;
      }
}

当碰撞到食物时 - 1，蛇身 + 1

      if (collision(snake,food)){
        collisionFlag = 0;
        console.log('撞上');
        foods.splice(i,1);
      }
      if (snakeBodys.length > 4) {
          if (collisionFlag){
          snakeBodys.shift();//蛇身碰到食物时不移除，否则移出每次移出一个保持长度不变
         }

最终效果

1

2