TicTacToe by HTML5 Canvas
6
-
Upload
ryan-chung -
Category
Technology
-
view
213 -
download
3
Transcript of TicTacToe by HTML5 Canvas
![Page 2: TicTacToe by HTML5 Canvas](https://reader035.fdocuments.net/reader035/viewer/2022081205/55bfd14cbb61ebbd3d8b464b/html5/thumbnails/2.jpg)
HTML5 Canvas http://MobileDev.TW
1.用Canvas畫出棋盤�
2
![Page 3: TicTacToe by HTML5 Canvas](https://reader035.fdocuments.net/reader035/viewer/2022081205/55bfd14cbb61ebbd3d8b464b/html5/thumbnails/3.jpg)
HTML5 Canvas http://MobileDev.TW
1.用Canvas畫出棋盤�
3
![Page 4: TicTacToe by HTML5 Canvas](https://reader035.fdocuments.net/reader035/viewer/2022081205/55bfd14cbb61ebbd3d8b464b/html5/thumbnails/4.jpg)
HTML5 Canvas http://MobileDev.TW
2.處理滑鼠點擊事件� • 目前點到第幾格?�
1. 加入Canvas觸控事件監控、取得座標�
2. 將座標轉換為點到第幾格�
• 畫X還是畫O?�
1. 目前是第幾個使用者在操作?�
2. 畫O、畫X的座標計算�
• 已經畫過的地方不能再畫�
1. 用什麼來儲存畫過的資料?�
4
![Page 5: TicTacToe by HTML5 Canvas](https://reader035.fdocuments.net/reader035/viewer/2022081205/55bfd14cbb61ebbd3d8b464b/html5/thumbnails/5.jpg)
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)
![Page 6: TicTacToe by HTML5 Canvas](https://reader035.fdocuments.net/reader035/viewer/2022081205/55bfd14cbb61ebbd3d8b464b/html5/thumbnails/6.jpg)
HTML5 Canvas http://MobileDev.TW
3.如何判斷成功?� • 目前玩了幾格?�
• 誰目前可能已獲勝?�
• 獲勝有哪幾種可能性?�
• 每一格都玩了但是還是沒勝負?�
• 每一格都畫了並且沒勝負=>平手�
6