微信小程序小游戲開(kāi)發(fā)語(yǔ)言是javascript,小程序創(chuàng)建canvas
你只能使用 JavaScript 來(lái)編寫(xiě)小游戲。小游戲的運(yùn)行環(huán)境是一個(gè) 綁定了一些方法的 JavaScript VM。不同于瀏覽器,這個(gè)運(yùn)行環(huán)境沒(méi)有 BOM 和 DOM API,只有 wx API。接下來(lái)我們將介紹如何用 wx API 來(lái)完成創(chuàng)建畫(huà)布、繪制圖形、顯示圖片以及響應(yīng)用戶交互等基礎(chǔ)功能。
創(chuàng)建 Canvas
調(diào)用 wx.createCanvas() 接口,可以創(chuàng)建一個(gè) Canvas 對(duì)象。
var canvas = wx.createCanvas()
此時(shí)創(chuàng)建的 canvas 是一個(gè)上屏 Canvas,已經(jīng)顯示在了屏幕上,且與屏幕等寬等高。
console.log(canvas.width, canvas.height)
在整個(gè)小游戲代碼中首次調(diào)用 wx.createCanvas() 創(chuàng)建的是上屏 Canvas,之后調(diào)用則創(chuàng)建的是離屏 Canvas。如果你的項(xiàng)目中使用了官方提供的 Adapter 即 weapp-adapter.js(關(guān)于什么是 Adpater 請(qǐng)參考官方教程 Adapter),那么你此時(shí)創(chuàng)建的會(huì)是一個(gè)離屏 Canvas。因?yàn)樵?weapp-adapter.js 已經(jīng)調(diào)用了一次 wx.createCanvas(),并把返回的 canvas 作為全局變量暴露出來(lái)。假設(shè)你的項(xiàng)目目錄結(jié)構(gòu)如下:
├── game.js
├── weapp-adapter.js
└── game.json
在 weapp-adapter.js 中已經(jīng)調(diào)用了一次 wx.createCanvas(),并把返回的 canvas 作為全局變量暴露出來(lái)。
// weapp-adapter
canvas = wx.createCanvas()
如果你在 require weapp-adapter.js 之后再調(diào)用 wx.createCanvas(),那么創(chuàng)建的 Canvas 會(huì)是一個(gè)離屏的 Canvas,因?yàn)榇藭r(shí)已經(jīng)不是對(duì)該 API 的首次調(diào)用。
require('./weapp-adapter')
var myCanvas = wx.createCanvas()
在 Canvas 上進(jìn)行繪制
但是由于沒(méi)有在 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)
通過(guò) Canvas.getContext() 方法可以獲取 2d 或 WebGL 渲染上下文 RenderingContext,調(diào)用渲染上下文的繪制方法可以在 Canvas 上進(jìn)行繪制。小游戲基本上支持 2d 和 WebGL 1.0 所有的屬性和方法,詳情請(qǐng)見(jiàn) RenderingContext。由于使用 WebGL 的繪制過(guò)程較為復(fù)雜,所以本文中的示例代碼都以 2d 渲染上下文的繪制方法編寫(xiě)。
通過(guò)設(shè)置 width 和 height 屬性可以改變 Canvas 對(duì)象的寬高,但這也會(huì)導(dǎo)致 Canvas 內(nèi)容的清空和渲染上下文的重置。
canvas.width = 300
canvas.height = 300
顯示圖片
通過(guò) wx.createImage() 接口,可以創(chuàng)建一個(gè) Image 對(duì)象。Image 對(duì)象可以加載圖片。當(dāng) Image 對(duì)象被繪制到 Canvas 上時(shí),圖片才會(huì)顯示在屏幕上。
var image = 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)屏幕上并沒(méi)有在 (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)
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。了解更多小程序商城個(gè)性化定制,請(qǐng)查看小程序商城申請(qǐng)
第二部分:如何開(kāi)通一個(gè)小商店
- 第 1 頁(yè)【微信小程序小游戲】2018年微信小程序小游戲開(kāi)發(fā)入門大全(附實(shí)例)
- 第 2 頁(yè)【小程序游戲語(yǔ)言】 微信小程序小游戲開(kāi)發(fā)語(yǔ)言是javascript,小程序創(chuàng)建canvas
- 第 3 頁(yè)【小程序小游戲動(dòng)畫(huà)】 小程序小游戲怎么做動(dòng)畫(huà),小程序小游戲動(dòng)畫(huà)代碼介紹
- 第 4 頁(yè)【小程序小游戲交互】 小程序小游戲觸摸事件怎么做
- 第 5 頁(yè)【小程序游戲開(kāi)發(fā)結(jié)構(gòu)】 小程序小游戲文件結(jié)構(gòu)和開(kāi)發(fā)語(yǔ)言
- 第 6 頁(yè)【小程序小游戲案例】 敲磚塊小游戲開(kāi)發(fā)實(shí)例詳細(xì)步驟講解(附代碼)