與：目標的時代旅行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中文網其他相關文章！