利用javascript 與 html5開發線上遊戲_0基本概念
DESCRIPTION
一些網站開發的基本概念TRANSCRIPT
![Page 1: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/1.jpg)
利用Javascript 與 HTML5開發線上遊戲 - (0) 基礎概念
賴怡玲2014/1/18 @ 元智大學
![Page 2: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/2.jpg)
About me - Azole● 軟體工程師 / 技術經理● 金融交易系統(網站, 視窗程式)、編譯
器、電子商務網站● 常用語言:Javascript ( jQuery,
AngularJS, NodeJS), PHP, C#, C++,...
● PMP
![Page 3: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/3.jpg)
假設...
● 大家都學過程式設計...○ 變數○ 條件判斷○ 迴圈○ 函式
● 但是大家都不會Javascript...
![Page 4: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/4.jpg)
今天不會做的事...
● 教完全部的 Javascript● 教完全部的 HTML5● 教到 jQuery 或是 AngularJS 等工具、函式庫
或框架● Server 端
![Page 5: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/5.jpg)
今天會做的事...
● 直接利用幾個小遊戲來學習 Javascript 與 HTML5
● 跳過最基礎的定義與多種方法(只挑其中一種來示範),今天的目的是「入門」與「感受」
● 希望每個人都可以自己動手實作● 不停地上網查資料,慢慢地、一步一步地完成
目標
![Page 6: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/6.jpg)
話說在前頭...
![Page 7: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/7.jpg)
網頁瀏覽這回事...
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
![Page 8: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/8.jpg)
前端:HTML + CSS + Javascript後端
173.194.72.94
HTTP Request
HTTP Response<?php
echo “test”;
?>
test
![Page 9: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/9.jpg)
HTML5
JavascriptHTML CSS API
40%9% 1%
(我們今天上課的比例)
50%
![Page 10: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/10.jpg)
http://www.youtube.com/watch?v=I0rIZc5SU84&list=PL1HFn_p7KtfGQ2n6Cr_mV5bCEvtEWnyR_&index=1
2022年
不過大家都偷跑了...
![Page 11: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/11.jpg)
瀏覽器支援程度
● 測試網站:http://html5test.com/● 或是可以在網路上查到類似這樣的表格:http://caniuse.
com/canvas
http://caniuse.com/canvas
![Page 12: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/12.jpg)
練習題與範例下載網址https://github.com/azole/HTML5-
Game-Tour右下方有一個 Download ZIP
![Page 13: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/13.jpg)
基本的 HTML 網頁
![Page 14: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/14.jpg)
![Page 15: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/15.jpg)
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/
![Page 16: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/16.jpg)
Just do it
● 骰子遊戲
利用Javascript 與 HTML5開發線上遊戲_1Dice● 彈力球
利用Javascript 與 HTML5開發線上遊戲_2Ball
![Page 17: 利用Javascript 與 html5開發線上遊戲_0基本概念](https://reader034.vdocuments.pub/reader034/viewer/2022052522/55498baeb4c905c26a8b50f4/html5/thumbnails/17.jpg)
今天只是一個開始,要繼續加油~
● HTML5:新的標籤, Web Storage, Web Workers, Geolocation, Form, ...
● Javascript:物件, JSON, closure, protoype,...● CSS● 學習使用函式庫或框架:jQuery, AngularJS,...● 用 js 來做後端:Nodejs● …