文章講解的很細致，讓你快速上手，首先安裝開發(fā)工具，前往 開發(fā)者工具下載頁面 ，根據(jù)自己的操作系統(tǒng)下載對應的安裝包進行安裝。
接下來就可以進行微信小游戲的開發(fā)了。
你的第一個小游戲新建項目選擇小程序項目，選擇代碼存放的硬盤路徑。
目前小游戲不提供公開注冊，可點擊體驗小游戲使用無 AppID 模式。
給你的項目起一個好聽的名字，最后，勾選“建立游戲快速啟動模板”（注意：
你要選擇一個空的目錄才會有這個選項），點擊確定，你就得到了你的第一個小游戲了。
點擊頂部菜單編譯就可以在 IDE 預覽你的第一個小游戲。
真機預覽點擊工具上的編譯按鈕，可以在工具的左側模擬器界面看到這個小游戲的表現(xiàn)。
點擊預覽按鈕，通過微信的掃一掃在手機上體驗你的第一個小游戲。
文件結構小游戲只有以下兩個必要文件：
game.js 小游戲入口文件game.json 配置文件配置小游戲開發(fā)者通過在根目錄編寫一個 game.json 文件進行配置，開發(fā)者工具和客戶端需要讀取這個配置，完成相關界面渲染和屬性設置。
deviceOrientation 示例配置123456789{
"deviceOrientation": "portrait", "networkTimeout": {
"request": 5000, "connectSocket": 5000, "uploadFile": 5 000, "downloadFile": 5000 }
}
wx API你只能使用 JavaScript 來編寫小游戲。
小游戲的運行環(huán)境是一個 綁定了一些方法的 JavaScript VM。
不同于瀏覽器，這個運行環(huán)境沒有 BOM 和 DOM API，只有 wx API。
接下來我們將介紹如何用 wx API 來完成創(chuàng)建畫布、繪制圖形、顯示圖片以及響應用戶交互等基礎功能。
創(chuàng)建 Canvas調(diào)用 wx.createCanvas() 接口，可以創(chuàng)建一個 Canvas 對象。
1varcanvas = wx.createCanvas()此時創(chuàng)建的 canvas 已經(jīng)顯示在了屏幕上，且與屏幕等寬等高。
1console.log(canvas.width, canvas.height)但是由于沒有在 canvas 上進行繪制，所以 canvas 是透明的。
使用 2d 渲染上下文的進行簡單的繪制，可以在屏幕左上角看到一個 100x100 的紅色矩形。
123var context = canvas.getContext('
2d'
) context.fillStyle = '
red'
context.fillRect(0, 0, 100, 100)通過 Canvas.getContext() 方法可以獲取 2d 或 WebGL 渲染上下文 RenderingContext，調(diào)用渲染上下文的繪制方法可以在 Canvas 上進行繪制。
小游戲基本上支持 2d 和 WebGL 1.0 所有的屬性和方法，詳情請見 RenderingContext。
由于使用 WebGL 的繪制過程較為復雜，所以本文中的示例代碼都以 2d 渲染上下文的繪制方法編寫。
通過設置 width 和 height 屬性可以改變 Canvas 對象的寬高，但這也會導致 Canvas 內(nèi)容的清空和渲染上下文的重置。
12canvas.width = 300 canvas.height = 300顯示圖片通過 wx.createImage() 接口，可以創(chuàng)建一個 Image 對象。
Image 對象可以加載圖片。
當 Image 對象被繪制到 Canvas 上時，圖片才會顯示在屏幕上。
1varimage = wx.createImage()設置 Image 對象的 src 屬性可以加載一張本地圖片或網(wǎng)絡圖片，當圖片加載完畢時會執(zhí)行注冊的 onload 回調(diào)函數(shù)，此時可以將 Image 對象繪制到 Canvas 上。
12345image.onload = function () {
console.log(image.width, image.height) context.drawImage(image, 0, 0) }
image.src = '
logo.png'
創(chuàng)建多個 Canvas在整個小游戲運行期間，首次調(diào)用 wx.createCanvas 接口創(chuàng)建的是一個上屏 Canvas。
在這個 canvas 上繪制的內(nèi)容都將顯示在屏幕上。
而第二次、第三次等后幾次調(diào)用 wx.createCanvas 創(chuàng)建的都會是離屏 Canvas。
在離屏 Canvas 上繪制的內(nèi)容僅僅只是繪制到了這個離屏 Canvas 上，并不會顯示在屏幕上。
以如下代碼為例，運行后會發(fā)現(xiàn)屏幕上并沒有在 (0, 0) 的位置顯示 100x100 的紅色矩形。
因為我們是在一個離屏的 Canvas 繪制的。
12345var screenCanvas = wx.createCanvas() var offScreenCanvas = wx.createCanvas() var offContext = offScreenCanvas.getContext('
2d'
) offContext.fillStyle = '
red'
offContext.fillRect(0, 0, 100, 100)為了讓這個紅色矩形顯示在屏幕上，我們需要把離屏的 offScreenCanvas 繪制到上屏的 screenCanvas 上。
12var screenContext = screenCanvas.getContext('
2d'
) screenContext.drawImage(offScreenCanvas, 0, 0) 動畫在 JavaScript 中，一般通過 setInterval/setTimeout/requestAnimationFrame 來實現(xiàn)動畫效果。
小游戲?qū)@些 API 提供了支持：
setInterval()setTimeout()requestAnimationFrame()clearInterval()clearTimeout()cancelAnimationFrame()另外，還可以通過 wx.setPreferredFramesPerSecond() 修改執(zhí)行 requestAnimationFrame 回調(diào)函數(shù)的頻率，以降低性能消耗。
觸摸事件響應用戶與屏幕的交互是游戲中必不可少的部分，小游戲參照 DOM 中的 TouchEvent 提供了以下監(jiān)聽觸摸事件的 API：
wx.onTouchStart()wx.onTouchMove()wx.onTouchEnd()wx.onTouchCancel()0102030405060708091011121314wx.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)相關文章:五個微信小游戲的技術要點微信公眾平臺開發(fā)實現(xiàn)2048游戲的方法，公眾2048相關視頻：
0基礎微信開發(fā)入門視頻教程以上就是微信小游戲基于微信開發(fā)工具入門講解的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！
微信
分享相關標簽：
微信小游戲 教程本文原創(chuàng)發(fā)布php中文網(wǎng)，轉載請注明出處，感謝您的尊重！
上一篇：
關于微信自定義分享功能的實現(xiàn)代碼
下一篇：
微信公眾號開發(fā)，實現(xiàn)倒計時的一個功能（純代碼）相關文章相關視頻修改微信號有什么影響嗎？微信中共享實時位置什么意思數(shù)據(jù)庫設計的基本原則是什么？微信小程序調(diào)用圖片安全API微信小游戲基于微信開發(fā)工具入門講解PHP開發(fā)基礎教程之環(huán)境搭建PHP教程PHP開發(fā)基礎教程之學習之語法PHP開發(fā)基礎教程之變量PHP開發(fā)基礎教程之輸出語句 [溫州做微信公眾號]