微信小程序 | 游戏开发之接宝石箱子游戏

1、什么是微信小游戏
微信小游戏是小程序的一个类目，小游戏是微信开放给小程序的更多的能力，让小程序开发者有了开发游戏的能力。微信小游戏是在小程序的基础上添加了游戏库API。微信小游戏只能运行在小程序环境中，微信小游戏没有小程序中WXSS、WXML、多页面等内容，所以微信小游戏开发时小程序的组件就无法使用；但增加了一些渲染、文件系统以及后台多线程的功能。

小游戏提供了CommonJS风格的模块API，可以将一些公共的代码抽离成为一个单独的JS文件，作为一个模块。可以通过module.exports或者exports导出模块，通过require引入模块。

2、接宝石箱子游戏

接宝石箱子小游戏运行后底部出现主角工人，屏幕上方不断掉落宝石箱子，主角工人每接住一个箱子积分增加1分，玩家通过触碰屏幕左侧或者右侧控制工人移动方向。本游戏运行界面如图1所示。

■ 图1 接宝石箱子小游戏运行效果
// common.js function sayHello(name) { console.log('Hello' + name + '!') } function sayGoodbye(name) { console.log('Goodbye'+ name+'!') } module.exports.sayHello = sayHello //提供对外的接口 module.exports.sayGoodbye = sayGoodbye //提供对外的接口
在game.js中require common.js，就可以调用common模块导出的接口。所有输出接口都会成为输入对象的属性。
var common = require('./js/libs/common.js') common.sayHello('xmj') common.sayGoodbye('xmj')
在模块化时，也可以使用export default命令和import命令。

使用import命令是用户需要知道所加载的变量或者函数名，否则无法加载，为了方便用户，使其不用预先知道就能加载模块，这是可以使用export default为模块指定默认输出。
// common2.js export default function test() { //当然也可以是一个类 console.log("大家好"); };
导入时可以如下：
import t from './js/libs/common2.js' t('xmj')
这时使用import导入时可以使用任意名称指定模块js文件的导出方法test()。本质上export default就是输出一个叫做Default的方法，只是系统容许为它任意取名。微信小游戏支持ES6，所以开发时可以使用export default class定义各种类模块，例如Bullet子弹类，Sprite精灵类，Enemy敌人类模块，使用import导入类模块。
import Player from './player/index' import Enemy from './npc/enemy'
小游戏并不能调用所有小程序的API，但是能调用到大部分的API。例如像wx.request，wx.chooseImage，wx.showToast等API，小游戏都可以调用到。更详细的API能力见微信官方API文档。

03、程序设计的步骤
使用微信开发者工具新建项目，左侧类别选择小游戏，右侧的项目名称输入“接宝石箱子游戏”，单击“新建”按钮，就新建一个新的小游戏。

在图2界面中的中间部分，为文件结构区域。右键文件结构区域上方+号，下拉菜单中选择“目录”，建立文件夹test/images结构，放入相关游戏图片（箱子，工人）。

■ 图2 放入相关游戏图片

准备工作完成后，修改game.js文件。本游戏不使用Adapter（适配器），使用微信wx API自行开发。
/*import './js/libs/weapp-adapter' import './js/libs/symbol' import Main from './js/main' new Main() */ const DROP_SPEED = 8 //箱子下移速度 const MOVE_SPEED = 4 //人物左右移速度 const canvas = wx.createCanvas() const context = canvas.getContext('2d') context.fillStyle = "#ffff00" context.font = "40px Arial"
加载工人图片，并设置设置位置坐标（imgX，imgY）。
const image = wx.createImage() //人物图片 let imgX = canvas.width / 2 - 18 //人物位置 let imgY = canvas.height - 80 image.onload = function () { context.drawImage(image, imgX, imgY) } image.src = 'test/images/player.png'
drawRect(x, y)函数清空屏幕，重绘宝石箱子、人物和积分文字。
let score = 0 const { windowWidth, windowHeight } = wx.getSystemInfoSync() //屏幕宽度和高度 function drawRect(x, y) { context.clearRect(0, 0, windowWidth, windowHeight) //重绘清空屏幕 context.drawImage(boxImage, x, y) //画宝石箱子 context.drawImage(image, imgX, imgY) //画人物 context.fillText("积分" + score, 30, 50) //绘制积分文字 }
设置宝石箱子坐标初始位置（imgX，imgY）为屏幕顶端中央。调用box(rectX, rectY)在指定位置(rectX, rectY)绘制箱子。
`let rectX = canvas.width / 2 – 30 //宝石箱子坐标
let rectY = 0
const boxImage = wx.createImage() //宝石箱子图片
box(rectX, rectY) //调用box((rectX, rectY)在指定位置(rectX, rectY)绘制箱子

function box(x, y) {
// Math.ceil(); 只要有小数总是向上取整数; 例如Math.ceil(1.1) 输出为2
let number = Math.ceil(Math.random() * 7) //随机产生1-7数字
let box_src = ‘test/images/box’ + number + ‘.png’
boxImage.onload = function () {
context.drawImage(boxImage, x, y)
}
boxImage.src = box_src
}以下触摸（碰）事件处理。判断触碰位置在人物的左侧则移动方向direction值为-1，这样x坐标可以不断减少。触碰位置在人物的右侧则移动方向direction值为1，这样x坐标可以不断增加。var direction = 0
var touchX = imgX
var touchY = imgY
wx.onTouchStart(function (res) {//触碰事件
touchX = res.changedTouches[0].clientX - 18
if (touchX < imgX) { //触碰位置在人物的左侧
direction = -1 //向左移动
console.log(“left”)
} else { //触碰位置在人物的右侧
direction = 1 //向右移动
console.log(“right”)
}
})`
loop()是用来实现游戏帧循环达到动画效果。首先判断工人达到屏幕两侧边界，如果判断工人的位置到达屏幕最左侧，则改向右；到达屏幕最右侧，则改向左。箱子Y坐标不断，显示出下落效果，工人位置坐标根据移动方向不断修改，同时重新绘制箱子，工人，积分。

如果箱子到达底部区域，则判断与工人之间距离，如果小于50则认为碰撞（就是工人接到宝石箱子），进行加分处理。如果箱子出了屏幕底部，重新设置箱子图片并设置位于顶部。最后调用requestAnimationFrame(loop);起到循环渲染效果。
`function loop() {
if (imgX <= 10) { //人物位置到达屏幕最左侧，改向右
direction = 1
} else if (imgX >= canvas.width - 50) {//人物位置到达屏幕最右侧，改向左
direction = -1
}

rectY += DROP_SPEED //箱子下移DROP_SPEED
imgX += direction * MOVE_SPEED //改变人物位置坐标
drawRect(rectX, rectY) //重新绘制箱子，人物，积分
if (rectY > canvas.height - 100 && rectY <= canvas.height) {//达到底部
let range = Math.abs(rectX - imgX) //与人物之间距离
if (range <= 50) { //检测碰撞
rectY = canvas.height
score++ //加分
}
}
if (rectY > canvas.height) {
rectY = 0
let spwanX = Math.floor(Math.random() * (canvas.width - 80))
box(spwanX, rectY) //重新设置箱子位于顶部
rectX = spwanX
}
requestAnimationFrame(loop); //循环渲染
}
loop()`