如何在不使用 JavaScript 的情况下构建 Tic Tac Toe 游戏？

Question

我能够使用 JavaScript 或 Reactjs 构建 Tic Tac Toe 游戏。它运作良好。但是现在，我正在尝试不使用任何 JavaScript 代码来构建它。我可以只使用 CSS 构建它吗？

我尝试使用 CSS 变量和选择器，但还没有成功。

@mixin winners($val) {
    //1st line
    #pos11-#{$val}:checked ~ #pos12-#{$val}:checked ~ #pos13-#{$val}:checked ~ #win-#{$val},
    //2nd line
    #pos21-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos23-#{$val}:checked ~ #win-#{$val},
    //3rd line
    #pos31-#{$val}:checked ~ #pos32-#{$val}:checked ~ #pos33-#{$val}:checked ~ #win-#{$val},
    //1st column
    #pos11-#{$val}:checked ~ #pos21-#{$val}:checked ~ #pos31-#{$val}:checked ~ #win-#{$val},
    //2nd column
    #pos12-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos32-#{$val}:checked ~ #win-#{$val},
    //3rd column
    #pos13-#{$val}:checked ~ #pos23-#{$val}:checked ~ #pos33-#{$val}:checked ~ #win-#{$val},
    //1st diagonal
    #pos11-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos33-#{$val}:checked ~ #win-#{$val},
    //2nd diagonal
    #pos13-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos31-#{$val}:checked ~ #win-#{$val} {
        display:block;
        & ~ #no-winner {
            display:none;
        }
    }
}

Answer 1

完全同意。您只能使用 CSS 构建 TicTacToe 游戏。在这种情况下，支持 vw 单位、css 计数器和 css 变量的现代浏览器才可以工作！

这是 html 代码：

<form>
  <div class="board-wrapper">
    <div class="board-outer">
      <div class="board">
        <div class="board-inner">
          <input type="radio" name="pos11" id="pos11-blue" class="blue" required>
          <input type="radio" name="pos11" id="pos11-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos12" id="pos12-blue" class="blue" required>
          <input type="radio" name="pos12" id="pos12-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos13" id="pos13-blue" class="blue" required>
          <input type="radio" name="pos13" id="pos13-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos21" id="pos21-blue" class="blue" required>
          <input type="radio" name="pos21" id="pos21-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos22" id="pos22-blue" class="blue" required>
          <input type="radio" name="pos22" id="pos22-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos23" id="pos23-blue" class="blue" required>
          <input type="radio" name="pos23" id="pos23-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos31" id="pos31-blue" class="blue" required>
          <input type="radio" name="pos31" id="pos31-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos32" id="pos32-blue" class="blue" required>
          <input type="radio" name="pos32" id="pos32-red" class="red" required>
          <div class="marque"></div>

          <input type="radio" name="pos33" id="pos33-blue" class="blue" required>
          <input type="radio" name="pos33" id="pos33-red" class="red" required>
          <div class="marque"></div>

          <div id="win-blue" class="win-message"><div class="wrapper">Blue wins!</div></div>
          <div id="win-red" class="win-message"><div class="wrapper">Red wins!</div></div>
          <div id="no-winner" class="win-message"><div class="wrapper">It's a draw!</div></div>
        </div>
      </div>
    </div>
  </div>
  <div class="actions">
    <button type="reset">Restart</button>
  </div>
</form>

我试着写 CSS here

如何在不使用 JavaScript 的情况下构建 Tic Tac Toe 游戏？

How can I build Tic Tac Toe game without using JavaScript?

css-selectors

tic-tac-toe