敲砖块小游戏开发实例详细步骤讲解（附代码）

　　上面已经学习了这么多的小程序小游戏开发基础入门之后，下面通过一个小案例来讲讲怎么实操。小游戏的大致架构就介绍完了，闲话不多说，先搞个简单的小游戏操练起来。

　　敲砖块小游戏

　　很久之前学 canvas 的时候，正好跟着MDN做过一个敲砖块的小游戏，正好这次拿来试一试。

　　代码迁移

　　原先的代码模块划分没有作好，都写在了一个文件里，但这也方便了这次迁移。

　　首先，创建一个game.js文件，在第一行引入 adapter，这很重要。同时，不要忘了创建一个game.json文件，只需设置一下显示的方向。

　　然后，将原有的代码从获取 canvas 元素一直到末尾全部复制到game.js中，保存运行。

　　No warning! 一次成功。

　　不过，现在这个游戏还不能动起来，需要将原先的 mouse 事件转换为 touch 事件。

　　事件转换

　　首先，将原先的一系列控制游戏开始、暂停的click,mouseenter和mouseout事件收拢成touchstart事件。

　　this.canvas.addEventListener('touchstart', function () {

　　if (!$this.game.start) {

　　$this.game.start = true;

　　$this.ref = window.requestAnimationFrame(function () { $this.draw($this); });

　　} else {

　　$this.game.start = false;

　　window.cancelAnimationFrame($this.ref);

　　}

　　});

　　接着是控制挡板左右移动的事件，原先是通过鼠标的移动来控制的，在移动端自然没有了鼠标，原本打算还是用 touch 事件来控制。在翻阅了小游戏的 API 之后，我发现了一个更好的选择——重力控制。

　　wx.onAccelerometerChange(function (e) {

　　if ($this.game.start && !$this.game.over) {

　　$this.ct.clearRect(0, $this.canvas.height - $this.board.height, $this.canvas.width, $this.canvas.height);

　　var distance = e.x * $this.canvas.width;

　　$this.board.x = $this.getBoardX($this.canvas.width / 2 + distance, $this.board);

　　$this.board.draw();

　　}

　　});

　　现在就可以通过左右倾斜手机来控制挡板的移动了，是不是更有趣了?

　　从wx.onAccelerometerChange方法就可以看到，微信还提供了许多浏览器以外的功能，这里就不一一举例了，有兴趣的同学可以查阅下文档。微信小游戏的初探就到这里，消除砖块的功能就留给大家自己去尝试了。