Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TicTacToe by HTML5 Canvas

1,173 views

Published on

http://MobileDev.TW

Published in: Technology
  • Be the first to comment

  • Be the first to like this

TicTacToe by HTML5 Canvas

  1. 1. HTML5 Canvas http://MobileDev.TW TicTacToe by Canvas Ryan@MobileDev.TW 1
  2. 2. HTML5 Canvas http://MobileDev.TW 佈局HTML,連接CSS與JS 2
  3. 3. HTML5 Canvas http://MobileDev.TW 全域變數 •  c:canvas •  cxt:canvas的2D繪製模式 •  currentPlayer:儲存目前玩家是誰 •  resultArray:遊戲結果儲存 3
  4. 4. HTML5 Canvas http://MobileDev.TW 初始化,開始監控點擊事件 4
  5. 5. HTML5 Canvas http://MobileDev.TW 用Canvas畫出棋盤 遊戲初始化時,清空一切資料,重新開始,然後畫上棋盤 5
  6. 6. HTML5 Canvas http://MobileDev.TW 用Canvas畫出棋盤 6
  7. 7. HTML5 Canvas http://MobileDev.TW 用Canvas畫出棋盤 7
  8. 8. HTML5 Canvas http://MobileDev.TW 處理滑鼠點擊事件 •  目前點到第幾格? 1.  加入Canvas觸控事件監控、取得座標 2.  將座標轉換為點到第幾格 •  畫X還是畫O? 1.  目前是第幾個使用者在操作? 2.  畫O、畫X的座標計算 •  已經畫過的地方不能再畫 1.  用什麼來儲存畫過的資料? 8
  9. 9. HTML5 Canvas http://MobileDev.TW 編號與座標的對應 9 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)
  10. 10. HTML5 Canvas http://MobileDev.TW 判斷玩家用滑鼠點擊到第幾格 10
  11. 11. HTML5 Canvas http://MobileDev.TW 再判斷玩家點的那一格有沒有被點過 11
  12. 12. HTML5 Canvas http://MobileDev.TW 現在輪到誰 如果確定沒人,開始決定玩家是誰 12
  13. 13. HTML5 Canvas http://MobileDev.TW 儲存這一格玩家是誰 1號玩家待會就畫O、2號玩家待會就畫X 13
  14. 14. HTML5 Canvas http://MobileDev.TW 1號玩家 14
  15. 15. HTML5 Canvas http://MobileDev.TW 2號玩家 15
  16. 16. HTML5 Canvas http://MobileDev.TW 如何判斷成功? •  目前玩了幾格? •  誰目前可能已獲勝? •  獲勝有哪幾種可能性? •  每一格都玩了但是還是沒勝負? •  每一格都畫了並且沒勝負=平手 16
  17. 17. HTML5 Canvas http://MobileDev.TW 目前玩了幾格 17
  18. 18. HTML5 Canvas http://MobileDev.TW 判斷是否成功 如果吻合八種成功狀況的其中一種,並且連線的格式 裡面儲存的不是0而是玩家1或玩家2,則宣告該玩家 獲勝,並且呼叫初始化方法,遊戲重新開始 請自行完成這項練習 18
  19. 19. HTML5 Canvas http://MobileDev.TW 平手的狀況 若已經第九次(填滿了所有格子還未分勝負),宣布 平手,並且呼叫初始化方法,遊戲重新開始 請自行完成這項練習 19

×