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) 输出为2let 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 - 18if (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_SPEEDimgX += 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.heightscore++ //加分}}if (rectY > canvas.height) {rectY = 0let spwanX = Math.floor(Math.random() * (canvas.width - 80))box(spwanX, rectY) //重新设置箱子位于顶部rectX = spwanX}requestAnimationFrame(loop); //循环渲染
}
loop()

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

微信小程序最新开发资源汇总，对学习微信小程序的新手有一定帮助
微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
关于微信小程序云开发---实现客服自动回复图片例子
关于微信小程序云开发-实现客服自动回复例子微信自带的云开发功能使前端工程师可以独立的开发出一款小程序,微信自带的云开发. 首先和开发其他平台的项目一样先看官方文档. 微信小程序开放文档一. 什么是 ...
微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台小秃僧新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
微信小程序云开发及背后的云服务支持。
文章目录导语什么是微信小程序云开发? 云开发的优势云开发的技术生态支持微信云开发主要能力特性云数据库: 云函数: 云存储: 身份认证: 云调用: 云开发与传统开发的模式区别小程序云开发带来 ...
微信小程序--云开发学习
这两周因为没有布置任务,主要进行微信小程序云开发的学习 ················· 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的原生 ...
个人微信小程序云开发总结心得
文章之前: 先附上通过微信小程序云开发做出的两个小程序,有兴趣的朋友可以微信扫码进去看看,欢迎登录学习 . 框架采用移动端常用UI: Vant 微信云开发官方文档:微信开发文档相关的npm包导入方法 ...
微信小程序开发与mysql_微信小程序云开发之云数据库入门
微信小程序云开发之云数据库入门介绍开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 其基础能力数据库,是一个JSON数据库,作用是无需自建数据库,就可以在微信小程序前 ...
【小程序】微信小程序云开发笔记详细教程（建议收藏）
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
微信小程序云开发之云数据库入门
微信小程序云开发之云数据库入门介绍开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 其基础能力数据库,是一个JSON数据库,作用是无需自建数据库,就可以在微信小程序前 ...

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

1、什么是微信小游戏

2、接宝石箱子游戏

03、程序设计的步骤

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

最新文章

热门文章