文章解說的很細(xì)緻，讓你快速上手，先安裝開發(fā)工具，前往?開發(fā)者工具下載頁面?，依照自己的作業(yè)系統(tǒng)下載對(duì)應(yīng)的安裝套件進(jìn)行安裝。接下來就可以進(jìn)行微信小遊戲的開發(fā)了。

你的第一個(gè)小遊戲

#新專案選擇小程式項(xiàng)目，選擇程式碼存放的硬碟路徑。目前小遊戲不提供公開註冊(cè)，可點(diǎn)擊體驗(yàn)小遊戲使用無 AppID 模式。給你的專案一個(gè)好聽的名字，最後，勾選「建立遊戲快速啟動(dòng)模板」（注意：你要選擇一個(gè)空的目錄才會(huì)有這個(gè)選項(xiàng)），點(diǎn)擊確定，你就得到了你的第一個(gè)小遊戲了。

?點(diǎn)擊頂部選單編譯就可以在 IDE 預(yù)覽你的第一個(gè)小遊戲。

真機(jī)預(yù)覽

#點(diǎn)擊工具上的編譯按鈕，可以在工具的左側(cè)模擬器介面看到這個(gè)小遊戲的表現(xiàn)。點(diǎn)擊預(yù)覽按鈕，透過微信的掃一掃在手機(jī)上體驗(yàn)?zāi)愕牡谝粋€(gè)小遊戲。

檔案結(jié)構(gòu)

小遊戲只有以下兩個(gè)必要檔：

• game.js 小遊戲入口檔

• game .json 設(shè)定檔

設(shè)定

#小遊戲開發(fā)者透過在根目錄中編寫一個(gè)game.json 檔案進(jìn)行配置，開發(fā)者工具和客戶端需要讀取這個(gè)配置，完成相關(guān)介面渲染和屬性設(shè)定。

?#deviceOrientation?

##7

8

9

{
    "deviceOrientation": "portrait",
    "networkTimeout": {
        "request": 5000,
        "connectSocket": 5000,
        "uploadFile": 5
000,
        "downloadFile": 5000
    }
}

varcanvas = wx.createCanvas()

此時(shí)創(chuàng)建的 canvas 已經(jīng)顯示在了屏幕上，且與屏幕等寬等高。

console.log(canvas.width, canvas.height)

但是由于沒有在 canvas 上進(jìn)行繪制，所以 canvas 是透明的。使用 2d 渲染上下文的進(jìn)行簡(jiǎn)單的繪制，可以在屏幕左上角看到一個(gè) 100x100 的紅色矩形。

var context = canvas.getContext('2d')
context.fillStyle = 'red'
context.fillRect(0, 0, 100, 100)

通過 Canvas.getContext() 方法可以獲取 2d 或 WebGL 渲染上下文 RenderingContext，調(diào)用渲染上下文的繪制方法可以在 Canvas 上進(jìn)行繪制。小游戲基本上支持 2d 和 WebGL 1.0 所有的屬性和方法，詳情請(qǐng)見 RenderingContext。由于使用 WebGL 的繪制過程較為復(fù)雜，所以本文中的示例代碼都以 2d 渲染上下文的繪制方法編寫。

通過設(shè)置 width 和 height 屬性可以改變 Canvas 對(duì)象的寬高，但這也會(huì)導(dǎo)致 Canvas 內(nèi)容的清空和渲染上下文的重置。

canvas.width = 300
canvas.height = 300

顯示圖片

通過 wx.createImage() 接口，可以創(chuàng)建一個(gè) Image 對(duì)象。Image 對(duì)象可以加載圖片。當(dāng) Image 對(duì)象被繪制到 Canvas 上時(shí)，圖片才會(huì)顯示在屏幕上。

varimage = wx.createImage()

設(shè)置 Image 對(duì)象的 src 屬性可以加載一張本地圖片或網(wǎng)絡(luò)圖片，當(dāng)圖片加載完畢時(shí)會(huì)執(zhí)行注冊(cè)的 onload 回調(diào)函數(shù)，此時(shí)可以將 Image 對(duì)象繪制到 Canvas 上。

image.onload = function () {
    console.log(image.width, image.height)
    context.drawImage(image, 0, 0)
}
image.src = 'logo.png'

創(chuàng)建多個(gè) Canvas

在整個(gè)小游戲運(yùn)行期間，首次調(diào)用 wx.createCanvas 接口創(chuàng)建的是一個(gè)上屏 Canvas。在這個(gè) canvas 上繪制的內(nèi)容都將顯示在屏幕上。而第二次、第三次等后幾次調(diào)用 wx.createCanvas 創(chuàng)建的都會(huì)是離屏 Canvas。在離屏 Canvas 上繪制的內(nèi)容僅僅只是繪制到了這個(gè)離屏 Canvas 上，并不會(huì)顯示在屏幕上。

以如下代碼為例，運(yùn)行后會(huì)發(fā)現(xiàn)屏幕上并沒有在 (0, 0) 的位置顯示 100x100 的紅色矩形。因?yàn)槲覀兪窃谝粋€(gè)離屏的 Canvas 繪制的。

var screenCanvas = wx.createCanvas()
var offScreenCanvas = wx.createCanvas()
var offContext = offScreenCanvas.getContext('2d')
offContext.fillStyle = 'red'
offContext.fillRect(0, 0, 100, 100)

為了讓這個(gè)紅色矩形顯示在屏幕上，我們需要把離屏的 offScreenCanvas 繪制到上屏的 screenCanvas 上。

var screenContext = screenCanvas.getContext('2d')
screenContext.drawImage(offScreenCanvas, 0, 0)

動(dòng)畫

在 JavaScript 中，一般通過 setInterval/setTimeout/requestAnimationFrame 來實(shí)現(xiàn)動(dòng)畫效果。小游戲?qū)@些 API 提供了支持：

• setInterval()

• setTimeout()

• requestAnimationFrame()

• clearInterval()

• clearTimeout()

• cancelAnimationFrame()

另外，還可以通過 wx.setPreferredFramesPerSecond() 修改執(zhí)行 requestAnimationFrame 回調(diào)函數(shù)的頻率，以降低性能消耗。

觸摸事件

響應(yīng)用戶與屏幕的交互是游戲中必不可少的部分，小游戲參照 DOM 中的 TouchEvent 提供了以下監(jiān)聽觸摸事件的 API：

• wx.onTouchStart()

• wx.onTouchMove()

• wx.onTouchEnd()

• wx.onTouchCancel()

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)

相關(guān)文章:

五個(gè)微信小游戲的技術(shù)要點(diǎn)

微信公眾平臺(tái)開發(fā)實(shí)現(xiàn)2048游戲的方法，公眾2048

相關(guān)視頻：

0基礎(chǔ)微信開發(fā)入門視頻教程

以上是微信小遊戲基於微信開發(fā)工具入門講解的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！