一些網站開發的基本概念

1. 利用Javascript 與 HTML5
開發線上遊戲 - (0) 基礎概念
賴怡玲
2014/1/18 @ 元智大學

2. About me - Azole
● 軟體工程師 / 技術經理
● 金融交易系統(網站, 視窗程式)、編譯
器、電子商務網站
● 常用語言：Javascript ( jQuery,
AngularJS, NodeJS), PHP, C#,
C++,...
● PMP

3. 假設...
● 大家都學過程式設計...
○
○
○
○
變數
條件判斷
迴圈
函式
● 但是大家都不會Javascript...

4. 今天不會做的事...
● 教完全部的 Javascript
● 教完全部的 HTML5
● 教到 jQuery 或是 AngularJS 等工具、函式庫
或框架
● Server 端

5. 今天會做的事...
● 直接利用幾個小遊戲來學習 Javascript 與
HTML5
● 跳過最基礎的定義與多種方法(只挑其中一種
來示範)，今天的目的是「入門」與「感受」
● 希望每個人都可以自己動手實作
● 不停地上網查資料，慢慢地、一步一步地完成
目標

6. 話說在前頭...

7. 網頁瀏覽這回事...
(1)
(6)
(4)
HTTP
Request
173.194.72.94
(5)
HTTP
Response
(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.html
http://db.cse.ohio-state.edu/
DNS

8. 後端
前端：HTML + CSS + Javascript
HTTP
Request
173.194.72.94
<?php
echo “test”;
?>
HTTP
Response
test

9. HTML5
HTML
Javascript
CSS
API
9%
40%
1%
50%
（我們今天上課的比例）

10. 2022年
...
了
偷跑
家都
大
不過
http://www.youtube.com/watch?v=I0rIZc5SU84&list=PL1HFn_p7KtfGQ2n6Cr_mV5bCEvtEWnyR_&index=1

11. 瀏覽器支援程度
● 測試網站：http://html5test.com/
● 或是可以在網路上查到類似這樣的表格：http://caniuse.
com/canvas
http://caniuse.com/canvas

12. 練習題與範例下載網址
https://github.com/azole/HTML5Game-Tour
右下方有一個 Download ZIP

13. 基本的 HTML 網頁

15. 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/

16. Just do it
● 骰子遊戲
利用Javascript 與 HTML5開發線上遊戲_1Dice
● 彈力球
利用Javascript 與 HTML5開發線上遊戲_2Ball

17. 今天只是一個開始，要繼續加油～
● HTML5：新的標籤, Web Storage, Web
Workers, Geolocation, Form, ...
● Javascript：物件, JSON, closure, protoype,...
● CSS
● 學習使用函式庫或框架：jQuery, AngularJS,...
● 用 js 來做後端：Nodejs
● …