利用javascript 與 html5開發線上遊戲_2彈力球
DESCRIPTION
利用Canvas開發一個彈力球的遊戲TRANSCRIPT
利用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● …