微信小程序--超簡單貪喫蛇

上代碼：

tan.js

// pages/tan/tan.js
var startX=0;
var startY=0;
var moveX = 0;
var moveY = 0;
//移動位置和開始位置的座標差值
var  X=0;
var Y =0;
//蛇頭的對象
var snakeHead={
  x:0,
  y:0,
  color:"red",
  w:20,
  h:20
}
//蛇身對象數據
var snakeArr=[];
//方向
var direction ="right";
var directio=null;
//食物數組
var foodArr=[];
//窗口寬高
var windowWidth=0;
var windowHeight=0;
//撞上爲true
var bool=true;
//記錄喫的食物數
var foodNum=0;
Page({
 //按下獲取座標
 touchstart:function(e){
   startX = e.touches[0].x;
   startY = e.touches[0].y;
   
 },
 touchmove: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);
  //幀數
  var num=0;
  function draw(obj){
    context.setFillStyle(obj.color);
    context.beginPath();
    context.rect(obj.x, obj.y, obj.w, obj.h);
    //關閉路徑
    context.closePath();
    //填充
    context.fill();
  }
  //碰撞函數 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){
      return true;
    }else{
      return false;
    }
  }
   function animation(){
    if(num==1){
      console.log(bool)
    }
     if (num % 10 == 0) {
       //向蛇身體添加最新的位置
      
         snakeArr.push({
           x: snakeHead.x,
           y: snakeHead.y,
           w: 20,
           h: 20,
           color: "#00ff00"
         });
     
      
        if (snakeArr.length>foodNum){
          snakeArr.shift()
        }
       switch (direction) {
         case "right":
           snakeHead.x += snakeHead.w;
           if (Math.abs(snakeHead.x) >= windowWidth && snakeHead.x>0){
             snakeHead.x = 0;
           }
           break;
         case "left":
           snakeHead.x -= snakeHead.w;
           if (Math.abs(snakeHead.x+20) == 0 ) {
             snakeHead.x = windowWidth;
           }
           break;
         case "top":
           snakeHead.y -= snakeHead.h;
           if (snakeHead.y+20<=0){
             snakeHead.y = windowHeight;
           }
           console.log(windowHeight)
          //  console.log(snakeHead.y)
           break;
         case "bottom":
           snakeHead.y += snakeHead.h;
           if (snakeHead.y >= windowHeight){
             snakeHead.y =0;
           }
           
           break;
       }
       
     }
     num++;
     //繪製蛇頭
     draw(snakeHead);

     //繪製蛇身
     for (var i = 0; i < snakeArr.length;i++){
       var snake = snakeArr[i]
       draw(snake);
     }
   
       
    
     //繪製食物
     for (var i = 0; i < foodArr.length; i++) {
       var food = foodArr[i];
       draw(food);
      if(collide(snakeHead,food)){
        foodNum++;
        //如果碰到食物,那麼該食物就重新隨機生成       
        bool=true;
        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);
      }else{
        bool=false;
      }
     }
     requestAnimationFrame(animation)
     wx.drawCanvas({
       canvasId:"snakCanvas",
       actions:context.getActions()
     })
   }
   //隨機數
   function rand(max,min){
     return parseInt(Math.random() * (max - min) + min)
   }
   var res = wx.getSystemInfoSync()
   windowWidth = res.windowWidth;
   windowHeight = res.windowHeight;
   //食物對象
   function Food(){
     this.x = rand(0, windowWidth);
     this.y = rand(0, windowHeight);
     var w =rand(10,20);
     this.w=w;
    this.h=w;
    this.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255)+")";
   }
   for (var i = 0; i < 20; i++) {
     var food = new Food();
     foodArr.push(food);
   }
    animation()
 }

})  

tan.wxml

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

tan.wxss

/* pages/tan/tan.wxss */
Page{
  height: 100%
}

效果圖：真的超級簡單簡陋的