tictactoe by html5 canvas
Post on 04-Aug-2015
211 Views
Preview:
TRANSCRIPT
HTML5 Canvas http://MobileDev.TW
TicTacToe by
Canvas� Ryan@MobileDev.TW
1
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
top related