文章解說的很細緻，讓你快速上手，先安裝開發工具，前往 開發者工具下載頁面 ，依照自己的作業系統下載對應的安裝套件進行安裝。接下來就可以進行微信小遊戲的開發了。
你的第一個小遊戲
#新專案選擇小程式項目，選擇程式碼存放的硬碟路徑。目前小遊戲不提供公開註冊，可點擊體驗小遊戲使用無 AppID 模式。給你的專案一個好聽的名字，最後，勾選「建立遊戲快速啟動模板」（注意：你要選擇一個空的目錄才會有這個選項），點擊確定，你就得到了你的第一個小遊戲了。
點擊頂部選單編譯就可以在 IDE 預覽你的第一個小遊戲。
真機預覽
#點擊工具上的編譯按鈕，可以在工具的左側模擬器介面看到這個小遊戲的表現。點擊預覽按鈕，透過微信的掃一掃在手機上體驗你的第一個小遊戲。
檔案結構
小遊戲只有以下兩個必要檔：
game.js 小遊戲入口檔
game .json 設定檔
設定
#小遊戲開發者透過在根目錄中編寫一個game.json 檔案進行配置，開發者工具和客戶端需要讀取這個配置，完成相關介面渲染和屬性設定。
#deviceOrientation
|
#範例配置
1 #2 #3 4 5 |
6
|
##7
8
9
{
"deviceOrientation": "portrait",
"networkTimeout": {
"request": 5000,
"connectSocket": 5000,
"uploadFile": 5
000,
"downloadFile": 5000
}
}登入後複製 | wx API
varcanvas = wx.createCanvas()
此时创建的 canvas 已经显示在了屏幕上，且与屏幕等宽等高。
1 | console.log(canvas.width, canvas.height) 登入後複製 |
但是由于没有在 canvas 上进行绘制，所以 canvas 是透明的。使用 2d 渲染上下文的进行简单的绘制，可以在屏幕左上角看到一个 100x100 的红色矩形。
1 2 3 | var context = canvas.getContext('2d') context.fillStyle = 'red' context.fillRect(0, 0, 100, 100) 登入後複製 |
通过 Canvas.getContext() 方法可以获取 2d 或 WebGL 渲染上下文 RenderingContext，调用渲染上下文的绘制方法可以在 Canvas 上进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法，详情请见 RenderingContext。由于使用 WebGL 的绘制过程较为复杂，所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。
通过设置 width 和 height 属性可以改变 Canvas 对象的宽高，但这也会导致 Canvas 内容的清空和渲染上下文的重置。
1 2 | canvas.width = 300 canvas.height = 300 登入後複製 |
显示图片
通过 wx.createImage() 接口，可以创建一个 Image 对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时，图片才会显示在屏幕上。
1 | varimage = wx.createImage() 登入後複製 |
设置 Image 对象的 src 属性可以加载一张本地图片或网络图片，当图片加载完毕时会执行注册的 onload 回调函数，此时可以将 Image 对象绘制到 Canvas 上。
1 2 3 4 5 | image.onload = function () {
console.log(image.width, image.height)
context.drawImage(image, 0, 0)
}
image.src = 'logo.png'登入後複製 |
创建多个 Canvas
在整个小游戏运行期间，首次调用 wx.createCanvas 接口创建的是一个上屏 Canvas。在这个 canvas 上绘制的内容都将显示在屏幕上。而第二次、第三次等后几次调用 wx.createCanvas 创建的都会是离屏 Canvas。在离屏 Canvas 上绘制的内容仅仅只是绘制到了这个离屏 Canvas 上，并不会显示在屏幕上。
以如下代码为例，运行后会发现屏幕上并没有在 (0, 0) 的位置显示 100x100 的红色矩形。因为我们是在一个离屏的 Canvas 绘制的。
1 2 3 4 5 | var screenCanvas = wx.createCanvas() var offScreenCanvas = wx.createCanvas() var offContext = offScreenCanvas.getContext('2d') offContext.fillStyle = 'red' offContext.fillRect(0, 0, 100, 100) 登入後複製 |
为了让这个红色矩形显示在屏幕上，我们需要把离屏的 offScreenCanvas 绘制到上屏的 screenCanvas 上。
1 2 | var screenContext = screenCanvas.getContext('2d') screenContext.drawImage(offScreenCanvas, 0, 0) 登入後複製 |
动画
在 JavaScript 中，一般通过 setInterval/setTimeout/requestAnimationFrame 来实现动画效果。小游戏对这些 API 提供了支持：
setInterval()
setTimeout()
requestAnimationFrame()
clearInterval()
clearTimeout()
cancelAnimationFrame()
另外，还可以通过 wx.setPreferredFramesPerSecond() 修改执行 requestAnimationFrame 回调函数的频率，以降低性能消耗。
触摸事件
响应用户与屏幕的交互是游戏中必不可少的部分，小游戏参照 DOM 中的 TouchEvent 提供了以下监听触摸事件的 API：
wx.onTouchStart()
wx.onTouchMove()
wx.onTouchEnd()
wx.onTouchCancel()
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | wx.onTouchStart(function (e) {
console.log(e.touches)
})
wx.onTouchMove(function (e) {
console.log(e.touches)
})
wx.onTouchEnd(function (e) {
console.log(e.touches)
})
wx.onTouchCancel(function (e) {
console.log(e.touches)登入後複製 |
相关文章:
相关视频：
以上是微信小遊戲基於微信開發工具入門講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
