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