Javascript HTML中的Tic-Tac趾板_Javascript_Html_Css_Tic Tac Toe

Javascript HTML中的Tic-Tac趾板

javascript html css

Javascript HTML中的Tic-Tac趾板,javascript,html,css,tic-tac-toe,Javascript,Html,Css,Tic Tac Toe,我想问一个相当简单的问题：如何使用HTML5和CSS3编写Tic Tac Toe表格？以下是我运行的代码： HTML 有人能告诉我怎么处理这些div吗，这样我就可以把它们像一块板一样分组了？我试着画9个正方形，然后把它们组合成一块木板。但我不能，当我试图把一个div移到另一个div附近时，它就消失了。我真的需要帮忙：））另外，我注意到大多数人都是用JavaScript编写的。用CSS3和HTML编码是否让我的生活变得更加艰难D 提前多谢仅使用HTML和CSS，您将只能创建静态tic-tac-

我想问一个相当简单的问题：如何使用HTML5和CSS3编写Tic Tac Toe表格？以下是我运行的代码：

HTML

有人能告诉我怎么处理这些div吗，这样我就可以把它们像一块板一样分组了？我试着画9个正方形，然后把它们组合成一块木板。但我不能，当我试图把一个div移到另一个div附近时，它就消失了。我真的需要帮忙：））

另外，我注意到大多数人都是用JavaScript编写的。用CSS3和HTML编码是否让我的生活变得更加艰难D

提前多谢

仅使用HTML和CSS，您将只能创建静态tic-tac-toe board，如果您想将其制作成实际的tic-tac-toe游戏，您需要使用JavaScript来处理其背后的游戏逻辑

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

祝你好运

这里有一个很好的资源来帮助你了解更多

您可以使用CSS flexbox样式将9个框排列成3行。要交替使用背景色，可以使用

奇数

和

偶数

CSS关键字。最好不要给每个框指定单独的

id

属性。而是将这些框分组到容器元素中，从中可以控制CSS样式，也可以控制其子元素的样式

我添加了一点JavaScript，只是为了说明如何在那些

div

元素中放置X和O符号。但仅此而已：

let game=document.getElementById（“游戏”）；
让moveCount=0；
game.addEventListener（“点击”，函数（e）{
如果（e.target.textContent）return；//已被占用；
e、 target.textContent=“XO”[moveCount++%2]；
});
#游戏{
显示器：flex；
柔性包装：包装；
宽度：150px；
字体大小：20px；
文本对齐：居中；
线高：50px；
}
#游戏部{
宽度：50px；
高度：50px；
显示：内联块；
}
#游戏组：第n个孩子（单数）{
背景颜色：黄色；
}
#游戏分区：第n个孩子（偶数）{
背景颜色：灰色；
}

您提出了几个问题。你能把它限制在一个特定的问题吗？对于正在运行的井字游戏，您不仅需要棋盘的表示，还需要与棋盘的交互。如果只是关于显示网格（没有任何内容），请说明这一点。否则，这个问题可能太宽泛了，而且这个网站上已经有了实现。好吧，我还在学习基础知识，所以如果我有点含糊不清，我会努力做得更好。谢谢你的反馈！这真的很有帮助！非常感谢！不客气。别忘了。您好，请您将答案标记为已接受好吗？
<!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>

#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;
}