利用CSS創(chuàng)建遊戲，複選框和單選按鈕技巧可謂臭名昭著（或廣為人知）。但事實證明，其他基於用戶輸入的元素也可以被巧妙利用並用於遊戲化。開發(fā)者們已經(jīng)創(chuàng)造出許多非?？犰诺腃SS遊戲案例，這些案例分別基於:hover偽類，甚至還有基於:valid偽類的遊戲。

然而，我發(fā)現(xiàn):target偽類在這個CSS技巧領(lǐng)域似乎尚未得到充分探索。細想之下，這是一個被低估的強大CSS特性：:target允許我們根據(jù)選定的跳轉(zhuǎn)鏈接來設(shè)置任何元素的樣式，這意味著瀏覽器內(nèi)置了一個客戶端路由的簡易版本！讓我們化身瘋狂科學家，看看它能帶我們?nèi)ツ难e。

CSS中無敵的AI

是我把這些詞連在一起的嗎？我們要不要瘋狂地利用CSS，直到達到奇點？嘗試擊敗下面的樣式表中的井字棋遊戲，自己決定吧。

樣式表有時會允許遊戲以平局結(jié)束，所以你至少還有一線希望。

不用擔心！ CSS還沒有變成天網(wǎng)。像任何CSS技巧一樣，確定一個遊戲是否可以用CSS實現(xiàn)的經(jīng)驗法則是可能的遊戲狀態(tài)的數(shù)量。當我能夠創(chuàng)建一個4×4數(shù)獨求解器，卻發(fā)現(xiàn)9×9版本幾乎不可能實現(xiàn)時，我意識到了這一點。這是因為CSS技巧歸根結(jié)底是基於對用戶輸入做出響應(yīng)的選擇器來隱藏和顯示遊戲狀態(tài)。

如果X先走，井字棋有5478個可達到的合法狀態(tài)，並且有一個著名的算法可以計算任何合法狀態(tài)下的最佳移動。因此，我們可以完全用CSS來實現(xiàn)井字棋遊戲。

好吧，怎麼做？

從某種意義上說，我們根本沒有在破解CSS，而是在按照上帝的旨意使用CSS：隱藏、顯示和動畫化內(nèi)容。 “智能”在於HTML的生成方式。這就像一本“自己選擇冒險”的書，包含了井字棋多元宇宙中所有可能的狀態(tài)，空方格鏈接到計算機的最佳下一步移動。

我們使用在Ruby中實現(xiàn)的minimax算法的變體來生成它。你知道CodePen支持HAML（支持Ruby塊），我們可以秘密地將它用作Ruby遊樂場嗎？現(xiàn)在你知道啦。

我們的HAML生成的每個狀態(tài)在HTML中看起來像這樣：

<div>
  <svg><circle></circle></svg><a href="http://miracleart.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

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

  <a href="http://miracleart.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="http://miracleart.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="http://miracleart.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="http://miracleart.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

只需少量令人驚訝的簡單的CSS，我們就可以使用:target選擇器僅顯示當前選定的遊戲狀態(tài)。我們還將添加一個.c類到計算機的歷史移動中——這樣，我們只會在計算機的最新移動中觸發(fā)手寫動畫。這讓我們感覺我們只在一個棋盤上玩遊戲，而實際上，我們是在文檔的不同部分之間跳轉(zhuǎn)。

<div>
  <svg><circle></circle></svg><a href="http://miracleart.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

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

  <a href="http://miracleart.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="http://miracleart.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="http://miracleart.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="http://miracleart.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

當通過點擊空方格選擇跳轉(zhuǎn)鏈接時，:target偽類將顯示更新後的遊戲狀態(tài)（.s），樣式設(shè)置為計算機的預(yù)先計算的響應(yīng)以動畫方式出現(xiàn)（.c）。

請注意我們開始遊戲時的特殊情況：在用戶選擇任何跳轉(zhuǎn)鏈接之前，我們需要顯示初始的空網(wǎng)格。 開始時沒有用:target設(shè)置樣式的內(nèi)容，因此一旦選擇跳轉(zhuǎn)鏈接，我們就使用:body:has(:target) #---------選擇器隱藏初始狀態(tài)。類似地，如果您使用:target創(chuàng)建實驗，則需要在用戶開始與頁面交互之前呈現(xiàn)初始視圖。

總結(jié)

我不會深入探討為什麼我們要在CSS中實現(xiàn)這一點，而不是使用JavaScript的“更容易”的方法。這僅僅是推動CSS邊界的一種樂趣和教育方式。例如，我們可以使用經(jīng)典的複選框技巧來實現(xiàn)這一點——事實上，有人已經(jīng)做到了。

使用:target有什麼有趣之處嗎？我認為是的，因為：

• 我們可以保存CSS中的遊戲！ 隨時用你離開時的狀態(tài)書籤訪問URL並返回。
• 可以使用瀏覽器的“後退”和“前進”按鈕作為遊戲控件。 可以通過返回來撤消移動，或者通過前進重放移動。想像一下將:target與復(fù)選框技巧結(jié)合起來，按照《Braid》的傳統(tǒng)創(chuàng)建一個具有時間旅行機制的遊戲。
• 分享你的遊戲狀態(tài)。 這有可能獲得類似Wordle的炫耀權(quán)利。如果你設(shè)法在無敵的CSS井字棋算法中獲勝或打平，你可以通過分享URL向世界展示你的成就。
• 它是完全語義化的HTML。 複選框技巧要求你隱藏複選框或單選按鈕，因此在可訪問性方面它總是一種技巧和痛苦的討價還價。這種方法可以說是沒有技巧，因為我們只是在使用跳轉(zhuǎn)鏈接和div及其樣式。這甚至可能使它——我敢說——“更容易”提供更易於訪問的體驗。但這並不是說它開箱即用就易於訪問。

以上是與：目標的時代旅行CSS的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！