与：目标的时代旅行CSS

利用CSS创建游戏，复选框和单选按钮技巧可谓臭名昭著（或广为人知）。但事实证明，其他基于用户输入的元素也可以被巧妙利用并用于游戏化。开发者们已经创造出许多非常酷炫的CSS游戏案例，这些案例分别基于:hover伪类，甚至还有基于:valid伪类的游戏。

然而，我发现:target伪类在这个CSS技巧领域似乎尚未得到充分探索。细想之下，这是一个被低估的强大CSS特性：:target允许我们根据选定的跳转链接来设置任何元素的样式，这意味着浏览器内置了一个客户端路由的简易版本！让我们化身疯狂科学家，看看它能带我们去哪里。

CSS中无敌的AI

是我把这些词连在一起的吗？我们要不要疯狂地利用CSS，直到达到奇点？尝试击败下面的样式表中的井字棋游戏，自己决定吧。

样式表有时会允许游戏以平局结束，所以你至少还有一线希望。

不用担心！CSS还没有变成天网。像任何CSS技巧一样，确定一个游戏是否可以用CSS实现的经验法则是可能的游戏状态的数量。当我能够创建一个4×4数独求解器，却发现9×9版本几乎不可能实现时，我意识到了这一点。这是因为CSS技巧归根结底是基于对用户输入做出响应的选择器来隐藏和显示游戏状态。

如果X先走，井字棋有5478个可达到的合法状态，并且有一个著名的算法可以计算任何合法状态下的最佳移动。因此，我们可以完全用CSS来实现井字棋游戏。

好吧，怎么做？

从某种意义上说，我们根本没有在破解CSS，而是在按照上帝的旨意使用CSS：隐藏、显示和动画化内容。“智能”在于HTML的生成方式。这就像一本“自己选择冒险”的书，包含了井字棋多元宇宙中所有可能的状态，空方格链接到计算机的最佳下一步移动。

我们使用在Ruby中实现的minimax算法的变体来生成它。你知道CodePen支持HAML（支持Ruby块），我们可以秘密地将它用作Ruby游乐场吗？现在你知道啦。

我们的HAML生成的每个状态在HTML中看起来像这样：

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

  <svg><circle></circle></svg><svg><circle></circle></svg><div></div>

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

只需少量令人惊讶的简单的CSS，我们就可以使用:target选择器仅显示当前选定的游戏状态。我们还将添加一个.c类到计算机的历史移动中——这样，我们只会在计算机的最新移动中触发手写动画。这让我们感觉我们只在一个棋盘上玩游戏，而实际上，我们是在文档的不同部分之间跳转。

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

  <svg><circle></circle></svg><svg><circle></circle></svg><div></div>

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

当通过点击空方格选择跳转链接时，:target伪类将显示更新后的游戏状态（.s），样式设置为计算机的预先计算的响应以动画方式出现（.c）。

请注意我们开始游戏时的特殊情况：在用户选择任何跳转链接之前，我们需要显示初始的空网格。开始时没有用:target设置样式的内容，因此一旦选择跳转链接，我们就使用:body:has(:target) #---------选择器隐藏初始状态。类似地，如果您使用:target创建实验，则需要在用户开始与页面交互之前呈现初始视图。

总结

我不会深入探讨为什么我们要在CSS中实现这一点，而不是使用JavaScript的“更容易”的方法。这仅仅是推动CSS边界的一种乐趣和教育方式。例如，我们可以使用经典的复选框技巧来实现这一点——事实上，有人已经做到了。

使用:target有什么有趣之处吗？我认为是的，因为：

• 我们可以保存CSS中的游戏！ 随时用你离开时的状态书签访问URL并返回。
• 可以使用浏览器的“后退”和“前进”按钮作为游戏控件。可以通过返回来撤消移动，或者通过前进重放移动。想象一下将:target与复选框技巧结合起来，按照《Braid》的传统创建一个具有时间旅行机制的游戏。
• 分享你的游戏状态。 这有可能获得类似Wordle的炫耀权利。如果你设法在无敌的CSS井字棋算法中获胜或打平，你可以通过分享URL向世界展示你的成就。
• 它是完全语义化的HTML。 复选框技巧要求你隐藏复选框或单选按钮，因此在可访问性方面它总是一种技巧和痛苦的讨价还价。这种方法可以说是没有技巧，因为我们只是在使用跳转链接和div及其样式。这甚至可能使它——我敢说——“更容易”提供更易于访问的体验。但这并不是说它开箱即用就易于访问。

以上是与：目标的时代旅行CSS的详细内容。更多信息请关注PHP中文网其他相关文章！