利用Javascript 與 HTML5開發線上遊戲 - (2) 彈力球

賴怡玲2014/1/18 @ 元智大學

About me - Azole● 軟體工程師 / 技術經理● 金融交易系統(網站, 視窗程式)、編譯

器、電子商務網站● 常用語言：Javascript ( jQuery,

AngularJS, NodeJS), PHP, C#, C++,...

● PMP

練習題與範例下載網址https://github.com/azole/HTML5-

Game-Tour右下方有一個 Download ZIP

大家可以依照投影片中的順序逐一完成任務

遊戲規則

● 球碰到外牆會反彈

● 底部必須要碰到藍色

木板才會反彈，碰到其

他地方則輸掉遊戲

● 按左右鍵可以控制木

板的移動

遊戲規則

● 每反彈一次加10分● 要能顯示分數

● 可重啟遊戲

● 可設定彈力球的起點

● 顯示輸掉遊戲提示

問題分析

1. 繪製外牆

2. 繪製彈力球

3. 讓彈力球可以移動

4. 讓彈力球可以反彈

5. 繪製木板

6. 按左右鍵移動木板

7. 彈力球碰到木板反彈，

其餘輸掉遊戲

8. 輸掉遊戲後顯示提示

9. 重啟遊戲

10. 記錄與顯示分數

11. 設定起始位置

步驟1: 繪製外牆

01Wall.html

Canvas 的粗線條

ctx.strokeStyle = “#AAAAAA”;ctx.lineWidth = 50;ctx.strokeRect(100, 100, 200, 200);

ctx.strokeStyle = “red”;ctx.lineWidth = 1;ctx.strokeRect(100, 100, 200, 200);

步驟2: 繪製彈力球

02WallAndBall.html

步驟3: 讓彈力球可以移動 - 定時

● 利用SetTimeout

03MoveBall.html

setTimeout(action, ms);// 在經過 ms 毫秒後，會啟動 action 這個函式// 但只有一次！

● 擦掉原本的球，但我們只有擦掉一個矩形的函式 (clearRect)，所以我們要利用球心跟半徑算出這個矩形

步驟3: 讓彈力球可以移動 - 擦掉

步驟4: 讓彈力球撞到牆時可以反彈

● 計算邊界 ○ 還記得剛剛粗線條的問題嗎？○ 彈力球的半徑

● 檢查是否遇到邊界

● 遇到：重新計算位移量 → 改變下次的位移量 → 位移

● 沒遇到：正常位移

04ReboundBall.html

步驟5: 繪製木板

05Board.html

步驟6: 按左右鍵移動木板 (1)

● HTML DOM Events○ http://www.w3schools.com/jsref/dom_obj_event.asp

● 按鍵事件○ onkeydown○ Key code: http://www.dotblogs.com.

tw/corner/archive/2009/07/19/9583.aspx○ 我們需要向左鍵 ← 與向右鍵 →

06MoveBoard.html

步驟6: 按左右鍵移動木板 (2)

● 移動木板

○ 把原本藍色木板的區域塗成灰色

○ 計算藍色木板新的位置

○ 根據新的位置繪製木板

⇒ 木板移動的左右邊界

⇒ 一次要移動多少？

06MoveBoard.html

● 檢查遇到底部界限的狀態

● 輸掉遊戲 ⇒ 停止遊戲

○ 需要一個變數來記錄狀態

步驟7: 球遇木板反彈，其餘輸掉遊戲

07CheckBoard.html

提示：fillText

試試看自己查文件

步驟8: 顯示輸掉遊戲的提示文字

08FillText.html

● 增加一個按鈕 button● 起始函式 ⇒ 這裡面應該要做些什麼事情？● 掛載 click 事件

步驟9: 重啟遊戲

08FillText.html

● 準備顯示分數的區域

● 記錄分數的變數 ⇒ 每次要加幾分？

● 重啟時要歸零

● 成功反彈一次就加一次分數

步驟10: 記錄與顯示分數

步驟11: 設定起始位置

Form 表單

● 基本表單：

http://www.w3schools.com/html/html_forms.asp● HTML5 表單

http://diveintohtml5.info/forms.html

11FromBasic.html

更進一步...

● 增加關卡，隨著難度的增加...○ 增加彈力球的速度

○ 反彈木板的長度變短

○ 分數增加的比率

● 彈力球反彈方向的改變

● 增加特殊補給，例如吃了木版變長

● 增加可被攻擊的標的

● 更多的設定

● …

小結

● setTimeout 的使用

● keydown事件

● 在Canvas上顯示文字

● HTML的表單

今天只是一個開始，要繼續加油～

● HTML5：新的標籤, Web Storage, Web Workers, Geolocation, Form, ...

● Javascript：物件, JSON, closure, protoype,...● CSS● 學習使用函式庫或框架：jQuery, AngularJS,...● 用 js 來做後端：Nodejs● …