大家的時(shí)間都很寶貴,話不多說, 直接進(jìn)入主題
前陣子公司的app剛上架,這段時(shí)間比較空閑, 就稍微研究了一下微信小程序...(本人iOS開發(fā), 對(duì)h5,js語法也是略懂略懂---會(huì)前端的同學(xué)搞微信小程序應(yīng)該是輕輕松松) . 畢竟微信小程序的主要構(gòu)成為(wxml+wxss+js+json) 類比于前端的(html5+css+js).... 大家就一目了然了

貪吃蛇項(xiàng)目主要由兩個(gè)文件完成(snakeGame.wxml+snakeGame.js), 這兩個(gè)文件也是必不可少的...現(xiàn)在先看snakeGame.wxml文件, 內(nèi)容很簡(jiǎn)單, 如下

<canvas style="width: 100%; height: 100%; background-color: #ccc" canvas-id="snakeCanvas" class="snake-canvas-C" bindtouchstart="touchStart" bindtouchmove="touchMove"></canvas>

創(chuàng)建畫布標(biāo)簽 配置一些樣式 綁定了兩個(gè)事件 ---bindtouchstart="touchStart" bindtouchmove="touchMove" 在snakeGame.js 對(duì)這兩個(gè)事件(touchStart手指觸摸屏幕/touchMove手指在手機(jī)上移動(dòng))進(jìn)行處理

下面著重解釋snakeGame.js文件內(nèi)容
主要是調(diào)用此函數(shù) requestAnimationFrame(function xx) // 循環(huán)執(zhí)行動(dòng)畫繪制

// 核心代碼為
function beginDraw (){   
    //  ........邏輯操作代碼
    // 調(diào)用 wx.drawCanvas，通過 canvasId 指定在哪張畫布上繪制，通過 actions 指定繪制行為
    wx.drawCanvas({
         canvasId: 'snakeCanvas',
         actions: context.getActions() // 獲取繪圖動(dòng)作數(shù)組
      });
       // 循環(huán)執(zhí)行動(dòng)畫繪制
       requestAnimationFrame(beginDraw);
    }
    beginDraw();
 }

上面代碼會(huì)循環(huán)調(diào)用beginDraw()函數(shù), 進(jìn)行蛇身, 食物的添加等操作...

下面逐行解釋代碼:

// 獲取手機(jī)屏幕寬/高 
wx.getSystemInfo({
        success: function(res) { 
            windowW = res.windowWidth;
            windowH = res.windowHeight;

        }
    })
   // 游戲開始的時(shí)候, 彈窗進(jìn)行游戲說明
    wx.showModal({
        title: '請(qǐng)開始游戲',
        content: "每得"+perSocre+"分,蛇身增長1 ",
        success: function(res) {
            if (res.confirm) {
                 beginGame();                     
            } else {
                initGame();
                // 點(diǎn)擊取消 返回上一頁
                wx.navigateBack({
                    delta: 1
                })
            }
        }
    });

游戲需要使用的變量

// 手指開始位置
var startX = 0;
var startY = 0;

// 手指移動(dòng)路徑
var moveX = 0;
var moveY = 0;

// 差值
var diffX = 0;
var diffY = 0;

var snakeW = 10;
var snakeH = 10;

var context = null;

// 蛇頭
var snakeHead = {
    color: "#0000ff",
    x: 0,
    y: 0,
    w: snakeW,
    h: snakeH
};

// 蛇身 數(shù)組 
var snakeBodys = [];

// 窗口寬/高
var windowW = 0;
var windowH = 0;

// 食物
var foods = [];

// 蛇頭移動(dòng)方向
var snakeMoveDirection = "right";

// 總得分(吃到的食物大小-寬度的總和)
var score = 0;
// 蛇身總長(每得perSocre分 +1)
var snakeLength = 0;
// 是否變長/即移除蛇身 (每得perSocre分 變長-蛇身+1)
var shouldRemoveBody = true;
// (每得perSocre分 變長-蛇身+1)
var perSocre = 5;
// 得了count個(gè)perSocre分 
var count = 1;
// 蛇移動(dòng)的速度(幀頻率-----越大越慢)
var defaultSpeedLevel = 10;
var moveSpeedLevel = defaultSpeedLevel;
//   減慢動(dòng)畫
var perform = 0;

// 吃到食物的次數(shù)
var eatFoodCount=0;
// 每 speederPerFood 次吃到食物加速
var speederPerFood = 2;   // 初始化為2  表示每吃到2次食物, 蛇的移動(dòng)速度增加

初始化游戲配置函數(shù)

    // 初始化游戲環(huán)境
    function initGame(){
        snakeHead.x= 0;
        snakeHead.y = 0;
        snakeBodys.splice(0,snakeBodys.length);//清空數(shù)組 
        snakeMoveDirection = "right";
        // 上下文
        context = wx.createContext();
        foods.splice(0,foods.length);

        score = 0;
        count = 1;
        moveSpeedLevel = defaultSpeedLevel;  // 恢復(fù)默認(rèn)幀頻率
        perform = 0;
        eatFoodCount = 0;


        // 創(chuàng)建食物 20個(gè)
        for (var i = 0; i<20; i++) {       
            var food = new Food();
            foods.push(food);
        }
    }

snakeGame.wxml文件中綁定的兩個(gè)函數(shù)(手機(jī)點(diǎn)擊touchStart/手機(jī)移動(dòng)touchMove)函數(shù)

touchStart: function (e){

      startX = e.touches[0].x;
      startY = e.touches[0].y;

    //   console.log("開始點(diǎn)擊"); 
  },

  touchMove: function (e){
    //   console.log("開始拖動(dòng)手指"); 
      moveX = e.touches[0].x;
      moveY = e.touches[0].y; 

      diffX = moveX - startX;
      diffY = moveY - startY;


      if ( Math.abs(diffX) > Math.abs(diffY) && diffX>0 && !(snakeMoveDirection == "left") ){
          //  向右
          snakeMoveDirection = "right";
        //   console.log("向右"); 
      } else if (Math.abs(diffX) > Math.abs(diffY) && diffX<0 && !(snakeMoveDirection == "right") ){
          //  向左
          snakeMoveDirection = "left";
        //   console.log("向左");
      } else if (Math.abs(diffX) < Math.abs(diffY) && diffY>0 && !(snakeMoveDirection == "top") ){
          //  向下
          snakeMoveDirection = "bottom";
        //   console.log("向下");
      } else if (Math.abs(diffX) < Math.abs(diffY) && diffY<0 && !(snakeMoveDirection == "bottom") ){
          //  向上
          snakeMoveDirection = "top";
        //   console.log("向上");
      }
  },

重要的事情后面說... 微信小程序是不允許用來開發(fā)游戲的, 確切的說是不允許在微信小程序上架游戲(比較tx主業(yè)就是游戲, 不能砸了自己的飯碗)... 此項(xiàng)目請(qǐng)?jiān)谀M器上運(yùn)行...