一天时间折腾出来的砸屏小游戏
今天尝试试用了一下公司刚开发出来的“米筷轻应用开发平台”，目前产品只有一个bbs.mkuai.net的论坛，基于平台下折腾了几个小时，才撸出一个微信砸屏小游戏，平台还没有推向市场，在做小游戏的过程中，也遇到不少的坑。全WEB的开发工具，写代码很方便，但是在浏览器下调试小程序，还不是很成熟的，部份官网的API还不能够准确的识别，只好用开发平台开发，再结合微信官方的开发工具调试、预览。很有新意的是，只要一个浏览器就可以做小程序与小游戏，并可以基于平台上做后端管理。
小游戏登录成功后，自动在会员管理里给我增加了一个用户，省得我去写
(会员管理)
最喜欢的是，有个监控后台，可以统计应用访问数据。
(应用监控)
以下是效果图与视频，不是很成熟的代码。
(代码编辑与调试效果图)
是基于微信小游戏打飞机游戏的Demo的基础下重写的，刚开始写的时候非常的不适应，花了差不多一个多小时才适应过来，不过微信关闭界面的时候提供了退出事件，但我怎么加都不起反应，很郁闷！导致关闭界面后，游戏线程还在跑，研究半天没搞清楚什么情况。
(微信小游戏API)
以下是主函数的部份代码：
import Player from './player/player'
import DataBus from './databus'
import BackGround from './runtime/background'
import GameInfo from './runtime/gameinfo'
/**
* 游戏主函数
*/
let ctx = canvas.getContext('2d')
let databus = new DataBus()
export default class Main {
constructor() {
// 维护当前requestAnimationFrame的id
this.aniId = 0
this.restart()
}
restart() {
databus.reset()
canvas.removeEventListener(
'touchstart',
this.touchHandler
)
this.player=null
this.bg = new BackGround(ctx)
this.gameinfo = new GameInfo()
//初始化玩家
this.initplayer(ctx)
this.bindLoop = this.loop.bind(this)
this.hasEventBind = false
// 清除上一局的动画
window.cancelAnimationFrame(this.aniId);
this.aniId = window.requestAnimationFrame(
this.bindLoop,
canvas
)
}
/**
* canvas重绘函数
* 每一帧重新绘制所有的需要展示的元素
*/
render() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
this.bg.render(ctx)
//绘制砸屏效果
databus.player.forEach((play) => {
play.animationRender()
});
//绘制玩家,比效果后绘制可以保证砸屏工具在最上面
if (this.player != null) {
this.player.DrawPlayer(databus.gameStart)
}
// 游戏未开始显示开始界面
if (!databus.gameStart) {
this.gameinfo.renderGameStart(ctx)
if (!this.hasEventBind) {
this.hasEventBind = true
this.touchHandler = this.touchEventHandler.bind(this)
canvas.addEventListener('touchstart', this.touchHandler)
canvas.addEventListener('onhide', function () {
databus.gameStart=false
this.restart();
})
}
}
}
// 实现游戏帧循环
loop() {
this.render()
this.aniId = window.requestAnimationFrame(
this.bindLoop,
canvas
)
}
initplayer(ctx) {
databus.player.push(new Player(ctx, "smash","audio/smash.wav"))
}
startgame(e) {
let x = e.touches[0].clientX
let y = e.touches[0].clientY
let area = this.gameinfo.btnArea
if (x >= area.startX
&& x <= area.endX
&& y >= area.startY
&& y <= area.endY) {
databus.gameStart=true;
this.player = databus.player[0];
}
}
// 游戏开始后的触摸事件处理逻辑
touchEventHandler(e) {
e.preventDefault()
if (!databus.gameStart) {
this.startgame(e);
}
}
}
