Más contenido relacionado La actualidad más candente (20) Similar a 利用Javascript 與 html5開發線上遊戲_1骰子遊戲 (18) 利用Javascript 與 html5開發線上遊戲_1骰子遊戲2. About me - Azole
● 軟體工程師 / 技術經理
● 金融交易系統(網站, 視窗程式)、編譯
器、電子商務網站
● 常用語言:Javascript ( jQuery,
AngularJS, NodeJS), PHP, C#,
C++,...
● PMP
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
(學習從文件中學習與找到自己需要的資源)
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
23. Canvas (13) - 練習題3 圓餅圖
green
40%
orange
20%
blue
15%
red
25%
04CanvasPie.html
30. 各個擊破後開始合併
❏ 要能隨機出 1 ~ 6
❏ 要能畫出 6 種點數的骰子
⇒ 把這兩者組合在一起:function, switch
(基本用法與其他語言差不多)
⇒ 加上按鈕: button, event
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);
38. 今天只是一個開始,要繼續加油~
● HTML5:新的標籤, Web Storage, Web
Workers, Geolocation, Form, ...
● Javascript:物件, JSON, closure, protoype,...
● CSS
● 學習使用函式庫或框架:jQuery, AngularJS,...
● 用 js 來做後端:Nodejs
● …