微信小遊戲基於微信開發工具入門講解

文章解說的很細緻，讓你快速上手，先安裝開發工具，前往 開發者工具下載頁面 ，依照自己的作業系統下載對應的安裝套件進行安裝。接下來就可以進行微信小遊戲的開發了。

你的第一個小遊戲

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

 點擊頂部選單編譯就可以在 IDE 預覽你的第一個小遊戲。

真機預覽

#點擊工具上的編譯按鈕，可以在工具的左側模擬器介面看到這個小遊戲的表現。點擊預覽按鈕，透過微信的掃一掃在手機上體驗你的第一個小遊戲。

檔案結構

小遊戲只有以下兩個必要檔：

• game.js 小遊戲入口檔

• game .json 設定檔

設定

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

 #deviceOrientation 

#範例配置 1 #2 #3 4 5

6

##7

8

9

wx API

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

你只能使用JavaScript 來寫小遊戲。小遊戲的運行環境是一個 綁定了一些方法的 JavaScript VM。不同於瀏覽器，這個運作環境沒有 BOM 和 DOM API，只有 wx API。接下來我們將介紹如何用 wx API 來完成建立畫布、繪製圖形、顯示圖片以及回應使用者互動等基礎功能。 ###############建立 Canvas################呼叫 wx.createCanvas() 介面，可以建立一個 Canvas 物件。 ###########################1###############

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)

相关文章:

五个微信小游戏的技术要点

微信公众平台开发实现2048游戏的方法，公众2048

相关视频：

0基础微信开发入门视频教程

以上是微信小遊戲基於微信開發工具入門講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！