怎样用CSS3编辑一个井字棋游戏？

发布时间：2022-04-18 13:33:07 所属栏目：语言来源：互联网

导读：如何用CSS3写一个游戏？井字棋游戏想必大家都有玩过，规则就是谁最先三个格子连成一条直线，谁就获胜。很多好奇CSS3要如何实现井字棋游戏，下面就小编就给大家分享一个纯CSS3实现的井字棋游戏实例。感兴趣的朋友可以看一下。运行效果： html div class=tic-

如何用CSS3写一个游戏？井字棋游戏想必大家都有玩过，规则就是谁最先三个格子连成一条直线，谁就获胜。很多好奇CSS3要如何实现井字棋游戏，下面就小编就给大家分享一个纯CSS3实现的井字棋游戏实例。感兴趣的朋友可以看一下。

       运行效果：

       html

<div class="tic-tac-toe">
  <input class="player-1 left first-column top first-row first-diagonal turn-1" id="block1-1-1" type="radio"/>
  <label class="turn-1" for="block1-1-1"></label>
  <input class="player-1 middle second-column top first-row turn-1" id="block1-1-2" type="radio"/>
  <label class="turn-1" for="block1-1-2"></label>
  <input class="player-1 right third-column top first-row second-diagonal turn-1" id="block1-1-3" type="radio"/>
  <label class="turn-1" for="block1-1-3"></label>
  <input class="player-1 left first-column center second-row turn-1" id="block1-2-1" type="radio"/>
  <label class="turn-1" for="block1-2-1"></label>
  <input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-1" id="block1-2-2" type="radio"/>
  <label class="turn-1" for="block1-2-2"></label>
  <input class="player-1 right third-column center second-row turn-1" id="block1-2-3" type="radio"/>
  <label class="turn-1" for="block1-2-3"></label>
  <input class="player-1 left first-column bottom third-row second-diagonal turn-1" id="block1-3-1" type="radio"/>
  <label class="turn-1" for="block1-3-1"></label>
  <input class="player-1 middle second-column bottom third-row turn-1" id="block1-3-2" type="radio"/>
  <label class="turn-1" for="block1-3-2"></label>
  <input class="player-1 right third-column bottom third-row first-diagonal turn-1" id="block1-3-3" type="radio"/>
  <label class="turn-1" for="block1-3-3"></label>
  <input class="player-2 left first-column top first-row first-diagonal turn-2" id="block2-1-1" type="radio"/>
  <label class="turn-2" for="block2-1-1"></label>
  <input class="player-2 middle second-column top first-row turn-2" id="block2-1-2" type="radio"/>
  <label class="turn-2" for="block2-1-2"></label>
  <input class="player-2 right third-column top first-row second-diagonal turn-2" id="block2-1-3" type="radio"/>
  <label class="turn-2" for="block2-1-3"></label>
  <input class="player-2 left first-column center second-row turn-2" id="block2-2-1" type="radio"/>
  <label class="turn-2" for="block2-2-1"></label>
  <input class="player-2 middle second-column center second-row first-diagonal second-diagonal turn-2" id="block2-2-2" type="radio"/>
  <label class="turn-2" for="block2-2-2"></label>
  <input class="player-2 right third-column center second-row turn-2" id="block2-2-3" type="radio"/>
  <label class="turn-2" for="block2-2-3"></label>
  <input class="player-2 left first-column bottom third-row second-diagonal turn-2" id="block2-3-1" type="radio"/>
  <label class="turn-2" for="block2-3-1"></label>
  <input class="player-2 middle second-column bottom third-row turn-2" id="block2-3-2" type="radio"/>
  <label class="turn-2" for="block2-3-2"></label>
  <input class="player-2 right third-column bottom third-row first-diagonal turn-2" id="block2-3-3" type="radio"/>
  <label class="turn-2" for="block2-3-3"></label>
  <input class="player-1 left first-column top first-row first-diagonal turn-3" id="block3-1-1" type="radio"/>
  <label class="turn-3" for="block3-1-1"></label>
  <input class="player-1 middle second-column top first-row turn-3" id="block3-1-2" type="radio"/>
  <label class="turn-3" for="block3-1-2"></label>
  <input class="player-1 right third-column top first-row second-diagonal turn-3" id="block3-1-3" type="radio"/>
  <label class="turn-3" for="block3-1-3"></label>
  <input class="player-1 left first-column center second-row turn-3" id="block3-2-1" type="radio"/>
  <label class="turn-3" for="block3-2-1"></label>
  <input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-3" id="block3-2-2" type="radio"/>
  <label class="turn-3" for="block3-2-2"></label>
  <input class="player-1 right third-column center second-row turn-3" id="block3-2-3" type="radio"/>
  <label class="turn-3" for="block3-2-3"></label>
  <input class="player-1 left first-column bottom third-row second-diagonal turn-3" id="block3-3-1" type="radio"/>
  <label class="turn-3" for="block3-3-1"></label>
  <input class="player-1 middle second-column bottom third-row turn-3" id="block3-3-2" type="radio"/>
  <label class="turn-3" for="block3-3-2"></label>
  <input class="player-1 right third-column bottom third-row first-diagonal turn-3" id="block3-3-3" type="radio"/>
  <label class="turn-3" for="block3-3-3"></label>
  <input class="player-2 left first-column top first-row first-diagonal turn-4" id="block4-1-1" type="radio"/>
  <label class="turn-4" for="block4-1-1"></label>
  <input class="player-2 middle second-column top first-row turn-4" id="block4-1-2" type="radio"/>

  <input class="player-1 right third-column center second-row turn-5" id="block5-2-3" type="radio"/>
  <label class="turn-5" for="block5-2-3"></label>
  <input class="player-1 left first-column bottom third-row second-diagonal turn-5" id="block5-3-1" type="radio"/>
  <label class="turn-5" for="block5-3-1"></label>
  <input class="player-1 middle second-column bottom third-row turn-5" id="block5-3-2" type="radio"/>
  <label class="turn-5" for="block5-3-2"></label>

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Spring MVC和Struts2的	C++ partition 和stab
C++ STL map容器解说	C++ STL map容器迭代器