微信小程序之贪吃蛇小游戏开发（完整代码）

1：首先是index.wxml文件代码：

<!--index.wxml-->
<canvas canvas-id=\'snakeCanvas\' style=\'width:100%;height:100%;background-color:#ccc;\' 
bindtouchstart=\'canvasStart\' bindtouchmove=\'canvasMove\' bindtouchend=\'canvasEnd\'></canvas>

 

2：然后是index.js文件代码

//index.js
//手指按下时的坐标
var startX = 0;
var startY = 0;

//手指在canvas上移动的坐标
var moveX = 0;
var moveY = 0;

//移动位置跟开始位置差值
var X =0;
var Y = 0;

//手指方向
var direction = null;

//蛇移动方向
var snakeDirection = "right";

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

//食物对象(数组)
var foods = [];

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

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

//蛇头对象
var snakeHead = {
  x: parseInt(Math.random() * (windowWidth-20)),
  y: parseInt(Math.random() * (windowHeight-20)),
  color: \'#ff0000\',  //这里只能接受16进制 没法写red这样
  w: 20,
  h: 20,
  reset:function(){
    this.x = parseInt(Math.random() * (windowWidth - 20));
    this.y = parseInt(Math.random() * (windowHeight - 20));
  }
}

//用于确定是否删除
var collideBol = true;

Page({
  canvasStart:function(e){
    startX = e.touches[0].x;
    startY = e.touches[0].y;
  },
  canvasMove:function(e){
    moveX = e.touches[0].x;
    moveY = e.touches[0].y;

    X = moveX - startX;
    Y = moveY - startY;

    if(Math.abs(X) > Math.abs(Y) && X > 0){
      direction = "right";
    }else if(Math.abs(X) > Math.abs(Y) && X < 0){
      direction = "left";
    }else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
      direction = "down";  //这里很奇怪，是我数学坐标系没学好吗？明明Y轴正坐标是向上才对啊
    }else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
      direction = "top";
    }
  },
  canvasEnd:function(){
    snakeDirection = direction;
  },
  onReady:function(){

    var context = wx.createContext();
    //帧数
    var frameNum = 0;

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

    //蛇头与食物碰撞函数
    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;
      }
    }

    //蛇头与墙壁碰撞函数
    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;
      }
    }

    function directionSet(){
      switch (snakeDirection) {
        case "left":
          snakeHead.x -= snakeHead.w;
          break;
        case "right":
          snakeHead.x += snakeHead.w;
          break;
        case "down":
          snakeHead.y += snakeHead.h;
          break;
        case "top":
          snakeHead.y -= snakeHead.h;
          break;
      }
    }

    function animate(){
      frameNum++;
      if (frameNum % 20 == 0){

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

        if (snakeBodys.length > 4) {
          //移除不用的身体位置
          if (collideBol){
            snakeBodys.shift();
          }else{
            collideBol = true;
          }
         
        }
        directionSet();
      }
      
      //绘制蛇头
      draw(snakeHead);

      if (collide2(snakeHead)) {
        collideBol = false;
        snakeHead.reset();
       
        snakeBodys=[];
        draw(snakeHead);
      }

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

      //绘制食物
      for(var i=0;i<foods.length;i++){
        var foodObj = foods[i];
        draw(foodObj); 
        if (collide(snakeHead,foodObj)){
          //console.log("撞上了");
          collideBol = false;
          foodObj.reset();
        }
      }

      wx.drawCanvas({
        canvasId:"snakeCanvas",
        actions:context.getActions()
      });
      requestAnimationFrame(animate);
    }

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

    //构造食物对象
    function Food() {
      var w = rand(10,20);
      this.w = w;
      this.h = w;
      this.x = rand(this.w, windowWidth - this.w);
      this.y = rand(this.h, windowHeight - this.h);
      
      this.color = "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
      //内部方法 （重置食物位置颜色）
      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 < 20; i++) {
      var foodObj = new Food();
      foods.push(foodObj);
    }
    animate();
  }
})