Submit Search
Upload
利用Javascript 與 html5開發線上遊戲_2彈力球
•
4 likes
•
3,427 views
azole Lai
Follow
利用Canvas開發一個彈力球的遊戲
Read less
Read more
Technology
Report
Share
Report
Share
1 of 24
Download Now
Download to read offline
Recommended
利用Javascript 與 html5開發線上遊戲_1骰子遊戲
利用Javascript 與 html5開發線上遊戲_1骰子遊戲
azole Lai
利用Javascript 與 html5開發線上遊戲_0基本概念
利用Javascript 與 html5開發線上遊戲_0基本概念
azole Lai
猴子也能懂的Node.js
猴子也能懂的Node.js
HopenglishRD
Node.js 進攻桌面開發
Node.js 進攻桌面開發
Fred Chien
App house
App house
Fred Chien
用十分鐘將你的網站送上雲端
用十分鐘將你的網站送上雲端
鍾誠 陳鍾誠
五行完成網頁多國語系
五行完成網頁多國語系
amostsai
用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》
用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》
鍾誠 陳鍾誠
More Related Content
What's hot
MakerBoard: MT7688 Emulator
MakerBoard: MT7688 Emulator
Fred Chien
十分鐘讓程式人搞懂雲端平台與技術
十分鐘讓程式人搞懂雲端平台與技術
鍾誠 陳鍾誠
2010 08-14 web-sitei18n
2010 08-14 web-sitei18n
tsunghaolee
用JavaScript 實踐《軟體工程》的那些事兒!
用JavaScript 實踐《軟體工程》的那些事兒!
鍾誠 陳鍾誠
深度學習的機器翻譯技術 (使用node.js的neataptic套件實作)
深度學習的機器翻譯技術 (使用node.js的neataptic套件實作)
鍾誠 陳鍾誠
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
鍾誠 陳鍾誠
Getting started with test automation
Getting started with test automation
Ivan Wei
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
Fred Chien
Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手
Piece Chao
用十分鐘瞭解 《JavaScript的程式世界》
用十分鐘瞭解 《JavaScript的程式世界》
鍾誠 陳鍾誠
程序组介绍Ver2.0
程序组介绍Ver2.0
vtmers2012
北護樂學程式冬令營 2017
北護樂學程式冬令營 2017
Hamilton Wong
付振华 前端开发环境优化
付振华 前端开发环境优化
czbad
用十分鐘開始理解深度學習技術 (從 dnn.js 專案出發)
用十分鐘開始理解深度學習技術 (從 dnn.js 專案出發)
鍾誠 陳鍾誠
用十分鐘 向jserv學習作業系統設計
用十分鐘 向jserv學習作業系統設計
鍾誠 陳鍾誠
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅
Jack Yang
軟體人甘苦談
軟體人甘苦談
Fred Chien
What's hot
(17)
MakerBoard: MT7688 Emulator
MakerBoard: MT7688 Emulator
十分鐘讓程式人搞懂雲端平台與技術
十分鐘讓程式人搞懂雲端平台與技術
2010 08-14 web-sitei18n
2010 08-14 web-sitei18n
用JavaScript 實踐《軟體工程》的那些事兒!
用JavaScript 實踐《軟體工程》的那些事兒!
深度學習的機器翻譯技術 (使用node.js的neataptic套件實作)
深度學習的機器翻譯技術 (使用node.js的neataptic套件實作)
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
Getting started with test automation
Getting started with test automation
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手
用十分鐘瞭解 《JavaScript的程式世界》
用十分鐘瞭解 《JavaScript的程式世界》
程序组介绍Ver2.0
程序组介绍Ver2.0
北護樂學程式冬令營 2017
北護樂學程式冬令營 2017
付振华 前端开发环境优化
付振华 前端开发环境优化
用十分鐘開始理解深度學習技術 (從 dnn.js 專案出發)
用十分鐘開始理解深度學習技術 (從 dnn.js 專案出發)
用十分鐘 向jserv學習作業系統設計
用十分鐘 向jserv學習作業系統設計
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅
軟體人甘苦談
軟體人甘苦談
More from azole Lai
AWS EC2 for beginner
AWS EC2 for beginner
azole Lai
20150604 docker 新手入門
20150604 docker 新手入門
azole Lai
Docker tutorial
Docker tutorial
azole Lai
作業系統基本觀念複習
作業系統基本觀念複習
azole Lai
singularly continuous
singularly continuous
azole Lai
20130908 Change the world?
20130908 Change the world?
azole Lai
More from azole Lai
(6)
AWS EC2 for beginner
AWS EC2 for beginner
20150604 docker 新手入門
20150604 docker 新手入門
Docker tutorial
Docker tutorial
作業系統基本觀念複習
作業系統基本觀念複習
singularly continuous
singularly continuous
20130908 Change the world?
20130908 Change the world?
利用Javascript 與 html5開發線上遊戲_2彈力球
1.
利用Javascript 與 HTML5 開發線上遊戲
- (2) 彈力球 賴怡玲 2014/1/18 @ 元智大學
2.
About me -
Azole ● 軟體工程師 / 技術經理 ● 金融交易系統(網站, 視窗程式)、編譯 器、電子商務網站 ● 常用語言:Javascript ( jQuery, AngularJS, NodeJS), PHP, C#, C++,... ● PMP
3.
練習題與範例下載網址 https://github.com/azole/HTML5Game-Tour 右下方有一個 Download ZIP 大家可以依照投影片中的順序逐一完成任務
4.
遊戲規則 ● 球碰到外牆會反彈 ● 底部必須要碰到藍色 木板才會反彈,碰到其 他地方則輸掉遊戲 ●
按左右鍵可以控制木 板的移動
5.
遊戲規則 ● ● ● ● ● 每反彈一次加10分 要能顯示分數 可重啟遊戲 可設定彈力球的起點 顯示輸掉遊戲提示
6.
問題分析 1. 2. 3. 4. 5. 6. 繪製外牆 7. 彈力球碰到木板反彈, 繪製彈力球 其餘輸掉遊戲 讓彈力球可以移動 8.
輸掉遊戲後顯示提示 讓彈力球可以反彈 9. 重啟遊戲 繪製木板 10. 記錄與顯示分數 按左右鍵移動木板 11. 設定起始位置
7.
步驟1: 繪製外牆 01Wall.html
8.
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);
9.
步驟2: 繪製彈力球 02WallAndBall.html
10.
步驟3: 讓彈力球可以移動 -
定時 ● 利用SetTimeout setTimeout(action, ms); // 在經過 ms 毫秒後,會啟動 action 這個函式 // 但只有一次! 03MoveBall.html
11.
步驟3: 讓彈力球可以移動 -
擦掉 ● 擦掉原本的球,但我們只有擦掉一個矩形的函 式 (clearRect),所以我們要利用球心跟半 徑算出這個矩形
12.
步驟4: 讓彈力球撞到牆時可以反彈 ● 計算邊界 ○
還記得剛剛粗線條的問題嗎? ○ 彈力球的半徑 ● 檢查是否遇到邊界 ● 遇到: 重新計算位移量 → 改變下次的位移量 → 位移 ● 沒遇到:正常位移 04ReboundBall.html
13.
步驟5: 繪製木板 05Board.html
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
16.
步驟7: 球遇木板反彈,其餘輸掉遊戲 ● 檢查遇到底部界限的狀態 ●
輸掉遊戲 ⇒ 停止遊戲 ○ 需要一個變數來記錄狀態 07CheckBoard.html
17.
步驟8: 顯示輸掉遊戲的提示文字 提示:fillText 試試看自己查文件 08FillText.html
18.
步驟9: 重啟遊戲 ● 增加一個按鈕
button ● 起始函式 ⇒ 這裡面應該要做些什麼事情? ● 掛載 click 事件 08FillText.html
19.
步驟10: 記錄與顯示分數 ● 準備顯示分數的區域 ●
記錄分數的變數 ⇒ 每次要加幾分? ● 重啟時要歸零 ● 成功反彈一次就加一次分數
20.
步驟11: 設定起始位置
21.
Form 表單 ● 基本表單: http://www.w3schools.com/html/html_forms. asp ●
HTML5 表單 http://diveintohtml5.info/forms.html 11FromBasic.html
22.
更進一步... ● 增加關卡,隨著難度的增加... ○ 增加彈力球的速度 ○
反彈木板的長度變短 ○ 分數增加的比率 ● ● ● ● ● 彈力球反彈方向的改變 增加特殊補給,例如吃了木版變長 增加可被攻擊的標的 更多的設定 …
23.
小結 ● setTimeout 的使用 ●
keydown事件 ● 在Canvas上顯示文字 ● HTML的表單
24.
今天只是一個開始,要繼續加油~ ● HTML5:新的標籤, Web
Storage, Web Workers, Geolocation, Form, ... ● Javascript:物件, JSON, closure, protoype,... ● CSS ● 學習使用函式庫或框架:jQuery, AngularJS,... ● 用 js 來做後端:Nodejs ● …
Download Now