移动开发 \ 微信小程序 \ 微信小游戏

微信小游戏

总点击179
简介:如果对您有帮助,请关注我,欢迎加入微信小程序开发交流QQ群(173683866),有问题可以加群问我获取问群里的大神!!!

如果对您有帮助,请关注我,欢迎加入微信小程序开发交流QQ群(173683866),有问题可以加群问我获取问群里的大神!!!


模块化

小游戏提供了 CommonJS 风格的模块 API,可以通过 module.exports 和 exports 导出模块,通过 require 引入模块。假设代码包有如下结构,src/util 目录下的是一些在游戏中会反复用到的方法,res/image 目录下则是游戏中会用到一些图片。

├── game.js

├── game.json

├── src

| └── util

| ├── drawLogo.js

| └── ...

└── res

├── image

| ├── logo.png

| └── ...

└── music

└── bgm.mp3

其中,drawLogo.js 模块封装的是一个用来把 logo 画到指定位置的方法。

module.exports = function (canvas,x,y) {

var image = new Image()

image.onload = function () {

var context = canvas.getContext('2d')

context.drawImage(image,y)

}

image.src = 'res/image/logo.png'

}

注意,当用加载本地的图片、音频、视频资源时,必须写从代码包根目录开始的绝对路径。如果写以 drawLogo.js 所在目录的相对路径,则会导致系统找不到资源文件,加载失败。

image.src = '../../res/image/logo.png'

在 game.js 中 require drawLogo,就可以调用 drawLogo 模块导出的方法。

var drawLogo = require('./src/util/drawLogo')

var canvas = wx.createCanvas()

drawLogo(canvas,40,40)


动画

在 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()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)

})

全局对象

window 对象是浏览器环境下的全局对象。小游戏的运行环境中没有 BOM API,因此没有 window 对象。但是提供了全局对象 GameGlobal,所有全局定义的变量都是 GameGlobal 的属性。

console.log(GameGlobal.setTimeout === setTimeout)

console.log(GameGlobal.requestAnimationFrame === requestAnimationFrame)

// true

开发者可以根据需要把自己封装的类和函数挂载到 GameGlobal 上。

GameGlobal.render = function () {

//省略方法的具体实现...

}

render()

GameGlobal 是一个全局对象,本身也是一个存在循环引用的对象。

console.log(GameGlobal === GameGlobal.GameGlobal)

console.log 无法在真机上将存在循环引用的对象输出到 vConsole 中。因此真机调试时请注释 console.log(GameGlobal) 这样的代码,否则将会产生这样的错误

An object width circular reference can't be logged

意见反馈 常见问题 官方微信 返回顶部