微信小遊戲初試

相信每一個程序猿都有過這樣一個夢想，夢想有一天本身能作一個遊戲，現在微信小遊戲讓這個夢唾手可得

系列文章

1. 微信小程序基礎
2. 微信小遊戲初試（本文）

若是，你有開發 h5 遊戲的經驗，那麼相信你可以直接上手微信小遊戲。即便，你和我同樣以前沒有遊戲開發經驗也不要緊，看了本文以後，相信你也能夠試着開發一個簡單的小遊戲玩一玩了。

文件結構

任何應用都會有一個入口文件，微信小遊戲也是如此，小遊戲的入口文件是根目錄下的 game.js。從文件名中能夠看到，這個入口文件還是 js 文件。的確，小遊戲在開發語言上沒有同小程序那樣又另建一套規範，而是依舊採用 js 做爲開發語言。

其次，通常而言一個應用的代碼除了功能邏輯以外，還會有一些配置文件。對於小遊戲而言，它只有一個必要的配置文件 game.json，而它的配置項更是不足十個。因此說，若是以前有過 h5 遊戲的開發經驗再來開發小遊戲，能夠說是基本沒有任何的學習成本。

只要有了上述這兩個文件，小遊戲就能夠正常運行了。

Adapter

雖然，微信小遊戲使用 js 做爲開發語言，但小遊戲的運行環境是 JavaScriptCore(iOS) 和 V8(Android)，而不是熟悉的瀏覽器或者 Node，也就沒有 BOM, DOM 或者文件操做等 API。

你可能會疑惑，連 DOM 都沒有了還怎麼玩？不用擔憂，微信自身提供了一系列 API 來完成建立畫布、繪製圖形、顯示圖片以及響應用戶交互等基礎功能。

「又有 API，不是說好沒有學習成本嗎？」

這裏就又要吹一波微信了。

微信提供了一個名爲 weapp-adapter 的很是棒的庫文件，用於瀏覽器或 Node API 到微信 API 之間的適配。只需在入口文件引入它，就能夠不用額外學習微信 API，而是直接使用 DOM 或其餘（如 Node）API 來編寫小遊戲了。

注：adapter 會自動建立一個 canvas 並暴露到全局。這個 canvas 也是主畫布，以後建立的 canvas 都不會直接顯示，如要顯示，需將它們畫到主畫布上。

固然，這個 adapter 也不是完美的，它仍是有着許多的不足之處。

微信官方對它的定位是一個第三方庫，並不屬於小遊戲的範疇，以後也將再也不維護。不過，微信提供現有 adapter 實現的源碼下載，以後能夠根據各自須要，自行添加功能進行維護。

其次，全部的適配最終是經過微信提供的 API 實現，因此它對瀏覽器 API 的模擬是不完整的。

另外，圖中的遊戲引擎以前沒有接觸過就很少說了，有興趣的能夠關注官方文檔。

小遊戲的大體架構就介紹完了，閒話很少說，先搞個簡單的小遊戲操練起來。

敲磚塊小遊戲

好久以前學 canvas 的時候，正好跟着 MDN 作過一個敲磚塊的小遊戲，正好此次拿來試一試。

代碼遷移

原先的代碼模塊劃分沒有做好，都寫在了一個文件裏，但這也方便了此次遷移。

首先，建立一個 game.js 文件，在第一行引入 adapter，這很重要。同時，不要忘了建立一個 game.json 文件，只需設置一下顯示的方向。

而後，將原有的代碼從獲取 canvas 元素一直到末尾所有複製到 game.js 中，保存運行。

No warning! 一次成功。

不過，如今這個遊戲還不能動起來，須要將原先的 mouse 事件轉換爲 touch 事件。

事件轉換

首先，將原先的一系列控制遊戲開始、暫停的 click, mouseenter 和 mouseout 事件收攏成 touchstart 事件。

this.canvas.addEventListener('touchstart', function () {
    if (!$this.game.start) {
      $this.game.start = true;
      $this.ref = window.requestAnimationFrame(function () { $this.draw($this); });
    } else {
      $this.game.start = false;
      window.cancelAnimationFrame($this.ref);
    }
  });

接着是控制擋板左右移動的事件，原先是經過鼠標的移動來控制的，在移動端天然沒有了鼠標，本來打算仍是用 touch 事件來控制。在翻閱了小遊戲的 API 以後，我發現了一個更好的選擇——重力控制。

wx.onAccelerometerChange(function (e) {
    if ($this.game.start && !$this.game.over) {
      $this.ct.clearRect(0, $this.canvas.height - $this.board.height, $this.canvas.width, $this.canvas.height);
      var distance = e.x * $this.canvas.width;
      $this.board.x = $this.getBoardX($this.canvas.width / 2 + distance, $this.board);
      $this.board.draw();
    }
  });

如今就能夠經過左右傾斜手機來控制擋板的移動了，是否是更有趣了？

從 wx.onAccelerometerChange 方法就能夠看到，微信還提供了許多瀏覽器之外的功能，這裏就不一一舉例了，有興趣的同窗能夠查閱下文檔。微信小遊戲的初探就到這裏，消除磚塊的功能就留給你們本身去嘗試了。

PS：截止最新，微信小遊戲還未正式開放。

寫在最後

就如上一篇文章中所提到的，微信小遊戲相較於原生 APP 的主要優點在於：微信——擁有龐大用戶數，強社交，易推廣。

等小遊戲正式開放上線...