微信小程式-貪吃蛇教程實例

很久很久以前，差不多大半年前吧，筆者發布了一篇關於OC版貪食蛇開發的文章，時隔個多月，微信小程式橫空出世，於是閒來無事的我又寫了一個小程式版

下面這段話請務必閱讀

筆者是做iOS的，而小程式大部分都是前端的知識，筆者之前沒有做過類似開發，所以程式碼寫的相當爛，很多東西都是一邊查資料一邊寫的，請各位輕噴，阿門！

進入正題

頁面佈局

關於小程式筆者就不做介紹了，官方有詳細文檔，我們還是先來看張圖吧

就是這個樣子的，遊戲介面跟之前的OC版是差不多的，以筆者的水平，只能設計成這樣了，畢竟不是專業的，話說這蛇怎麼長的像個J(和)B(諧)啊:joy:

先來看看用來加入元件的wxml檔

<view class="backView">
  <canvas canvas-id="snakeCanvas" class="canvas"/>
</view>
<view class="controlView">
    <button class="btnClass" bindtap="changeDirection" id="up">up</button>
    <view style="display:flex; height:33.33%">
        <button class="btnClass" bindtap="changeDirection" id="left">left</button>
        <button class="btnClass" bindtap="startGame" >{{btnTitle}}</button>
        <button class="btnClass" bindtap="changeDirection" id="right">right</button>
    </view>
    <button class="btnClass" bindtap="changeDirection" id="down">down</button>
</view>

內容是相當簡單滴，上面一個view，裡面放一個畫布，下面一個view，裡面放5個按鈕

再來看看wxss佈局

##內容不多，其實筆者對CSS也不是很了解，很多年前學習過，然而早隨著:hankey:排出去了，也許還有更優的佈局方式，不過湊合著用吧

功能實現

佈局還是很簡單的，雖然不熟，但多嘗試幾下還是可以弄出來的，接下來功能邏輯的實作才是重點，程式語言當然是js了。

話說筆者當年學js的時候，可是寫了滿滿一本的筆記，然而......算了，過去的就讓他過去吧，往事不提也罷。

思路其實與OC版的一樣

蛇：建立一個點座標數組，然後以座標點為中心在畫布上畫一個矩形

食物：隨機一個座標點，該點不能在蛇身上，否則重新隨機

蛇的移動：把蛇尾的坐標移到蛇頭前面就行了

吃到食物：每次蛇移動完畢後，如果蛇頭的座標與食物的座標一樣，蛇成長

蛇的成長：在蛇尾後面加一個點座標即可

遊戲結束：蛇頭越界或撞到自己身體即遊戲結束

建立蛇

//创建蛇，初始为5节，nodeWH为矩形的边长
function createSnake(){
  nodes.splice(0, nodes.length) //清空数组
  for (var i = 4; i >= 0; i--) {
    var node = new Node(nodeWH * (i + 0.5), nodeWH * 0.5)
    nodes.push(node);
  }
}

建立食物

function createFood(){
  //矩形的边长为10，画布宽度为250，高度为350，所以x只能取5-245，y只能取5-345
  var x = parseInt(Math.random() * 24) * nodeWH + nodeWH * 0.5
  var y = parseInt(Math.random() * 34) * nodeWH + nodeWH * 0.5

  //如果食物的坐标在蛇身上，则重新创建
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i]
    if (node.x == x && node.y == y) {
      createFood()
      return
    }
  }
  //Node为自定义的类，有两个属性x和y，表示坐标
  food = new Node(x,y)
}

蛇的移動

蛇的移動是有方向的，所以用一個變數direction來記錄蛇的移動方向，遊戲開始時，預設是向右移動。

上面有說到蛇的移動就是把蛇尾的座標移到蛇頭前面，但是這個前面並不是固定的，而是根據方向來判斷的，如​​果向右移動則右邊為前方，以此類推

吃到食物與蛇增長

每次移動完畢後，判斷蛇頭的座標是否與食物的座標相等就OK了，吃到食物後蛇的長度會增加，並且要創建一個新的食物

function isEatedFood(){
  var head = nodes[0]
  if (head.x == food.x && head.y == food.y) {
    score++
    nodes.push(lastPoint)
    createFood()
  }
}

上面的程式碼中，lastPoint就是蛇每次移動前，蛇尾的座標，如果移動後吃到食物，那麼直接在移動前的蛇尾處加上一節即可

遊戲結束

每次移動後，都要判斷蛇頭是否超過畫布，或是撞到自己的身體

function isDestroy(){
  var head = nodes[0]
  //判断是否撞到自己身体
  for (var i = 1; i < nodes.length; i++) {
    var node = nodes[i]
    if (head.x == node.x && head.y == node.y) {
      gameOver()
    }
  }
  //判断水平方向是否越界
  if (head.x < 5 || head.x > 245) {
    gameOver()
  }
  //判断垂直方向是否越界
  if (head.y < 5 || head.y > 345) {
    gameOver()
  }
}

介面繪製

每次移動都要繪製，所以需要一個定時器，筆者用的setInterval

function move(){
  lastPoint = nodes[nodes.length - 1]
  var node = nodes[0]
  var newNode = {x: node.x, y: node.y}
  switch (direction) {
    case 'up':
      newNode.y -= nodeWH;
    break;
    case 'left':
      newNode.x -= nodeWH;
    break;
    case 'right':
      newNode.x += nodeWH;
    break;
    case 'down':
      newNode.y += nodeWH;
    break;
  } 
  nodes.pop()
  nodes.unshift(newNode)
  moveEnd()
}

function startGame() {
  if (isGameOver) {
    direction = 'right'
    createSnake()
    createFood()
    score = 0
    isGameOver = false
  }
  timer = setInterval(move,300)
}

網上說setInterval的性能並不怎麼好，建議用requestAnimationFrame，但是很遺憾，筆者不會用，準確的說是不知道怎麼暫停

var animateId = 0
function move(){
    .
    .
    .
    animateId = requestAnimationFrame(move)
}
function startGame(){
    .
    .
    .
    animateId = requestAnimationFrame(move)
}

使用上面的方法可以實現蛇的移動與介面重繪，然而每次執行animateId都會被賦予新的值，所以使用cancelAnimationFrame(animateId)無法暫停，如果有懂前端開發的大神請指導下

差不多整個邏輯就是這樣的，喜歡研究的可以自己嘗試下

【相關推薦】

1. 

分享一個用html5實現的貪吃蛇特效程式碼

2. 

用Python寫貪吃蛇遊戲的程式碼實例

3. 

java實作貪吃蛇的程式碼實例

4. 

[HTML5程式碼藝術]17行程式碼的貪吃蛇小遊戲

5. 

JavaScript簡單貪吃蛇,基本面向對象

以上是微信小程式-貪吃蛇教程實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！