HTML5 Samples

http://MobileDev.TW

Transcript

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