利用Javascript 與 HTML5開發線上遊戲 - (1) 骰子遊戲

賴怡玲2014/1/18 @ 元智大學

About me - Azole● 軟體工程師 / 技術經理● 金融交易系統(網站, 視窗程式)、編譯

器、電子商務網站● 常用語言：Javascript ( jQuery,

AngularJS, NodeJS), PHP, C#, C++,...

● PMP

練習題與範例下載網址https://github.com/azole/HTML5-

Game-Tour右下方有一個 Download ZIP

遊戲規則

1. 一次丟擲兩顆骰子，計算兩顆骰子的點數合

2.1 如果第一次就丟出7或11，則玩家獲勝

2.2 如果第一次丟出2、3、12 玩家就輸了

2.3 如果丟出其他結果 (4, 5, 6, 8, 9, 10)，則記錄下來，玩家必須繼續丟擲骰子，丟出7就輸了；丟出上一次的點數就獲勝，其他則繼續丟擲。

遊戲開始

第一次丟骰子

獲勝失敗點數和為7或11

點數和為2、3或12

紀錄點數和、繼續丟骰子

其他

點數和為7 點數和與紀錄相同

其他

需求分析

● 要可以丟骰子○ 要能隨機骰子的點數○ 要能計算點數和

● 紀錄狀態：○ 第一次？○ 第二次？○ 點數和？

● 畫面上○ 有一個按鈕可以按○ 畫面上要能看到骰子

簡化問題 → 簡化、各個擊破

❏ 要能隨機出 1 ~ 6❏ 要能畫出 6 種點數的骰子

簡化問題 - 隨機出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

簡化問題 - 畫出骰子

❏ 要能隨機出 1 ~ 6❏ 要能畫出 6 種點數的骰子

先畫出1點

需要在網頁上畫出一個紅色方框與一個紅色原點

＋＝

簡化問題 - 畫出1點

❏ 要能在網頁上畫畫 - HTML5的畫布 Canvas● http://www.w3schools.com/html/html5_canvas.asp

● http://www.w3schools.com/tags/ref_canvas.asp

（學習從文件中學習與找到自己需要的資源）

需要在網頁上畫出一個紅色方框與一個紅色原點

Canvas (1)

提示： stroke 筆觸 line 線 fill 填滿 rect (rectangle) 矩型 arc 弧形

(demo)

試著從文件中找到這些資訊：

❏ Canvas的基本定義方式

❏ 如何利用 JS 操作 Canvas?❏ 在Canvas上畫一個紅色方框

❏ 在Canvas上畫一個紅色圓點

Canvas (2) - Canvas 的基本定義方式

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #0000CC;">你的瀏覽器不支援 HTML5 的 Canvas 喔！

</canvas>

檢測：http://netrenderer.com/index.php 測試網址：https://dl.dropboxusercontent.com/u/15874546/02BasicCanvas.html

02BasicCanvas.html

<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");// 利用這個上下文物件(ctx)來繪圖

</script>

Canvas (3) - 如何利用 JS 操作 Canvas?

Canvas (4) - 在 Canvas 上畫一個紅色方框 ❏ 法1: strokeRect() Draws a rectangle (no fill)

❏ 法2: rect() + stroke()

提示： stroke 筆觸 rect (rectangle) 矩型

var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.strokeRect(20,20,150,100);// ctx.strokeRect(x,y,width,height);

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);

寬 400

高200

(0, 0) X

Y

寬 150高

100

(20, 20)「紅色」

方框？

Canvas (6) - 在 Canvas 上畫一個紅色圓點

ctx.beginPath();ctx.arc(100,75,50,0,2*Math.PI);ctx.stroke();

beginPath()是什麼？

提示： stroke 筆觸 fill 填滿 arc 弧形

Canvas (7) - line

● 簡化：圓 → 弧 → 線

// 要開始畫嚕ctx.beginPath();

// 移動畫筆到起點ctx.moveTo(70, 80);

// 「想要」畫線到這個點ctx.lineTo(140, 150);

// 這邊才真的畫出來ctx.stroke();

(70, 80)

(140, 150)

要想像有一隻草稿筆在手

Canvas (8) - arc

● 簡化：圓 → 弧 → 線

// 要開始畫嚕ctx.beginPath();

// 「想要」根據圓心、半徑、弧度畫出一個弧ctx.arc(100,100,50,0, 0.8*Math.PI);

// 這邊才真的畫出來ctx.stroke();

(100, 100)

半徑 50

弧度 0

弧度 0.8 Pi

// 結束畫筆路徑，幫你回起點，製造一個封閉的區域ctx.closePath();

Canvas (9) - closePath

● 簡化：圓 → 弧 → 線

// 要開始畫嚕ctx.beginPath();

ctx.arc(100,100,50,0, 0.8*Math.PI);

// 這邊才真的畫出來ctx.stroke();

(100, 100)

半徑 50

Canvas (10) - circle, fill

● 簡化：圓 → 弧 → 線// 要開始畫嚕ctx.beginPath();

ctx.arc(100,100,50,0, 2*Math.PI);// ctx.arc(圓心x, 圓心y, 半徑, 弧度起點, 弧度終點, 方向);// 方向：false 順時針; true 逆時針

/* 這邊才真的畫出來，用fill取代stroke，會填充整個區域，填充的樣式由fillStyle進行設定 */ctx.fillStyle=”red”;ctx.fill();

fill與stroke可以

同時存在嗎？會

發生什麼事？

任意地註解(組合)以下程式碼、任意地修改x, y, r, startAngle, endAngle, direction, w，觀察其差別。

Canvas (11) - 練習題1 自己動手試

blue15%

ctx.beginPath();ctx.moveTo(x, y); // 註解掉這行的差別?ctx.arc(x, y, r, startAngle, endAngle, direction);ctx.closePath(); // 註解掉這行的差別?ctx.lineWidth = w;ctx.fillStyle = “red”; // 註解掉這行的差別?ctx.fill(); // 註解掉這行的差別?ctx.stroke(); // 註解掉這行的差別?// fill 跟 stroke 交換順序有什麼差別？ 03TryCanvas.html

Canvas (12) - 練習題2

red25%

Canvas (13) - 練習題3 圓餅圖

green40%

red25%blue

15%

orange20%

04CanvasPie.html

畫出1點 (終於...)

(40, 40) (160, 40)

(160, 160)(40, 160)

120

120

60

60

(100, 100)

05Dice1.html

其他點數：先分析再動手

http://www.goseesee.com/Article/1806.html

先分析再動手 - 發現規則了嗎？

＋ ＝

＋ ＝

＋ ＝

先分析再動手 - 數學很重要

(40, 40)(160, 40)

(160, 160)(40, 160)

120

120

3020

(70, 60)

06Dice2.html

把事情做得更好

● 改成用常數

● 改成函數：ＤＲＹ

自己動手做

● 自己試著畫出：

○ draw1(), draw2(), draw4(), drawMid();

● 然後利用上面的圖案組出：

07OneDice.html

各個擊破後開始合併

❏ 要能隨機出 1 ~ 6

❏ 要能畫出 6 種點數的骰子

⇒ 把這兩者組合在一起：function, switch (基本用法與其他語言差不多)

⇒ 加上按鈕: button, event

switchswitch(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}

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

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

ctx.clearRect(20,20,100,50);

遊戲開始

第一次丟骰子

獲勝失敗點數和為7或11

點數和為2、3或12

紀錄點數和、繼續丟骰子

其他

點數和為7 點數和與紀錄相同

其他

● 要可以丟骰子○ 要能隨機骰子的點數○ 要能計算點數和

● 紀錄狀態 ⇒ 需要一些變數來記錄狀態○ 第一次？○ 第二次？○ 點數和？

● 畫面上 ⇒ 需要一些HTML來顯示結果○ 有一個按鈕可以按○ 畫面上要能看到骰子與遊戲結果

需求分析

兩顆骰子與判斷遊戲結果

小結：

● 一些HTML的Tag

● JS的數學函式

● JS的變數、函式、switch、事件

● Canvas的定義與操作○ 畫線

○ 畫框

○ 畫弧、畫圓

○ 著色

今天只是一個開始，要繼續加油～

● HTML5：新的標籤, Web Storage, Web Workers, Geolocation, Form, ...

● Javascript：物件, JSON, closure, protoype,...● CSS● 學習使用函式庫或框架：jQuery, AngularJS,...● 用 js 來做後端：Nodejs● …