利用Canvas做一個骰子小遊戲。

1. 利用Javascript 與 HTML5
開發線上遊戲 - (1) 骰子遊戲
賴怡玲
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. 遊戲規則
1. 一次丟擲兩顆骰子，計算兩顆骰子的點數合
2.1 如果第一次就丟出7或11，則玩家獲勝
2.2 如果第一次丟出2、3、12 玩家就輸了
2.3 如果丟出其他結果 (4, 5, 6, 8, 9, 10)，則記錄
下來，玩家必須繼續丟擲骰子，丟出7就輸了；丟
出上一次的點數就獲勝，其他則繼續丟擲。

5. 遊戲開始
失敗
點數和為2、
3或12
第一次
丟骰子
點數和
為7或
11
其他
點數和為7
紀錄點
數和、繼
續丟骰
子
其他
點數和與紀
錄相同
獲勝

6. 需求分析
● 要可以丟骰子
○ 要能隨機骰子的點數
○ 要能計算點數和
● 紀錄狀態：
○ 第一次？
○ 第二次？
○ 點數和？
● 畫面上
○ 有一個按鈕可以按
○ 畫面上要能看到骰子

7. 簡化問題 → 簡化、各個擊破
❏ 要能隨機出 1 ~ 6
❏ 要能畫出 6 種點數的骰子

8. 簡化問題 - 隨機出1~6
❏ 要能隨機出 1 ~ 6
● http://www.w3schools.com/jsref/jsref_obj_math.asp
● Math.random()：提供0~1之間的小數(但不包括1)
○ 可是我們是要1~6，怎麼做？
● Math.ceil / Math.floor()
● 看到結果：console.log
❏ 要能畫出 6 種點數的骰子
01Random.html

9. 簡化問題 - 畫出骰子
❏ 要能隨機出 1 ~ 6
❏ 要能畫出 6 種點數的骰子
先畫出1點
＝
＋
需要在網頁上畫出一個紅色方框
與一個紅色原點

10. 簡化問題 - 畫出1點
需要在網頁上畫出一個紅色方框
與一個紅色原點
❏ 要能在網頁上畫畫 - HTML5的畫布 Canvas
● http://www.w3schools.com/html/html5_canvas.asp
● http://www.w3schools.com/tags/ref_canvas.asp
（學習從文件中學習與找到自己需要的資源）

11. Canvas (1)
試著從文件中找到這些資訊：
❏
❏
❏
❏
Canvas的基本定義方式
如何利用 JS 操作 Canvas?
在Canvas上畫一個紅色方框
在Canvas上畫一個紅色圓點
(demo)
提示：
stroke 筆觸
line 線
fill 填滿
rect (rectangle) 矩型
arc 弧形

12. Canvas (2) - Canvas 的基本定義方式
<canvas id="myCanvas" width="400"
height="200" style="border:1px solid
#0000CC;">
你的瀏覽器不支援 HTML5 的 Canvas 喔！
</canvas>
02BasicCanvas.html
檢測：http://netrenderer.com/index.php
測試網址：https://dl.dropboxusercontent.com/u/15874546/02BasicCanvas.html

13. Canvas (3) - 如何利用 JS 操作 Canvas?
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 利用這個上下文物件(ctx)來繪圖
</script>

14. Canvas (4) - 在 Canvas 上畫一個紅色方框
❏ 法1: strokeRect()
Draws a rectangle (no fill)
❏
提示：
stroke 筆觸
rect (rectangle) 矩型
法2: rect() + stroke()
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(20,20,150,100);
// ctx.strokeRect(x,y,width,height);

15. Canvas (5) - 坐標系統
<canvas id="myCanvas" width="400" height="200"></canvas>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(20,20,150,100); // ctx.strokeRect(x,y,w,h);
(0, 0)
寬 400
X
寬 150
高
200
Y
(20, 20)
高
100
「紅色」
方框？

16. Canvas (6) - 在 Canvas 上畫一個紅色圓點
提示：
stroke 筆觸
fill 填滿
arc 弧形
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
beginPath()是什麼？

17. Canvas (7) - line
● 簡化：圓 → 弧 → 線
// 要開始畫嚕
ctx.beginPath();
要想像有一隻
草稿筆在手
(70, 80)
// 移動畫筆到起點
ctx.moveTo(70, 80);
// 「想要」畫線到這個點
ctx.lineTo(140, 150);
// 這邊才真的畫出來
ctx.stroke();
(140, 150)

18. Canvas (8) - arc
● 簡化：圓 → 弧 → 線
// 要開始畫嚕
ctx.beginPath();
// 「想要」根據圓心、半徑、
弧度畫出一個弧
ctx.arc(100,100,50,0,
0.8*Math.PI);
弧度 0.8 Pi
// 這邊才真的畫出來
ctx.stroke();
(100, 100)
弧度 0
半徑 50

19. Canvas (9) - closePath
● 簡化：圓 → 弧 → 線
// 要開始畫嚕
ctx.beginPath();
ctx.arc(100,100,50,0,
0.8*Math.PI);
// 結束畫筆路徑，幫你回起
點，製造一個封閉的區域
ctx.closePath();
// 這邊才真的畫出來
ctx.stroke();
(100, 100)
半徑 50

20. Canvas (10) - circle, fill
● 簡化：圓 → 弧 → 線
// 要開始畫嚕
ctx.beginPath();
ctx.arc(100,100,50,0, 2*Math.PI);
// ctx.arc(圓心x, 圓心y, 半徑, 弧度起點, 弧度
終點, 方向);
// 方向：false 順時針; true 逆時針
/* 這邊才真的畫出來，用fill取代stroke，會填充整
fill與stroke可以
個區域，填充的樣式由fillStyle進行設定 */？會
同時存在嗎
ctx.fillStyle=”red”;
發生什麼事？
ctx.fill();

21. Canvas (11) - 練習題1 自己動手試
任意地註解(組合)以下程式碼、任意地修改x, y, r,
startAngle, endAngle, direction, w，觀察其差別。
ctx.beginPath();
ctx.moveTo(x, y);
// 註解掉這行的差別?
ctx.arc(x, y, r, startAngle, endAngle,
direction);
ctx.closePath();
// 註解掉這行的差別?
ctx.lineWidth = w;
ctx.fillStyle = “red”; // 註解掉這行的差別?
blue
15% // 註解掉這行的差別?
ctx.fill();
ctx.stroke();
// 註解掉這行的差別?
// fill 跟 stroke 交換順序有什麼差別？ 03TryCanvas.html

22. Canvas (12) - 練習題2
red
25%

23. Canvas (13) - 練習題3 圓餅圖
green
40%
orange
20%
blue
15%
red
25%
04CanvasPie.html

24. 畫出1點 (終於...)
120
(40, 40)
60
(160, 40)
60
120
(100, 100)
(40, 160)
(160, 160)
05Dice1.html

25. 其他點數：先分析再動手
http://www.goseesee.com/Article/1806.html

26. 先分析再動手 - 發現規則了嗎？
＋
＝
＋
＝
＋
＝

27. 先分析再動手 - 數學很重要
(40, 40)
120
30
(160, 40)
20
(70, 60)
120
(40, 160)
(160, 160)
06Dice2.html

28. 把事情做得更好
● 改成用常數
● 改成函數：ＤＲＹ

29. 自己動手做
● 自己試著畫出：
○ draw1(), draw2(), draw4(), drawMid();
● 然後利用上面的圖案組出：
07OneDice.html

30. 各個擊破後開始合併
❏ 要能隨機出 1 ~ 6
❏ 要能畫出 6 種點數的骰子
⇒ 把這兩者組合在一起：function, switch
(基本用法與其他語言差不多)
⇒ 加上按鈕: button, event

31. switch
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default: // option
code to be executed if n is different from case 1 and 2
}

32. button, events
<button id="play">play</button>
var playBtn =
document.getElementById("play");
playBtn.onclick = function(){
// click之後要做的事情
};
http://www.w3schools.com/js/js_htmldom_events.asp

33. Canvas - clearRect
var c=document.getElementById
("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

34. 遊戲開始
失敗
點數和為2、
3或12
第一次
丟骰子
點數和
為7或
11
其他
點數和為7
紀錄點
數和、繼
續丟骰
子
其他
點數和與紀
錄相同
獲勝

35. 需求分析
● 要可以丟骰子
○ 要能隨機骰子的點數
○ 要能計算點數和
● 紀錄狀態 ⇒ 需要一些變數來記錄狀態
○ 第一次？
○ 第二次？
○ 點數和？
● 畫面上 ⇒ 需要一些HTML來顯示結果
○ 有一個按鈕可以按
○ 畫面上要能看到骰子與遊戲結果

36. 兩顆骰子與判斷遊戲結果

37. 小結：
● 一些HTML的Tag
● JS的數學函式
● JS的變數、函式、switch、事件
● Canvas的定義與操作
○
○
○
○
畫線
畫框
畫弧、畫圓
著色

38. 今天只是一個開始，要繼續加油～
● HTML5：新的標籤, Web Storage, Web
Workers, Geolocation, Form, ...
● Javascript：物件, JSON, closure, protoype,...
● CSS
● 學習使用函式庫或框架：jQuery, AngularJS,...
● 用 js 來做後端：Nodejs
● …