題目來源：http://git.imweb.io/imweb-teacher/game
完成的代碼:canvas-shooting-game
實現的功能：
- 飛機自由移動
- 飛機可以單發也可以連發（移動的時候也可以）
- 有關數
demo-1:
監聽空格與方向鍵，賦予相應的事件，然後canvas重繪，實現飛機的移動與子彈的射擊。
每一個子彈是獨立對象，繼承自Bullet(),包含它自己的飛行動作，setInterval控制實現子彈的飛行。子彈飛出畫布後，clearInterval()
飛行用x,y的改變重繪位置來實現。
性能不好：每一個移動每一顆子彈都單獨的重繪，而不是每一幀所有狀態改變完了之後統一重繪。這就需要變量來保存下一次重繪的狀態，然後再重繪~ （這個其實就是雙緩衝吧）
問題：
- 1飛機移動不靈活,單次按鍵與長按之間轉換不靈活，會有卡頓
- 2子彈達到兩個以上時，畫面中子彈閃爍嚴重
- 3子彈速度爲什麼會越來越快？
嘗試1：另啓畫布，一畫布畫飛機，一畫布畫子彈..實現分層減少重繪… 依舊閃爍嚴重。
嘗試2： requestAnimFrame,按幀統一重繪，通過變量保存子彈和飛機的狀態，每次重繪前重新計算，更改狀態變量，canvas再根據狀態變量重繪
解決問題2子彈不閃爍了，但是子彈速度會越變越塊…
解決了問題3，，少了一個}，update放進了按鍵檢測函數裏
嘗試3： —-爲了解決問題1
單次按鍵與長按的區別在與是否有onkeyup，單獨的onkeydown事件在
長按時會出現判斷事件延遲，考慮通過變量控制按鍵狀態,只有當確實
onkeyup等發生的時候才改變狀態,長按的時候不改變狀態
解決了問題1,飛機現在可以流暢飛行..但出現了新的問題，
問題4：鍵盤按鍵反應時間明顯長於canvas重繪時間，導致按一下會使子彈出現很多個
嘗試4： —-爲了解決問題4：單按多個子彈
（1）給單次按鍵onkeydown設置定時器，延遲一會兒執行 —–沒用
（2）在添加新子彈前將pressedSpace設爲false —– 成功 ，帶來了新的問題，無法實現飛機邊飛邊按着子彈連射..
(3)借用setTimeout判斷單按和長按 實現單按空格子彈單射，長按空格子彈連射–成功！
(4)還有一個問題，子彈連射只能靜止的時候保持連射然後移動，
不能在先移動的時候開啓連射模式,這是因爲左右移動的時候是一直有左右按鍵事件在觸發，
而此時如果一直按着空格發射子彈，其實是不會一直觸發的，如何解決呢？
BINGO！想到了，再設置一個變量，如果左或右被一直按着的話，
此時一直按着空格，只有onkeydown事件，沒有onkeyup事件，
就設置pressedSpaceHeld爲true —– 成功
(5)帶出下一個問題 移動的時候不能單發射擊了…暫時不解決了..
demo-2: 怪獸的移動與被打
問題：
- 左右不均等
- 相對距離在改變
(1)不停來回移動，到達邊緣就改變方向 — 成功
出現問題：每一行過後怪獸的x座標都會增加2倍速度那麼長!
終於找到了！ 最後邊的那個怪獸碰到判斷後少走了一步,
到左邊的時候，第一個怪獸多向左走了一步，其他的向右走了一步，差兩步
(2)可以行走和被打到的時候消失了~ 出現個問題，子彈和怪獸被打的位置不搭,
子彈要右偏才能打到
找到原因了：ctx.moveTo(this.x += w / 2, this.y);子彈的x是飛機的最左邊x
解決：var bullet = new Bullet(plane.x + w / 2, plane.y + w / 2, 10, 10);
demo-3: 添加圖片和開始,重玩
1.圖片添加替換ctx.drawImage() —-成功
2.開始頁面添加 : css應用： 都是block,不顯示的時候設置display:name；
用data-status控制當前狀態切換頁面。 — 成功
3.遊戲結束想重新玩，點擊後 所有物體移動速度加快？ 解決！
想重新玩只用init()初始新的飛機、子彈、怪獸,update()默認啓動一次就不會停止
demo-4: 添加n關 和Boom
通過level變量傳入init()函數，控制怪物的數量，解決~
添加boom解決~