效果：

Video_2021-02-08_211721.wmv (380.82KB)

样式：

  1. <h1>Tic Tac Toe</h1>
  3.     <div class="container">
  4.       <!-- 游戏面板（棋盘） -->
  5.       <div id="bord" class="game-board x">
  6.         <div class="row">
  7.           <div class="cell"></div>
  8.           <div class="cell"></div>
  9.           <div class="cell"></div>
  10.         </div>
  11.         <div class="row">
  12.           <div class="cell"></div>
  13.           <div class="cell"></div>
  14.           <div class="cell"></div>
  15.         </div>
  16.         <div class="row">
  17.           <div class="cell"></div>
  18.           <div class="cell"></div>
  19.           <div class="cell"></div>
  20.         </div>
  21.       </div>
  23.       <!-- 游戏获胜信息面板 -->
  24.       <div id="message" class="game-message">
  25.         <p id="winner">X 赢了！</p>
  26.         <button id="restart">重新开始</button>
  27.       </div>
  28.     </div>
  1. p {
  2.   margin: 0;
  3. }
  5. body {
  6.   background-color: #f9f2e7;
  7. }
  9. /* 标题 */
  10. h1 {
  11.   text-align: center;
  12.   font-size: 60px;
  13.   color: #477998;
  14. }
  16. /* 游戏内容容器 */
  17. .container {
  18.   position: relative;
  19.   width: 471px;
  20.   height: 471px;
  21.   margin: 0 auto;
  22. }
  24. /* 游戏获胜信息面板 */
  25. .game-message {
  26.   display: none;
  27.   position: absolute;
  28.   top: 0;
  29.   left: 0;
  30.   right: 0;
  31.   bottom: 0;
  32.   background-color: rgba(69, 133, 136, 0.4);
  33.   text-align: center;
  34. }
  36. /* winner 获胜者 */
  37. .game-message p {
  38.   margin: 180px 0 40px 0;
  39.   color: #fff;
  40.   font-size: 50px;
  41. }
  43. /* 重新开始游戏按钮 */
  44. .game-message button {
  45.   color: #517304;
  46.   border-color: #517304;
  47.   width: 110px;
  48.   height: 40px;
  49.   font-size: 20px;
  50.   cursor: pointer;
  51. }
  53. /* 游戏面板棋盘 */
  54. .game-board {
  55.   width: 471px;
  56.   height: 471px;
  57. }
  58. .game-board.x .cell:not(.x):not(.o):hover::before {
  59.   content: 'X';
  60.   color: lightgray;
  61. }
  62. .game-board.o .cell:not(.x):not(.o):hover::before {
  63.   content: 'O';
  64.   color: lightgray;
  65. }
  67. /* 棋盘 - 行 */
  68. .row {
  69.   display: flex;
  70. }
  71. .row:last-child .cell {
  72.   border-bottom: 0;
  73. }
  75. /* 棋盘 - 单元格 */
  76. .cell {
  77.   flex: 1;
  78.   box-sizing: border-box;
  79.   width: 157px;
  80.   height: 157px;
  81.   line-height: 157px;
  82.   border-right: 6px solid #546363;
  83.   border-bottom: 6px solid #546363;
  84.   text-align: center;
  85.   cursor: pointer;
  86.   font-size: 88px;
  87.   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
  88. }
  89. .cell:last-child {
  90.   border-right: 0;
  91. }
  93. /* x 玩家 */
  94. .cell.x::before {
  95.   content: 'X';
  96.   color: #01a8c6;
  97. }
  98. /* o 玩家 */
  99. .cell.o::before {
  100.   content: 'O';
  101.   color: #8fbe01;
  102. }

第一步 单元格点击

1、获取所有的单元格列表。
2、遍历单元格列表，给每一个单元格添加点击事件。
3、给当前被点击的单元格添加类名 x 或 o。

  1. var cells = document.getElementsByClassName("cell");
  2.         var arr = [...cells]
  3.         arr.forEach(item=>{
  4.           item.onclick = function(){
  5.             this.classList.add("x")
  6.             this.onclick = null;  //优化使点击事件只执行一次
  7.           }
  8.         })

第二步 切换玩家

1、创建一个存储当前玩家的变量（currentPlayer），默认值为：x。
2、将添加给单元格时写死的类名x，替换为变量（currentPlayer）的值。
3、切换到另一个玩家：在添加类名（下棋完成一步）后，根据当前玩家，得到另外一个玩家。
4、处理下一步提示：移除游戏面板中的x和o类名，添加下一个玩家对应的类名。

  1.         var gameBord = document.getElementById("bord");
  2.         var cells = document.getElementsByClassName("cell");
  3.         var arr = [...cells]
  4.         var currentPlayer = 'x'
  5.         arr.forEach(item=>{
  6.           item.onclick = function(){
  7.             this.classList.add(currentPlayer)
  8.             // 根据当前玩家，得到另外一个玩家
  9.             currentPlayer = currentPlayer == 'x' ? 'o' : 'x';
  10.             // 处理下一步提示
  11.             gameBord.classList.remove('x','o');
  12.             gameBord.classList.add(currentPlayer);
  13.             // 事件执行一次
  14.             this.onclick = null;
  15.           }
  16.         })

第三步 使用枚举修改当前玩家

1、创建字符串枚举（Player），提供X和O两个成员。
2、将成员X的值设置为：’x’（类名）；将成员O的值设置为：’o’（类名）。
3、将变量（currentPlayer）的类型设置为Player枚举类型，默认值为Player.X。
4、将所有用到x和o的地方全部使用枚举成员代替。

  1. ##  enum.ts
  2. enum Player {
  3.     X = 'x',
  4.     O = 'o'
  5. }
  1.             //枚举部分
  2.                 var Player;
  3.         (function (Player) {
  4.           Player["X"] = "x";
  5.           Player["O"] = "o";
  6.         })(Player || (Player = {}));
  8.         var gameBord = document.getElementById("bord");
  9.         var cells = document.getElementsByClassName("cell");
  10.         var arr = [...cells]
  11.         // 当前玩家
  12.         var currentPlayer = Player.X
  13.         arr.forEach(item=>{
  14.           item.onclick = function(){
  15.             this.classList.add(currentPlayer)
  16.             // 根据当前玩家，得到另外一个玩家
  17.             currentPlayer = currentPlayer == Player.X ? Player.O : Player.X;
  18.             // 处理下一步提示
  19.             gameBord.classList.remove(Player.X,Player.O);
  20.             gameBord.classList.add(currentPlayer);
  21.             // 事件执行一次
  22.             this.onclick = null;
  23.           }
  24.         })

第四步 实现判赢函数

1、使用some方法遍历数组，并将some方法的返回值作为判赢函数的返回结果。
2、在some方法的回调函数中，获取到每种获胜情况对应的3个单元格。
3、判断这3个单元格元素是否同时包含当前玩家的类名。
4、如果包含（玩家获胜），就在回调函数中返回true停止循环；否则，返回false，继续下一次循环。

  1.  var winArr = [
  2.           [0,1,2],[3,4,5],[6,7,8],  //横
  3.           [0,3,6],[1,4,7],[2,5,8],  //竖
  4.           [0,4,8],[2,4,6]           //斜
  5.         ]
  7.         var gameBord = document.getElementById("bord");
  8.         var cells = document.getElementsByClassName("cell");
  9.         var arr = [...cells]
  10.         // 当前玩家
  11.         var currentPlayer = 'x'
  12.         arr.forEach(item=>{
  13.           item.onclick = function(){
  14.             this.classList.add(currentPlayer)
  15.             // 调用判赢函数判断是否获胜
  16.             let isWin = checkWin(currentPlayer)
  17.             if(isWin){
  18.               console.log("当前玩家获胜了",currentPlayer)
  19.             }
  20.             // 根据当前玩家，得到另外一个玩家
  21.             currentPlayer = currentPlayer == 'x' ? 'o' : 'x';
  22.             // 处理下一步提示
  23.             gameBord.classList.remove('x','o');
  24.             gameBord.classList.add(currentPlayer);
  25.             // 事件执行一次
  26.             this.onclick = null;
  27.           }
  28.         })
  30.         // 封装判赢函数
  31.         function checkWin(player){
  32.           return winArr.some(item=>{
  33.             let cellIndex1 = item[0];
  34.             let cellIndex2 = item[1];
  35.             let cellIndex3 = item[2];
  37.             if(
  38.               hasClass(arr[cellIndex1],player) &&
  39.               hasClass(arr[cellIndex2],player) &&
  40.               hasClass(arr[cellIndex3],player)
  41.             ){
  42.               return true
  43.             }
  44.             return false
  45.           })
  46.         }
  48.         // 封装hasClass函数
  49.         function hasClass(el,name){
  50.           return el.classList.contains(name);
  51.         }

第五步 判断平局

1、创建变量（steps），默认值为0。
2、在玩家下棋后，让steps加1。
3、在判赢的代码后面，判断steps是否等于9。
4、如果等于9说明是平局，游戏结束，就直接return，不再执行后续代码。

  1. var winArr = [
  2.           [0,1,2],[3,4,5],[6,7,8],  //横
  3.           [0,3,6],[1,4,7],[2,5,8],  //竖
  4.           [0,4,8],[2,4,6]           //斜
  5.         ]
  7.         var gameBord = document.getElementById("bord");
  8.         var cells = document.getElementsByClassName("cell");
  9.         var arr = [...cells]
  10.         // 当前玩家
  11.         var currentPlayer = 'x';
  12.         // 记录已下棋的次数
  13.         var steps = 0;
  14.         arr.forEach(item=>{
  15.           item.onclick = function(){
  16.             this.classList.add(currentPlayer)
  17.             steps++;
  18.             // 调用判赢函数判断是否获胜
  19.             let isWin = checkWin(currentPlayer)
  20.             if(isWin){
  21.               console.log("当前玩家获胜了",currentPlayer)
  22.               return
  23.             }
  24.             // 判断平局
  25.             if(steps == 9){
  26.               return
  27.             }
  28.             // 根据当前玩家，得到另外一个玩家
  29.             currentPlayer = currentPlayer == 'x' ? 'o' : 'x';
  30.             // 处理下一步提示
  31.             gameBord.classList.remove('x','o');
  32.             gameBord.classList.add(currentPlayer);
  33.             // 事件执行一次
  34.             this.onclick = null;
  35.           }
  36.         })

第六步 展示获胜信息

1、获取到与获胜信息相关的两个DOM元素：1 #message 2 #winner。
2、显示获胜信息面板（通过style属性实现）。
3、展示获胜信息：如果获胜，展示“x赢了！”或“o赢了！”；如果是平局，展示“平局”。

  1. // 获胜信息面板
  2.         var message = document.getElementById("message");
  3.         // 获胜者
  4.         var winner = document.getElementById("winner");
  5.         // 当前玩家
  6.         var currentPlayer = 'x';
  7.         // 记录已下棋的次数
  8.         var steps = 0;
  9.         arr.forEach(item=>{
  10.           item.onclick = function(){
  11.             this.classList.add(currentPlayer)
  12.             steps++;
  13.             // 调用判赢函数判断是否获胜
  14.             let isWin = checkWin(currentPlayer)
  15.             if(isWin){
  16.               message.style.display = 'block';
  17.               winner.innerText = currentPlayer + ' 赢了！'
  18.               return
  19.             }
  20.             // 判断平局
  21.             if(steps == 9){
  22.               message.style.display = 'block';
  23.               winner.innerHTML = '平局'
  24.               return
  25.             }
  26.             // 根据当前玩家，得到另外一个玩家
  27.             currentPlayer = currentPlayer == 'x' ? 'o' : 'x';
  28.             // 处理下一步提示
  29.             gameBord.classList.remove('x','o');
  30.             gameBord.classList.add(currentPlayer);
  31.             // 事件执行一次
  32.             this.onclick = null;
  33.           }
  34.         })

第七步 重新游戏

1、获取到重新开始按钮（#restart），并绑定点击事件。
2、在点击事件中，重置游戏数据。
3、隐藏获胜信息、清空棋盘、移除单元格点击事件、重新给单元格绑定点击事件。
4、重置下棋次数、重置默认玩家为x、重置下棋提示为x。

  1. // 判赢数组
  2.         var winArr = [
  3.           [0,1,2],[3,4,5],[6,7,8],  //横
  4.           [0,3,6],[1,4,7],[2,5,8],  //竖
  5.           [0,4,8],[2,4,6]           //斜
  6.         ]
  8.         var gameBord = document.getElementById("bord");
  9.         var cells = document.getElementsByClassName("cell");
  10.         var arr = [...cells];
  11.         // 获胜信息面板
  12.         var message = document.getElementById("message");
  13.         // 获胜者
  14.         var winner = document.getElementById("winner");
  15.         // 重新开始按钮
  16.         var restart = document.getElementById("restart")
  17.         // 当前玩家
  18.         var currentPlayer = 'x';
  19.         // 记录已下棋的次数
  20.         var steps = 0;
  22.         restart.onclick = function(){
  23.           message.style.display = 'none';
  24.           steps = 0;
  25.           currentPlayer = 'x';
  26.           gameBord.classList.remove('x','o');
  27.           gameBord.classList.add('x');
  28.           arr.forEach(item=>{
  29.             item.classList.remove('x','o');
  30.             item.onclick = function(){};
  31.             clickCell(item);
  32.           })
  34.         }
  36.         arr.forEach(item=>{
  37.           clickCell(item);
  38.         })
  39.         function clickCell(item){
  40.           item.onclick = function(){
  41.             this.classList.add(currentPlayer)
  42.             steps++;
  43.             // 调用判赢函数判断是否获胜
  44.             let isWin = checkWin(currentPlayer)
  45.             if(isWin){
  46.               message.style.display = 'block';
  47.               winner.innerText = currentPlayer + ' 赢了！'
  48.               return
  49.             }
  50.             // 判断平局
  51.             if(steps == 9){
  52.               message.style.display = 'block';
  53.               winner.innerHTML = '平局'
  54.               return
  55.             }
  56.             // 根据当前玩家，得到另外一个玩家
  57.             currentPlayer = currentPlayer == 'x' ? 'o' : 'x';
  58.             // 处理下一步提示
  59.             gameBord.classList.remove('x','o');
  60.             gameBord.classList.add(currentPlayer);
  61.             // 事件执行一次
  62.             this.onclick = null;
  63.           }
  64.         }
  66.         // 封装判赢函数
  67.         function checkWin(player){
  68.           return winArr.some(item=>{
  69.             let cellIndex1 = item[0];
  70.             let cellIndex2 = item[1];
  71.             let cellIndex3 = item[2];
  73.             if(
  74.               hasClass(arr[cellIndex1],player) &&
  75.               hasClass(arr[cellIndex2],player) &&
  76.               hasClass(arr[cellIndex3],player)
  77.             ){
  78.               return true
  79.             }
  80.             return false
  81.           })
  82.         }
  84.         // 封装hasClass函数
  85.         function hasClass(el,name){
  86.           return el.classList.contains(name);
  87.         }