SlideShare a Scribd company logo
1 of 24
Download to read offline
利用Javascript 與 HTML5
開發線上遊戲 - (2) 彈力球
賴怡玲
2014/1/18 @ 元智大學
About me - Azole
● 軟體工程師 / 技術經理
● 金融交易系統(網站, 視窗程式)、編譯
器、電子商務網站
● 常用語言:Javascript ( jQuery,
AngularJS, NodeJS), PHP, C#,
C++,...
● PMP
練習題與範例下載網址
https://github.com/azole/HTML5Game-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

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

03MoveBall.html
步驟3: 讓彈力球可以移動 - 擦掉
● 擦掉原本的球,但我們只有擦掉一個矩形的函
式 (clearRect),所以我們要利用球心跟半
徑算出這個矩形
步驟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
步驟8: 顯示輸掉遊戲的提示文字
提示:fillText
試試看自己查文件

08FillText.html
步驟9: 重啟遊戲
● 增加一個按鈕 button
● 起始函式 ⇒ 這裡面應該要做些什麼事情?
● 掛載 click 事件

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
● …

More Related Content

What's hot

MakerBoard: MT7688 Emulator
MakerBoard: MT7688 EmulatorMakerBoard: MT7688 Emulator
MakerBoard: MT7688 EmulatorFred Chien
 
十分鐘讓程式人搞懂雲端平台與技術
十分鐘讓程式人搞懂雲端平台與技術十分鐘讓程式人搞懂雲端平台與技術
十分鐘讓程式人搞懂雲端平台與技術鍾誠 陳鍾誠
 
2010 08-14 web-sitei18n
2010 08-14 web-sitei18n2010 08-14 web-sitei18n
2010 08-14 web-sitei18ntsunghaolee
 
用JavaScript 實踐《軟體工程》的那些事兒!
用JavaScript  實踐《軟體工程》的那些事兒!用JavaScript  實踐《軟體工程》的那些事兒!
用JavaScript 實踐《軟體工程》的那些事兒!鍾誠 陳鍾誠
 
深度學習的機器翻譯技術 (使用node.js的neataptic套件實作)
深度學習的機器翻譯技術  (使用node.js的neataptic套件實作)深度學習的機器翻譯技術  (使用node.js的neataptic套件實作)
深度學習的機器翻譯技術 (使用node.js的neataptic套件實作)鍾誠 陳鍾誠
 
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
相容於node.js的 網頁型桌面程式設計  (使用Electron.js 開發)相容於node.js的 網頁型桌面程式設計  (使用Electron.js 開發)
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)鍾誠 陳鍾誠
 
Getting started with test automation
Getting started with test automationGetting started with test automation
Getting started with test automationIvan Wei
 
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門Fred Chien
 
Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手Piece Chao
 
用十分鐘瞭解 《JavaScript的程式世界》
用十分鐘瞭解  《JavaScript的程式世界》用十分鐘瞭解  《JavaScript的程式世界》
用十分鐘瞭解 《JavaScript的程式世界》鍾誠 陳鍾誠
 
程序组介绍Ver2.0
程序组介绍Ver2.0程序组介绍Ver2.0
程序组介绍Ver2.0vtmers2012
 
北護樂學程式冬令營 2017
北護樂學程式冬令營 2017北護樂學程式冬令營 2017
北護樂學程式冬令營 2017Hamilton Wong
 
付振华 前端开发环境优化
付振华 前端开发环境优化付振华 前端开发环境优化
付振华 前端开发环境优化czbad
 
用十分鐘開始理解深度學習技術 (從 dnn.js 專案出發)
用十分鐘開始理解深度學習技術  (從 dnn.js 專案出發)用十分鐘開始理解深度學習技術  (從 dnn.js 專案出發)
用十分鐘開始理解深度學習技術 (從 dnn.js 專案出發)鍾誠 陳鍾誠
 
用十分鐘 向jserv學習作業系統設計
用十分鐘  向jserv學習作業系統設計用十分鐘  向jserv學習作業系統設計
用十分鐘 向jserv學習作業系統設計鍾誠 陳鍾誠
 
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅Jack Yang
 
軟體人甘苦談
軟體人甘苦談軟體人甘苦談
軟體人甘苦談Fred Chien
 

What's hot (17)

MakerBoard: MT7688 Emulator
MakerBoard: MT7688 EmulatorMakerBoard: MT7688 Emulator
MakerBoard: MT7688 Emulator
 
十分鐘讓程式人搞懂雲端平台與技術
十分鐘讓程式人搞懂雲端平台與技術十分鐘讓程式人搞懂雲端平台與技術
十分鐘讓程式人搞懂雲端平台與技術
 
2010 08-14 web-sitei18n
2010 08-14 web-sitei18n2010 08-14 web-sitei18n
2010 08-14 web-sitei18n
 
用JavaScript 實踐《軟體工程》的那些事兒!
用JavaScript  實踐《軟體工程》的那些事兒!用JavaScript  實踐《軟體工程》的那些事兒!
用JavaScript 實踐《軟體工程》的那些事兒!
 
深度學習的機器翻譯技術 (使用node.js的neataptic套件實作)
深度學習的機器翻譯技術  (使用node.js的neataptic套件實作)深度學習的機器翻譯技術  (使用node.js的neataptic套件實作)
深度學習的機器翻譯技術 (使用node.js的neataptic套件實作)
 
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
相容於node.js的 網頁型桌面程式設計  (使用Electron.js 開發)相容於node.js的 網頁型桌面程式設計  (使用Electron.js 開發)
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
 
Getting started with test automation
Getting started with test automationGetting started with test automation
Getting started with test automation
 
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
 
Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手
 
用十分鐘瞭解 《JavaScript的程式世界》
用十分鐘瞭解  《JavaScript的程式世界》用十分鐘瞭解  《JavaScript的程式世界》
用十分鐘瞭解 《JavaScript的程式世界》
 
程序组介绍Ver2.0
程序组介绍Ver2.0程序组介绍Ver2.0
程序组介绍Ver2.0
 
北護樂學程式冬令營 2017
北護樂學程式冬令營 2017北護樂學程式冬令營 2017
北護樂學程式冬令營 2017
 
付振华 前端开发环境优化
付振华 前端开发环境优化付振华 前端开发环境优化
付振华 前端开发环境优化
 
用十分鐘開始理解深度學習技術 (從 dnn.js 專案出發)
用十分鐘開始理解深度學習技術  (從 dnn.js 專案出發)用十分鐘開始理解深度學習技術  (從 dnn.js 專案出發)
用十分鐘開始理解深度學習技術 (從 dnn.js 專案出發)
 
用十分鐘 向jserv學習作業系統設計
用十分鐘  向jserv學習作業系統設計用十分鐘  向jserv學習作業系統設計
用十分鐘 向jserv學習作業系統設計
 
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅
 
軟體人甘苦談
軟體人甘苦談軟體人甘苦談
軟體人甘苦談
 

More from azole Lai

AWS EC2 for beginner
AWS EC2 for beginnerAWS EC2 for beginner
AWS EC2 for beginnerazole Lai
 
20150604 docker 新手入門
20150604 docker 新手入門20150604 docker 新手入門
20150604 docker 新手入門azole Lai
 
Docker tutorial
Docker tutorialDocker tutorial
Docker tutorialazole Lai
 
作業系統基本觀念複習
作業系統基本觀念複習作業系統基本觀念複習
作業系統基本觀念複習azole Lai
 
singularly continuous
singularly continuoussingularly continuous
singularly continuousazole Lai
 
20130908 Change the world?
20130908 Change the world?20130908 Change the world?
20130908 Change the world?azole Lai
 

More from azole Lai (6)

AWS EC2 for beginner
AWS EC2 for beginnerAWS EC2 for beginner
AWS EC2 for beginner
 
20150604 docker 新手入門
20150604 docker 新手入門20150604 docker 新手入門
20150604 docker 新手入門
 
Docker tutorial
Docker tutorialDocker tutorial
Docker tutorial
 
作業系統基本觀念複習
作業系統基本觀念複習作業系統基本觀念複習
作業系統基本觀念複習
 
singularly continuous
singularly continuoussingularly continuous
singularly continuous
 
20130908 Change the world?
20130908 Change the world?20130908 Change the world?
20130908 Change the world?
 

利用Javascript 與 html5開發線上遊戲_2彈力球