Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
利用Javascript 與 HTML5
開發線上遊戲 - (0) 基礎概念
賴怡玲
2014/1/18 @ 元智大學
About me - Azole
● 軟體工程師 / 技術經理
● 金融交易系統(網站, 視窗程式)、編譯
器、電子商務網站
● 常用語言:Javascript ( jQuery,
AngularJS, NodeJS), PHP, C#,
C+...
假設...
● 大家都學過程式設計...
○
○
○
○

變數
條件判斷
迴圈
函式

● 但是大家都不會Javascript...
今天不會做的事...
● 教完全部的 Javascript
● 教完全部的 HTML5
● 教到 jQuery 或是 AngularJS 等工具、函式庫
或框架
● Server 端
今天會做的事...
● 直接利用幾個小遊戲來學習 Javascript 與
HTML5
● 跳過最基礎的定義與多種方法(只挑其中一種
來示範),今天的目的是「入門」與「感受」
● 希望每個人都可以自己動手實作
● 不停地上網查資料,慢慢地、一步...
話說在前頭...
網頁瀏覽這回事...

(1)
(6)

(4)
HTTP
Request
173.194.72.94

(5)
HTTP
Response

(2)
www.google.
com.tw
(3)
173.194.72.94

http://r...
後端

前端:HTML + CSS + Javascript

HTTP
Request

173.194.72.94
<?php
echo “test”;
?>

HTTP
Response

test
HTML5

HTML

Javascript

CSS

API

9%

40%

1%

50%

(我們今天上課的比例)
2022年

...

了
偷跑

家都

大
不過

http://www.youtube.com/watch?v=I0rIZc5SU84&list=PL1HFn_p7KtfGQ2n6Cr_mV5bCEvtEWnyR_&index=1
瀏覽器支援程度
● 測試網站:http://html5test.com/
● 或是可以在網路上查到類似這樣的表格:http://caniuse.
com/canvas

http://caniuse.com/canvas
練習題與範例下載網址
https://github.com/azole/HTML5Game-Tour
右下方有一個 Download ZIP
基本的 HTML 網頁
HTML基本範例 - Demo
● HTML Tutorial
○ http://www.w3schools.com/html/
○ http://www.w3schools.com/html/html_examples.asp

● CSS ...
Just do it
● 骰子遊戲
利用Javascript 與 HTML5開發線上遊戲_1Dice
● 彈力球
利用Javascript 與 HTML5開發線上遊戲_2Ball
今天只是一個開始,要繼續加油~
● HTML5:新的標籤, Web Storage, Web
Workers, Geolocation, Form, ...
● Javascript:物件, JSON, closure, protoype,.....
利用Javascript 與 html5開發線上遊戲_0基本概念
Upcoming SlideShare
Loading in …5
×

7

Share

Download to read offline

利用Javascript 與 html5開發線上遊戲_0基本概念

Download to read offline

一些網站開發的基本概念

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

利用Javascript 與 html5開發線上遊戲_0基本概念

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

    May. 14, 2017
  • HuangRobert

    Mar. 22, 2016
  • bestlong

    Apr. 22, 2015
  • huaihsinlu

    Feb. 2, 2015
  • yulin1272

    Dec. 31, 2014
  • wuvincentck

    Dec. 15, 2014
  • ssuser9ba97f

    Dec. 3, 2014

一些網站開發的基本概念

Views

Total views

11,143

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

37

Shares

0

Comments

0

Likes

7

×