利用Javascript 與 html5開發線上遊戲_1骰子遊戲
Upcoming SlideShare
Loading in...5
×
 

利用Javascript 與 html5開發線上遊戲_1骰子遊戲

on

  • 782 views

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

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

Statistics

Views

Total Views
782
Views on SlideShare
782
Embed Views
0

Actions

Likes
2
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    利用Javascript 與 html5開發線上遊戲_1骰子遊戲 利用Javascript 與 html5開發線上遊戲_1骰子遊戲 Presentation Transcript

    • 利用Javascript 與 HTML5 開發線上遊戲 - (1) 骰子遊戲 賴怡玲 2014/1/18 @ 元智大學
    • About me - Azole ● 軟體工程師 / 技術經理 ● 金融交易系統(網站, 視窗程式)、編譯 器、電子商務網站 ● 常用語言:Javascript ( jQuery, AngularJS, NodeJS), PHP, C#, C++,... ● PMP
    • 練習題與範例下載網址 https://github.com/azole/HTML5Game-Tour 右下方有一個 Download ZIP
    • 遊戲規則 1. 一次丟擲兩顆骰子,計算兩顆骰子的點數合 2.1 如果第一次就丟出7或11,則玩家獲勝 2.2 如果第一次丟出2、3、12 玩家就輸了 2.3 如果丟出其他結果 (4, 5, 6, 8, 9, 10),則記錄 下來,玩家必須繼續丟擲骰子,丟出7就輸了;丟 出上一次的點數就獲勝,其他則繼續丟擲。
    • 遊戲開始 失敗 點數和為2、 3或12 第一次 丟骰子 點數和 為7或 11 其他 點數和為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) 試著從文件中找到這些資訊: ❏ ❏ ❏ ❏ Canvas的基本定義方式 如何利用 JS 操作 Canvas? 在Canvas上畫一個紅色方框 在Canvas上畫一個紅色圓點 (demo) 提示: stroke 筆觸 line 線 fill 填滿 rect (rectangle) 矩型 arc 弧形
    • 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
    • Canvas (3) - 如何利用 JS 操作 Canvas? <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // 利用這個上下文物件(ctx)來繪圖 </script>
    • 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);
    • 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 「紅色」 方框?
    • Canvas (6) - 在 Canvas 上畫一個紅色圓點 提示: stroke 筆觸 fill 填滿 arc 弧形 ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke(); beginPath()是什麼?
    • Canvas (7) - line ● 簡化:圓 → 弧 → 線 // 要開始畫嚕 ctx.beginPath(); 要想像有一隻 草稿筆在手 (70, 80) // 移動畫筆到起點 ctx.moveTo(70, 80); // 「想要」畫線到這個點 ctx.lineTo(140, 150); // 這邊才真的畫出來 ctx.stroke(); (140, 150)
    • Canvas (8) - arc ● 簡化:圓 → 弧 → 線 // 要開始畫嚕 ctx.beginPath(); // 「想要」根據圓心、半徑、 弧度畫出一個弧 ctx.arc(100,100,50,0, 0.8*Math.PI); 弧度 0.8 Pi // 這邊才真的畫出來 ctx.stroke(); (100, 100) 弧度 0 半徑 50
    • Canvas (9) - closePath ● 簡化:圓 → 弧 → 線 // 要開始畫嚕 ctx.beginPath(); ctx.arc(100,100,50,0, 0.8*Math.PI); // 結束畫筆路徑,幫你回起 點,製造一個封閉的區域 ctx.closePath(); // 這邊才真的畫出來 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,會填充整 fill與stroke可以 個區域,填充的樣式由fillStyle進行設定 */?會 同時存在嗎 ctx.fillStyle=”red”; 發生什麼事? ctx.fill();
    • 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
    • Canvas (12) - 練習題2 red 25%
    • Canvas (13) - 練習題3 圓餅圖 green 40% orange 20% blue 15% red 25% 04CanvasPie.html
    • 畫出1點 (終於...) 120 (40, 40) 60 (160, 40) 60 120 (100, 100) (40, 160) (160, 160) 05Dice1.html
    • 其他點數:先分析再動手 http://www.goseesee.com/Article/1806.html
    • 先分析再動手 - 發現規則了嗎? + = + = + =
    • 先分析再動手 - 數學很重要 (40, 40) 120 30 (160, 40) 20 (70, 60) 120 (40, 160) (160, 160) 06Dice2.html
    • 把事情做得更好 ● 改成用常數 ● 改成函數:DRY
    • 自己動手做 ● 自己試著畫出: ○ draw1(), draw2(), draw4(), drawMid(); ● 然後利用上面的圖案組出: 07OneDice.html
    • 各個擊破後開始合併 ❏ 要能隨機出 1 ~ 6 ❏ 要能畫出 6 種點數的骰子 ⇒ 把這兩者組合在一起:function, switch (基本用法與其他語言差不多) ⇒ 加上按鈕: button, event
    • 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 }
    • 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 - 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);
    • 遊戲開始 失敗 點數和為2、 3或12 第一次 丟骰子 點數和 為7或 11 其他 點數和為7 紀錄點 數和、繼 續丟骰 子 其他 點數和與紀 錄相同 獲勝
    • 需求分析 ● 要可以丟骰子 ○ 要能隨機骰子的點數 ○ 要能計算點數和 ● 紀錄狀態 ⇒ 需要一些變數來記錄狀態 ○ 第一次? ○ 第二次? ○ 點數和? ● 畫面上 ⇒ 需要一些HTML來顯示結果 ○ 有一個按鈕可以按 ○ 畫面上要能看到骰子與遊戲結果
    • 兩顆骰子與判斷遊戲結果
    • 小結: ● 一些HTML的Tag ● JS的數學函式 ● JS的變數、函式、switch、事件 ● Canvas的定義與操作 ○ ○ ○ ○ 畫線 畫框 畫弧、畫圓 著色
    • 今天只是一個開始,要繼續加油~ ● HTML5:新的標籤, Web Storage, Web Workers, Geolocation, Form, ... ● Javascript:物件, JSON, closure, protoype,... ● CSS ● 學習使用函式庫或框架:jQuery, AngularJS,... ● 用 js 來做後端:Nodejs ● …