Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML5 Samples
Search
Ryan Chung
May 26, 2014
Technology
0
290
HTML5 Samples
http://MobileDev.TW
Ryan Chung
May 26, 2014
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
300
Design Voice-First Games for Alexa
ryan403
0
54
AI Teaching Talk
ryan403
0
110
Cognitive Service
ryan403
0
96
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
150
JavaScript Practices
ryan403
0
98
Web Programming - Lesson 6
ryan403
1
610
Web Programming - Lesson 7
ryan403
1
620
Other Decks in Technology
See All in Technology
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
150
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
390
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
3
9.6k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.9k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
2
17k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
Delegating the chores of authenticating users to Keycloak
ahus1
0
160
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.3k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
460
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
810
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
210
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How STYLIGHT went responsive
nonsquared
100
5.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Why Our Code Smells
bkeepers
PRO
336
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Fireside Chat
paigeccino
37
3.5k
Optimizing for Happiness
mojombo
379
70k
Transcript
HTML5 Samples http://MobileDev.TW HTML5 Samples
[email protected]
1
HTML5 Samples http://MobileDev.TW HTML5 Samples • 輕便型位置記錄器 • 滑鼠事件 •
觸碰事件 • Canvas小畫家 • 拼圖 2
HTML5 Samples http://MobileDev.TW 1.輕便型位置記錄器 • 使用者可以輸入目前位置的名稱,記錄下目前位置 • 將記錄的位置清單列在網頁下方 3
HTML5 Samples http://MobileDev.TW 1.輕便型位置記錄器 1. 列出使用者曾記錄過的位置 2. 使用者可輸入目前位置名稱 3. 按下送出後,會產生連結至目前地圖位置的超連結
4. 清單也會即時更新,加入最新連結 5. 下次開啓時,這些連結都會出現 4
HTML5 Samples http://MobileDev.TW 1.輕便型位置記錄器 1. 網頁載入時 • 取出local storage裡頭的資料 •
將資料依換行符號進行切割,然後放入陣列 • 將陣列中的每一個項目以清單方式顯示於頁面上 2. 使用者輸入完店名並按下送出按鈕時 • 確認使用者是否有輸入店名 • 取得目前的經緯度 • 經緯度連同使用者輸入的店名作成字串 • 將字串放入陣列中 • 將陣列的每個值以換行符號隔開,組合成一個字串 • 將字串存入local storage • 再次呼叫1.所呼叫的函數 5
HTML5 Samples http://MobileDev.TW 1.Lab 喝水記錄器 6
HTML5 Samples http://MobileDev.TW 電腦與手機互動事件的差異 • onmousedown • 電腦:按下滑鼠左鍵時 • 手機:手指觸碰螢幕時
• onmousemove • 電腦:移動滑鼠時 • 手機:無 • onmouseup • 電腦:放開滑鼠左鍵時 • 手機:手指離開螢幕時 7 • 手機專屬互動事件 • ontouchstart • 手指觸碰螢幕時 • ontouchmove • 觸碰螢幕並移動時 • ontouchend • 手指離開螢幕時
HTML5 Samples http://MobileDev.TW 2.滑鼠事件 • 當滑鼠在頁面上 • 移動 • 點擊
• 顯示絕對座標與相對座標 • 顯示元件名稱 8
HTML5 Samples http://MobileDev.TW 2.滑鼠事件 • 撰寫一頁面有h1、textarea • 頁面載入時,設定以下事件 • onmousedown
• onmousemove • onmouseup • 事件觸發函式 • 秀出目前的相對座標與絕對座標 • (event.offsetX, event.offsetY) (event.clientX, event.clientY) • 秀出目前停留的物件名稱 • event.target.nodeName 9
HTML5 Samples http://MobileDev.TW 3.觸碰事件 • 當手指在頁面上 • 移動 • 點擊
• 顯示座標 • 顯示事件名稱 10
HTML5 Samples http://MobileDev.TW 3.觸碰事件 • 撰寫一頁面有一div • 頁面載入時,設定以下事件於div上 • ontouchstart
• ontouchmove • ontouchdown • 事件觸發函式 • 秀出目前觸發的事件名稱 • event.type • 秀出目前的座標 • (event.touches[i].pageX, event.touches[i].pageY) 11
HTML5 Samples http://MobileDev.TW 4.Canvas小畫家 • 點選標題可變換顏色 • 按一下畫一點 • 拖曳則畫一條線
• 按下Clear按鈕則清除畫面 12
HTML5 Samples http://MobileDev.TW 4.Canvas小畫家 • 網頁上方一個div作為標題 • 中間一個canvas、下方一個按鈕 • 網頁一載入,設定
• canvas基本屬性、畫筆顏色寬度 • 設定canvas的ontouchstart、ontouchmove 、ontouchend事件觸發的函數 • 設定標題的onclick事件(換畫筆顏色) • 全域變數oldX,oldY存放前一個位置,將現在位置與 前一個位置連線 13
HTML5 Samples http://MobileDev.TW 4.Lab 調整畫筆粗細 • 加入下拉式選單 • 決定選項後直接設定畫筆粗細 14
HTML5 Samples http://MobileDev.TW 5.拼圖 • 將一張圖片切割成數塊打亂 • 拿走最後一塊拼圖 • 使用者可移動拼圖組回原貌
15
HTML5 Samples http://MobileDev.TW 程式流程 • 在網頁上顯示原圖片,然後切割打亂 • 顯示打亂的圖片並且把最後一塊拼圖拿走 • 當使用者觸控時,判斷上下左右是否為空格
• 若為空格則交換兩張拼圖 16
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)
HTML5 Samples http://MobileDev.TW 轉換 • 從編號轉換為座標 • 編號為no • x=no%4*80
• y=((no/4)的向下整數)*80 • 從座標轉換為編號 • 座標為(x,y) • no=x/80+y/80*4 18
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
HTML5 Samples http://MobileDev.TW 5.Lab • 點到什麼位置 • 點到哪一張牌 • 要做什麼處理?
• 不動 • 移動 • 成功的判斷 20