敲磚塊小游戲開發(fā)實(shí)例詳細(xì)步驟講解（附代碼）

　　上面已經(jīng)學(xué)習(xí)了這么多的小程序小游戲開發(fā)基礎(chǔ)入門之后，下面通過一個小案例來講講怎么實(shí)操。小游戲的大致架構(gòu)就介紹完了，閑話不多說，先搞個簡單的小游戲操練起來。

　　敲磚塊小游戲

　　很久之前學(xué) canvas 的時(shí)候，正好跟著MDN做過一個敲磚塊的小游戲，正好這次拿來試一試。

　　代碼遷移

　　原先的代碼模塊劃分沒有作好，都寫在了一個文件里，但這也方便了這次遷移。

　　首先，創(chuàng)建一個game.js文件，在第一行引入 adapter，這很重要。同時(shí)，不要忘了創(chuàng)建一個game.json文件，只需設(shè)置一下顯示的方向。

　　然后，將原有的代碼從獲取 canvas 元素一直到末尾全部復(fù)制到game.js中，保存運(yùn)行。

　　No warning! 一次成功。

　　不過，現(xiàn)在這個游戲還不能動起來，需要將原先的 mouse 事件轉(zhuǎn)換為 touch 事件。

　　事件轉(zhuǎn)換

　　首先，將原先的一系列控制游戲開始、暫停的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);

　　}

　　});

　　接著是控制擋板左右移動的事件，原先是通過鼠標(biāo)的移動來控制的，在移動端自然沒有了鼠標(biāo)，原本打算還是用 touch 事件來控制。在翻閱了小游戲的 API 之后，我發(fā)現(xiàn)了一個更好的選擇——重力控制。

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

　　}

　　});

　　現(xiàn)在就可以通過左右傾斜手機(jī)來控制擋板的移動了，是不是更有趣了?

　　從wx.onAccelerometerChange方法就可以看到，微信還提供了許多瀏覽器以外的功能，這里就不一一舉例了，有興趣的同學(xué)可以查閱下文檔。微信小游戲的初探就到這里，消除磚塊的功能就留給大家自己去嘗試了。