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.
HTML5 Samples http://MobileDev.TW
HTML5Samples
Ryan@MobileDev.TW
1
HTML5 Samples http://MobileDev.TW
HTML5 Samples
1.  輕便型位置記錄器
•  使用者端儲存+地理位置偵測+字串切割與合併
2.  Canvas小畫家
•  Canvas繪圖+觸碰事件
3.  拼...
HTML5 Samples http://MobileDev.TW
1.輕便型位置記錄器
•  使用者可以輸入目前位置的名稱,記錄下目前位置
•  將記錄的位置清單列在網頁下方
3
HTML5 Samples http://MobileDev.TW
使用者端資料儲存
4
HTML5 Samples http://MobileDev.TW
A.localStorage
HTML5提供兩種方式進行離線儲存:
localStorage : 資料存放無時間限制
一、存放資料
script type=text/javas...
HTML5 Samples http://MobileDev.TW
B.sessionStorage
sessionStorage : 將資料存在一個session,當使用者關閉瀏覽器時資料即消失
一、存放資料
script type=text...
HTML5 Samples http://MobileDev.TW
1.輕便型位置記錄器
1.  列出使用者曾記錄過的位置
2.  使用者可輸入目前位置名稱
3.  按下送出後,會產生連結至目前地圖位置的超連結
4.  清單也會即時更新,加入最...
HTML5 Samples http://MobileDev.TW
1.輕便型位置記錄器
1.  網頁載入時
•  取出local storage裡頭的資料
•  將資料依換行符號進行切割,然後放入陣列
•  將陣列中的每一個項目以清單方式顯示...
HTML5 Samples http://MobileDev.TW
1.Lab 喝水記錄器
9
HTML5 Samples http://MobileDev.TW
2.Canvas小畫家
•  點選標題可變換顏色
•  按一下畫一點
•  拖曳則畫一條線
•  按下Clear按鈕則清除畫面
10
HTML5 Samples http://MobileDev.TW
電腦與手機互動事件的差異
•  onmousedown
•  電腦:按下滑鼠左鍵時
•  手機:手指觸碰螢幕時
•  onmousemove
•  電腦:移動滑鼠時
•  手機...
HTML5 Samples http://MobileDev.TW
滑鼠事件
•  當滑鼠在頁面上
•  移動
•  點擊
•  顯示絕對座標與相對座標
•  顯示元件名稱
12
HTML5 Samples http://MobileDev.TW
滑鼠事件
•  撰寫一頁面有h1、textarea
•  頁面載入時,設定以下事件
•  onmousedown
•  onmousemove
•  onmouseup
•  ...
HTML5 Samples http://MobileDev.TW
觸碰事件
•  當手指在頁面上
•  移動
•  點擊
•  顯示座標
•  顯示事件名稱
14
HTML5 Samples http://MobileDev.TW
觸碰事件
•  撰寫一頁面有一div
•  頁面載入時,設定以下事件於div上
•  ontouchstart
•  ontouchmove
•  ontouchdown
• ...
HTML5 Samples http://MobileDev.TW
2.Canvas小畫家
•  網頁上方一個div作為標題
•  中間一個canvas、下方一個按鈕
•  網頁一載入,設定
•  canvas基本屬性、畫筆顏色寬度
•  設定...
HTML5 Samples http://MobileDev.TW
2.Lab 調整畫筆粗細
•  加入下拉式選單
•  決定選項後直接設定畫筆粗細
17
HTML5 Samples http://MobileDev.TW
3.拼圖
•  將一張圖片切割成數塊打亂
•  拿走最後一塊拼圖
•  使用者可移動拼圖組回原貌
18
HTML5 Samples http://MobileDev.TW
程式流程
1.  在網頁上顯示原圖片,然後切割打亂
2.  顯示打亂的圖片並且把最後一塊拼圖拿走
3.  當使用者觸控時,判斷上下左右是否為空格
•  若為空格則交換兩張拼圖
...
HTML5 Samples http://MobileDev.TW
編號與座標的對應
20
0
 1
 2
 3
4
 5
 6
 7
8
 9
 10
 11
12
 13
 14
 15
(0,0) (80,0) (160,0) (240,...
HTML5 Samples http://MobileDev.TW
轉換
•  從編號轉換為座標
•  編號為no
•  x=no%4*80
•  y=((no/4)的向下整數)*80
•  從座標轉換為編號
•  座標為(x,y)
•  no...
HTML5 Samples http://MobileDev.TW
轉換二
•  將使用者觸控到的位置轉換成第no塊
•  觸控到的位置為(x,y)
•  no=((x/80)的向下整數)+(((y-20)/80)的向下整數)*4
•  相鄰方...
HTML5 Samples http://MobileDev.TW
5.Lab
•  點到什麼位置
•  點到哪一張牌
•  要做什麼處理?
•  不動
•  移動
•  成功的判斷
23
Upcoming SlideShare
Loading in …5
×

HTML5 Samples

1,943 views

Published on

Published in: Technology
  • Be the first to comment

HTML5 Samples

  1. 1. HTML5 Samples http://MobileDev.TW HTML5Samples Ryan@MobileDev.TW 1
  2. 2. HTML5 Samples http://MobileDev.TW HTML5 Samples 1.  輕便型位置記錄器 •  使用者端儲存+地理位置偵測+字串切割與合併 2.  Canvas小畫家 •  Canvas繪圖+觸碰事件 3.  拼圖 •  Canvas加入圖片+觸控事件+陣列儲存 2
  3. 3. HTML5 Samples http://MobileDev.TW 1.輕便型位置記錄器 •  使用者可以輸入目前位置的名稱,記錄下目前位置 •  將記錄的位置清單列在網頁下方 3
  4. 4. HTML5 Samples http://MobileDev.TW 使用者端資料儲存 4
  5. 5. HTML5 Samples http://MobileDev.TW A.localStorage HTML5提供兩種方式進行離線儲存: localStorage : 資料存放無時間限制 一、存放資料 script type=text/javascript localStorage.lastname=Smith; document.write(Last name: + localStorage.lastname); /script 二、記錄到訪次數 script type=text/javascript if (localStorage.pagecount) {localStorage.pagecount=Number(localStorage.pagecount) +1;} else {localStorage.pagecount=1;} document.write(Visits: + localStorage.pagecount + time(s).); /script 5
  6. 6. HTML5 Samples http://MobileDev.TW B.sessionStorage sessionStorage : 將資料存在一個session,當使用者關閉瀏覽器時資料即消失 一、存放資料 script type=text/javascript sessionStorage.lastname=Smith; document.write(sessionStorage.lastname); /script 二、計算訪客次數 script type=text/javascript if (sessionStorage.pagecount) {sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;} else {sessionStorage.pagecount=1;} document.write(Visits + sessionStorage.pagecount + time(s) this session.); /script 6
  7. 7. HTML5 Samples http://MobileDev.TW 1.輕便型位置記錄器 1.  列出使用者曾記錄過的位置 2.  使用者可輸入目前位置名稱 3.  按下送出後,會產生連結至目前地圖位置的超連結 4.  清單也會即時更新,加入最新連結 5.  下次開啓時,這些連結都會出現 7
  8. 8. HTML5 Samples http://MobileDev.TW 1.輕便型位置記錄器 1.  網頁載入時 •  取出local storage裡頭的資料 •  將資料依換行符號進行切割,然後放入陣列 •  將陣列中的每一個項目以清單方式顯示於頁面上 2.  使用者輸入完店名並按下送出按鈕時 •  確認使用者是否有輸入店名 •  取得目前的經緯度 •  經緯度連同使用者輸入的店名作成字串 •  將字串放入陣列中 •  將陣列的每個值以換行符號隔開,組合成一個字串 •  將字串存入local storage •  再次呼叫1.所呼叫的函數 8
  9. 9. HTML5 Samples http://MobileDev.TW 1.Lab 喝水記錄器 9
  10. 10. HTML5 Samples http://MobileDev.TW 2.Canvas小畫家 •  點選標題可變換顏色 •  按一下畫一點 •  拖曳則畫一條線 •  按下Clear按鈕則清除畫面 10
  11. 11. HTML5 Samples http://MobileDev.TW 電腦與手機互動事件的差異 •  onmousedown •  電腦:按下滑鼠左鍵時 •  手機:手指觸碰螢幕時 •  onmousemove •  電腦:移動滑鼠時 •  手機:無 •  onmouseup •  電腦:放開滑鼠左鍵時 •  手機:手指離開螢幕時 11 •  手機專屬互動事件 •  ontouchstart •  手指觸碰螢幕時 •  ontouchmove •  觸碰螢幕並移動時 •  ontouchend •  手指離開螢幕時
  12. 12. HTML5 Samples http://MobileDev.TW 滑鼠事件 •  當滑鼠在頁面上 •  移動 •  點擊 •  顯示絕對座標與相對座標 •  顯示元件名稱 12
  13. 13. HTML5 Samples http://MobileDev.TW 滑鼠事件 •  撰寫一頁面有h1、textarea •  頁面載入時,設定以下事件 •  onmousedown •  onmousemove •  onmouseup •  事件觸發函式 •  秀出目前的相對座標與絕對座標 •  (event.offsetX, event.offsetY) (event.clientX, event.clientY) •  秀出目前停留的物件名稱 •  event.target.nodeName 13
  14. 14. HTML5 Samples http://MobileDev.TW 觸碰事件 •  當手指在頁面上 •  移動 •  點擊 •  顯示座標 •  顯示事件名稱 14
  15. 15. HTML5 Samples http://MobileDev.TW 觸碰事件 •  撰寫一頁面有一div •  頁面載入時,設定以下事件於div上 •  ontouchstart •  ontouchmove •  ontouchdown •  事件觸發函式 •  秀出目前觸發的事件名稱 •  event.type •  秀出目前的座標 •  (event.touches[i].pageX, event.touches[i].pageY) 15
  16. 16. HTML5 Samples http://MobileDev.TW 2.Canvas小畫家 •  網頁上方一個div作為標題 •  中間一個canvas、下方一個按鈕 •  網頁一載入,設定 •  canvas基本屬性、畫筆顏色寬度 •  設定canvas的ontouchstart、ontouchmove 、ontouchend事件觸發的函數 •  設定標題的onclick事件(換畫筆顏色) •  全域變數oldX,oldY存放前一個位置,將現在位置與 前一個位置連線 16
  17. 17. HTML5 Samples http://MobileDev.TW 2.Lab 調整畫筆粗細 •  加入下拉式選單 •  決定選項後直接設定畫筆粗細 17
  18. 18. HTML5 Samples http://MobileDev.TW 3.拼圖 •  將一張圖片切割成數塊打亂 •  拿走最後一塊拼圖 •  使用者可移動拼圖組回原貌 18
  19. 19. HTML5 Samples http://MobileDev.TW 程式流程 1.  在網頁上顯示原圖片,然後切割打亂 2.  顯示打亂的圖片並且把最後一塊拼圖拿走 3.  當使用者觸控時,判斷上下左右是否為空格 •  若為空格則交換兩張拼圖 19
  20. 20. HTML5 Samples http://MobileDev.TW 編號與座標的對應 20 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 (0,0) (80,0) (160,0) (240,0) (0,80) (0,160) (0,240) (80,80) (80,160) (80,240) (160,80) (160,160) (160,240) (240,80) (240,160) (240,240)
  21. 21. HTML5 Samples http://MobileDev.TW 轉換 •  從編號轉換為座標 •  編號為no •  x=no%4*80 •  y=((no/4)的向下整數)*80 •  從座標轉換為編號 •  座標為(x,y) •  no=x/80+y/80*4 21
  22. 22. HTML5 Samples http://MobileDev.TW 轉換二 •  將使用者觸控到的位置轉換成第no塊 •  觸控到的位置為(x,y) •  no=((x/80)的向下整數)+(((y-20)/80)的向下整數)*4 •  相鄰方塊的編號 •  上方 no_up= ((x/80)的向下整數)+(((y-20)/80)的向下整數-1)*4 •  下方 no_down=((x/80)的向下整數)+(((y-20)/80)的向下整數+1)*4 •  左方 no_left=((x/80)的向下整數-1)+(((y-20)/80)的向下整數)*4 •  右方 no_right=((x/80)的向下整數+1)+(((y-20)/80)的向下整數)*4 22
  23. 23. HTML5 Samples http://MobileDev.TW 5.Lab •  點到什麼位置 •  點到哪一張牌 •  要做什麼處理? •  不動 •  移動 •  成功的判斷 23

×