利用Javascript 與 HTML5開發線上遊戲 - (0) 基礎概念

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

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

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

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

● PMP

假設...

● 大家都學過程式設計...○ 變數○ 條件判斷○ 迴圈○ 函式

● 但是大家都不會Javascript...

今天不會做的事...

● 教完全部的 Javascript● 教完全部的 HTML5● 教到 jQuery 或是 AngularJS 等工具、函式庫

或框架● Server 端

今天會做的事...

● 直接利用幾個小遊戲來學習 Javascript 與 HTML5

● 跳過最基礎的定義與多種方法(只挑其中一種來示範)，今天的目的是「入門」與「感受」

● 希望每個人都可以自己動手實作● 不停地上網查資料，慢慢地、一步一步地完成

目標

話說在前頭...

網頁瀏覽這回事...

DNS(2)www.google.com.tw

(3)173.194.72.94

http://reviews.cnet.com/8301-3132_7-57569688-98/seagate-overhauls-advanced-nas-lineup-with-business-storage-servers/http://demo.onestepcheckout.com/products/acer-ferrari-3200-notebook-computer-pc.htmlhttp://db.cse.ohio-state.edu/

(5)HTTP

Response

(1)

(6)

173.194.72.94

(4)HTTP

Request

前端：HTML + CSS + Javascript後端

173.194.72.94

HTTP Request

HTTP Response<?php

echo “test”;

?>

test

HTML5

JavascriptHTML CSS API

40%9% 1%

（我們今天上課的比例）

50%

http://www.youtube.com/watch?v=I0rIZc5SU84&list=PL1HFn_p7KtfGQ2n6Cr_mV5bCEvtEWnyR_&index=1

2022年

不過大家都偷跑了...

瀏覽器支援程度

● 測試網站：http://html5test.com/● 或是可以在網路上查到類似這樣的表格：http://caniuse.

com/canvas

http://caniuse.com/canvas

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

Game-Tour右下方有一個 Download ZIP

基本的 HTML 網頁

HTML基本範例 - Demo

● HTML Tutorial○ http://www.w3schools.com/html/

○ http://www.w3schools.com/html/html_examples.asp

● CSS Tutorial○ http://www.w3schools.com/css/

○ http://www.w3schools.com/css/css_examples.asp

● Javascript Tutorial○ http://www.w3schools.com/js/

Just do it

● 骰子遊戲

利用Javascript 與 HTML5開發線上遊戲_1Dice● 彈力球

利用Javascript 與 HTML5開發線上遊戲_2Ball

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

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

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