消消乐 游戏算法html,小游戏版消消乐

概述：最近看了点算法，为了对其有深刻的体会，利用周末时间撸了一个简易版的三消游戏，采用JS+Canvas实现，没有使用额外的游戏引擎，对于初学者来说，也比较容易入门的。下面是小游戏效果展示：

效果展示#

；

这还是一个比较初级的版本，大家有什么想法欢迎点评；

界面设计：

第一步开始游戏界面设计：

思路如下：

先在项目下新建一个js/runtime/background.js，来渲染不同阶段的背景(具体代码见github)

同时创建一个js/runtime/music.js来存放游戏各个阶段所需要的背景音乐(具体代码见github)

同时在背景图片上绘制开始游戏，并且进入游戏区域；

代码如下：step1() {

ctx.clearRect(0, 0, canvas.width, canvas.height) //清楚上一局动画

this.bg.render(ctx);// 背景渲染

this.login.render(ctx);//开始游戏 渲染

this.touchHandler = this.touchEventHandler.bind(this) //开始游戏点击事件

canvas.addEventListener('touchstart', t