Download - TicTacToe by HTML5 Canvas
Transcript
HTML5 Canvas http://MobileDev.TW
1.用Canvas畫出棋盤�
2
HTML5 Canvas http://MobileDev.TW
1.用Canvas畫出棋盤�
3
HTML5 Canvas http://MobileDev.TW
2.處理滑鼠點擊事件� • 目前點到第幾格?�
1. 加入Canvas觸控事件監控、取得座標�
2. 將座標轉換為點到第幾格�
• 畫X還是畫O?�
1. 目前是第幾個使用者在操作?�
2. 畫O、畫X的座標計算�
• 已經畫過的地方不能再畫�
1. 用什麼來儲存畫過的資料?�
4
HTML5 Canvas http://MobileDev.TW
編號與座標的對應�
5
0 1 2
3 4 5
6 7 8
(0,0) (200,0) (400,0)
(0,200)
(0,400)
(200,200)
(200,400)
(400,200)
(400,400)
HTML5 Canvas http://MobileDev.TW
3.如何判斷成功?� • 目前玩了幾格?�
• 誰目前可能已獲勝?�
• 獲勝有哪幾種可能性?�
• 每一格都玩了但是還是沒勝負?�
• 每一格都畫了並且沒勝負=>平手�
6