View
1.123
Download
1
Category
Preview:
DESCRIPTION
利用Canvas做一個骰子小遊戲。
Citation preview
利用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
把事情做得更好
● 改成用常數
● 改成函數:DRY
自己動手做
● 自己試著畫出:
○ 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● …
Recommended