时间戳

首页 > 解决方案 > How can I build Tic Tac Toe game without using JavaScript?

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

问题描述

I was able to build the Tic Tac Toe game using JavaScript or Reactjs. It works well. But for now, I am trying to build it without using any JavaScript code. Can I build it just using CSS?

I tried to use CSS variables and selectors but no luck yet.

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

标签： css-selectorstic-tac-toe

解决方案

完全同意。您只能使用 CSS 构建井字游戏。在这种情况下，支持 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

推荐阅读