微信小程序：贪吃蛇

微信小程序：贪吃蛇

wx.js

var startX = 0;
var startY = 0;
var moveX = 0;
var moveY = 0;
//移动位置和开始位置的坐标差值
var X = 0;
var Y = 0;
//蛇的对象
var snake = {
  x: 0,
  y: 0,
  color: "#ff0000", 
  w: 20,
  h: 20,
}
//食物对象
var food = {
  x: 0,
  y: 0,
  color: "#ff0000", 
  w: 20,
  h: 20,
}
//蛇身对象数据
var snakeArr = [];
//方向
var direction = "right";
var directio = null;
//窗口宽高
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
//食物数组
var foodArr = [];
//记录吃的食物数
var foodNum = 0;

Page({
//按下获取坐标 touchs触摸
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){
     directio="right"
   }else if(Math.abs(X)>Math.abs(Y)&&X<0){
     directio = "left"
   }else if(Math.abs(Y)>Math.abs(X)&& Y>0){
     directio = "bottom"
   }else if(Math.abs(Y)>Math.abs(X)&&Y<0){
     directio = "top"
   }
   direction = directio;
},

  onReady: function () {
    //获取画布上下文 对象
    var context = wx.createCanvasContext("snakCanvas", this);

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

      switch (direction)
        {
          case "left":  snake.x -= 20;
          break;
          case "right": snake.x += 20;
          break;
          case "top":   snake.y -= 20;
          break;
          case "bottom": snake.y += 20;
          break;
        }
        draw(snake)

      //绘制食物
      for (var i = 0; i < foodArr.length; i++) 
      {
        var food = foodArr[i];
        draw(food);
        if(collide(snake,food))
        {
          //碰到食物 改变食物位置
          food.x = rand(0, windowWidth);
          food.y = rand(0, windowHeight);
          food.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";
          var w = rand(10, 20);
          food.w = w;
          food.h = w;
          draw(food);
        }
      }
      
      //向蛇身体添加最新的位置
        snakeArr.push({
          x: snake.x,
          y: snake.y,
          w: 20,
          h: 20,
          color: "#fff000",
        });
      if(snakeArr.length>foodNum){ snakeArr.shift() }
      for(let i=0;i<snakeArr.length-1;i++)
      {
        let body=snakeArr[i]
        draw(body)
      }
      context.draw();

      //界限
      if(snake.x>windowWidth)
      { snake.x=-20 }
      else if(snake.x<0)
      { snake.x=windowWidth }
      else if(snake.y>windowHeight)
      { snake.y=-20 }
      else if(snake.y<0)
      { snake.y=windowHeight }

    },300)


    //随机数
    function rand(max, min)
    { return parseInt(Math.random() * (max - min) + min)}

    //碰撞函数 obj1蛇 obj2 食物对象
    function collide(obj1, obj2) {

      var l1 = obj1.x;
      var r1 = l1 + obj1.w;
      var t1 = obj1.y;
      var b1 = t1 + obj1.h;

      var l2 = obj2.x;
      var r2 = l2 + obj2.w;
      var t2 = obj2.y;
      var b2 = t2 + obj2.h;
      //蛇头范围和食物范围判断
      if (r1 > l2 && l1 < r2 && b1 > t2 && t1 < b2)
      {
        foodNum++//食物个数
        return true;
      } 
    }

    //初始食物
    function foodstart()
    {
      for(let i=0;i<20;i++)
      {
          food.x = rand(0, windowWidth);
          food.y = rand(0, windowHeight);
          var w = rand(10, 20);
          food.w = w;
          food.h = w; 
          food.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";

          foodArr.push(JSON.parse(JSON.stringify(food)))//制作食物并传到数组
      }
    } foodstart();//启动食物

    
  } 
})

WX.ML

<canvas canvas-id="snakCanvas" style="width:100%;height:100%;background-color:#ccc" 
bindtouchstart="canvasStart" bindtouchmove="canvasMove"></canvas>

WX.CSS

Page{
  height: 100%
}

来源：CSDN

作者：梁宇枫

链接：https://blog.csdn.net/ACoolnight/article/details/103830891