利用Javascript 與 html5開發線上遊戲_2彈力球
- 2. About me - Azole
● 軟體工程師 / 技術經理
● 金融交易系統(網站, 視窗程式)、編譯
器、電子商務網站
● 常用語言:Javascript ( jQuery,
AngularJS, NodeJS), PHP, C#,
C++,...
● PMP
- 10. 步驟3: 讓彈力球可以移動 - 定時
● 利用SetTimeout
setTimeout(action, ms);
// 在經過 ms 毫秒後,會啟動 action 這個函式
// 但只有一次!
03MoveBall.html
- 11. 步驟3: 讓彈力球可以移動 - 擦掉
● 擦掉原本的球,但我們只有擦掉一個矩形的函
式 (clearRect),所以我們要利用球心跟半
徑算出這個矩形
- 14. 步驟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
- 15. 步驟6: 按左右鍵移動木板 (2)
● 移動木板
○ 把原本藍色木板的區域塗成灰色
○ 計算藍色木板新的位置
○ 根據新的位置繪製木板
⇒ 木板移動的左右邊界
⇒ 一次要移動多少?
06MoveBoard.html
- 24. 今天只是一個開始,要繼續加油~
● HTML5:新的標籤, Web Storage, Web
Workers, Geolocation, Form, ...
● Javascript:物件, JSON, closure, protoype,...
● CSS
● 學習使用函式庫或框架:jQuery, AngularJS,...
● 用 js 來做後端:Nodejs
● …