HTML 中的井字棋盘答案

【问题标题】：Tic Tac Toe board in HTMLHTML 中的井字棋盘
【发布时间】：2021-01-30 17:22:23
【问题描述】：

我想问一个相当简单的问题：如何使用 HTML5 和 CSS3 编写井字游戏？这是我运行的代码：

HTML

<!DOCTYPE html>
<html>
   <head> 
      <title> Tic Tac Toe</title>
      <link rel="stylesheet" type="text/css" href="Tic Tac Toe.css" media="screen"/>
      <script type="text/javascript" src="Tic Tac Toe.js"></script>
      <meta charset= "utf-8"> 
      <meta name="viewport" content="width=device-width">
   </head>
   <body> 
      <div id="square1"></div>
      <div id="square2"></div>
      <div id="square3"></div>
      <div id="square4"></div>
      <div id="square5"></div>
      <div id="square6"></div>
      <div id="square7"></div>
      <div id="square8"></div>
      <div id="square9"></div>
   </body>
</html>

CSS

#square1 {
    background-color: yellow;
    width: 50px;
    height: 50px;
    margin-left: 700px;
    position: static;
}

#square2 {
    background-color: grey;
    width: 50px;
    height: 50px;
    margin-left: 700px;
    position: static;
}

#square3 {
    background-color: yellow;
    width: 50px;
    height: 50px;
    margin-left: 700px;
    position: static;
}

#square4 {
    background-color: grey;
    width: 50px;
    height: 50px;
    margin-bottom: -40px;
    
}

#square5 {
    background-color: yellow;
    width: 50px;
    height: 50px;
}

#square6 {
    background-color: grey;
    width: 50px;
    height: 50px;
}

#square7 {
    background-color: yellow;
    width: 50px;
    height: 50px;
}

#square8 {
    background-color: grey;
    width: 50px;
    height: 50px;
}

#square9 {
    background-color: yellow;
    width: 50px;
    height: 50px;
}

有人可以告诉我如何处理这些 div，以便我可以将它们像板子一样分组吗？我试着画了 9 个方格，然后把它们组合成一个板子。但我不能，当我试图将一个 div 移到另一个附近时，它就会消失。我真的需要帮助:)))

另外，我注意到大多数人使用 JavaScript 编写代码。尝试用 CSS3 和 HTML 编写代码是否让我的生活变得更加困难？ :D

提前非常感谢！

【问题讨论】：

您在问几个问题。你能把它限制在一个特定的问题上吗？对于一个有效的井字游戏，您不仅需要棋盘的表示，还需要与它的交互。如果只是显示一个网格（没有任何内容），请说清楚。否则，这个问题可能过于宽泛，并且已经在此站点上找到了实现。
嗯，我还在学习基础知识，所以如果我有点含糊，我会努力恢复得更好。感谢您的反馈！

标签： javascript html css tic-tac-toe

【解决方案1】：

仅使用 HTML 和 CSS，您将只能创建一个静态井字游戏，如果您想将其变成一个实际的井字游戏，您需要使用 JavaScript 处理其背后的游戏逻辑。

假设从您的代码中我看到您仍在学习基础知识。如果您需要查找任何教程，请不要费神，但如果我可以给您一些建议，您可以继续学习更多有关 CSS Flexbox / Grid 的信息来处理您的布局问题。

祝你好运。

这里有一个很好的资源可以帮助您了解更多信息

【讨论】：

【解决方案2】：

您可以使用 CSS flexbox 样式将 9 个盒子排列成 3 行。要交替使用背景颜色，您可以使用 odd 和 even CSS 关键字。最好不要给每个框单独的id 属性。而是将这些框组合在一个容器元素中，您可以在其中控制 CSS 样式及其子元素。

我添加了一点 JavaScript，只是为了说明如何在 div 元素中放置 X 和 O 符号。仅此而已：

let game = document.getElementById("game");
let moveCount = 0;
game.addEventListener("click", function (e) {
    if (e.target.textContent) return; // is already occupied;
    e.target.textContent = "XO"[moveCount++ % 2];
});

#game {
    display: flex;
    flex-wrap: wrap; 
    width: 150px;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
}

#game div {
    width: 50px;
    height: 50px;
    display: inline-block;
}

#game div:nth-child(odd) {
    background-color: yellow;
}

#game div:nth-child(even) {
    background-color: grey;
}

<div id="game">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</div>

要添加游戏逻辑，例如检查是赢还是平，以及将“计算机”作为对手，请查看井字游戏中的其他一些问题，包括一个where I posted an answer。

【讨论】：

这真的很有帮助！非常感谢！
不客气。别忘了mark the answer as accepted。
您好，能否将答案标记为已接受？