微信小游戏开发者通过在根目录编写一个game.json文件举行设置，，，，
，开发者工具和客户端需要读取这个设置，，，，
，完成相关界面渲染和属性设置，，，，
，只能使用JavaScript来编写微信小游戏，，，，
，微信小程序游戏的运行情形是一个绑定了一些要领的JavaScript VM。。。。。。

小游戏开发者：微信小游戏开发设置API接口

文件结构

小游戏只有以下两个须要文件：

├── game.js
└── game.json

1. game.js 小游戏入口文件

2. game.json 设置文件

设置

小游戏开发者通过在根目录编写一个 game.json 文件举行设置，，，，
，开发者工具和客户端需要读取这个设置，，，，
，完成相关界面渲染和属性设置。。。。。。

deviceOrientation

示例设置

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

wx API

你只能使用 JavaScript 来编写小游戏。。。。。。小游戏的运行情形是一个 绑定了一些要领的 JavaScript VM。。。。。。差别于浏览器，，，，
，这个运行情形没有 BOM 和 DOM API，，，，
，只有 wx API。。。。。。接下来我们将介绍怎样用 wx API 来完成建设画布、绘制图形、显示图片以及响应用户交互等基础功效。。。。。。

建设 Canvas

挪用 wx.createCanvas() 接口，，，，
，可以建设一个 Canvas 工具。。。。。。

var canvas = wx.createCanvas()

此时建设的 canvas 是一个上屏 Canvas，，，，
，已经显示在了屏幕上，，，，
，且与屏幕等宽等高。。。。。。

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

在整个小游戏代码中首次挪用 wx.createCanvas() 建设的是上屏 Canvas，，，，
，之后挪用则建设的是离屏 Canvas。。。。。。若是你的项目中使用了官方提供的 Adapter 即 weapp-adapter.js（关于什么是 Adpater 请参考官方教程 Adapter），，，，
，那么你此时建设的会是一个离屏 Canvas。。。。。。由于在 weapp-adapter.js 已经挪用了一次 wx.createCanvas()，，，，
，并把返回的 canvas 作为全局变量袒露出来。。。。。。假设你的项目目录结构如下：

├── game.js
├── weapp-adapter.js
└── game.json

在 weapp-adapter.js 中已经挪用了一次 wx.createCanvas()，，，，
，并把返回的 canvas 作为全局变量袒露出来。。。。。。

// weapp-adapter canvas = wx.createCanvas()

若是你在 require weapp-adapter.js 之后再挪用 wx.createCanvas()，，，，
，那么建设的 Canvas 会是一个离屏的 Canvas，，，，
，由于此时已经不是对该 API 的首次挪用。。。。。。

require('./weapp-adapter') var myCanvas = wx.createCanvas()

在 Canvas 上举行绘制

可是由于没有在 canvas 上举行绘制，，，，
，以是 canvas 是透明的。。。。。。使用 2d 渲染上下文的举行简朴的绘制，，，，
，可以在屏幕左上角看到一个 100x100 的红色矩形。。。。。。

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 内容的清空和渲染上下文的重置。。。。。。

canvas.width = 300 canvas.height = 300

显示图片

通过 wx.createImage() 接口，，，，
，可以建设一个 Image 工具。。。。。。Image 工具可以加载图片。。。。。。当 Image 工具被绘制到 Canvas 上时，，，，
，图片才会显示在屏幕上。。。。。。

var image = wx.createImage()

设置 Image 工具的 src 属性可以加载一张外地图片或网络图片，，，，
，当图片加载完毕时会执行注册的 onload 回调函数，，，，
，此时可以将 Image 工具绘制到 Canvas 上。。。。。。

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 绘制的。。。。。。

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

为了让这个红色矩形显示在屏幕上，，，，
，我们需要把离屏的 offScreenCanvas 绘制到上屏的 screenCanvas 上。。。。。。

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

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

小游戏更新

小游戏启动会有两种情形，，，，
，一种是「冷启动」，，，，
，一种是「热启动」。。。。。。 若是用户已经翻开过某小游戏，，，，
，然后在一准时间内再次翻开该小游戏，，，，
，此时无需重新启动，，，，
，只需将后台态的小游戏切换到前台，，，，
，这个历程就是热启动；；；冷启动指的是用户首次翻开或小游戏被微信自动销毁后再次翻开的情形，，，，
，此时小游戏需要重新加载启动。。。。。。

更新机制

小游戏冷启动时若是发明有新版本，，，，
，将会异步下载新版本的代码包，，，，
，并同时用客户端外地已有的包举行启动，，，，
，即新版本的小游戏需要等下一次冷启动才会应用上。。。。。。 若是需要马上应用最新版本，，，，
，可以使用 wx.getUpdateManager() API 举行处理。。。。。。

getUpdateManager 的使用示例

v1.9.90 基础库以后，，，，
，可以通过 wx.getUpdateManager() 获取全局唯一的版本更新治理器，，，，
，用于治理小游戏更新；；；另外请下载最新版本的开发者工具(1.02.1803130 以上)才支持在开发者工具上调试。。。。。。

由于是新版本才支持的 API，，，，
，请在使用前先判断是否支持，，，，
，例如：

if (wx.getUpdateManager) { console.log('支持 wx.getUpdateManager')
}

获取到 updateManager 实例后，，，，
，updateManager 包括以下要领：

onCheckForUpdate(callback) 回调效果说明：

注： 检查更新操作由微信在小游戏冷启动时自动触发，，，，
，不需由开发者自动触发，，，，
，开发者只需监听检查效果即可。。。。。。

onUpdateReady(callback) 回调效果说明：

当微信检查到小游戏有新版本，，，，
，会自动触发下载操作（无需开发者触发），，，，
，当下载完成后，，，，
，会通过 onUpdateReady 见告开发者。。。。。。

onUpdateFailed(callback) 回调效果说明：

当微信检查到小游戏有新版本，，，，
，会自动触发下载操作（无需开发者触发），，，，
，若是下载失败（可能是网络原因等），，，，
，会通过 onUpdateFailed 见告开发者。。。。。。

applyUpdate() 说明：

当小游戏新版本已经下载时（即收到 onUpdateReady 回调），，，，
，可以通过这个要领强制重启小游戏并应用上最新版本。。。。。。

完整使用示例

if (typeof wx.getUpdateManager === 'function') { const updateManager = wx.getUpdateManager()

  updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console.log(res.hasUpdate)
  })

  updateManager.onUpdateReady(function () { // 新的版本已经下载好，，，，
，挪用 applyUpdate 应用新版本并重启 updateManager.applyUpdate()
  })

  updateManager.onUpdateFailed(function () { // 新的版本下载失败 })
}