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

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