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

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

CSS中無敵的AI

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

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

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

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

好吧，怎麼做？

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

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

我們的HAML生成的每個(gè)狀態(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選擇器僅顯示當(dāng)前選定的遊戲狀態(tài)。我們還將添加一個(gè).c類到計(jì)算機(jī)的歷史移動(dòng)中——這樣，我們只會(huì)在計(jì)算機(jī)的最新移動(dòng)中觸發(fā)手寫動(dòng)畫。這讓我們感覺我們只在一個(gè)棋盤上玩遊戲，而實(shí)際上，我們是在文檔的不同部分之間跳轉(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>

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

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

總結(jié)

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

使用:target有什麼有趣之處嗎？我認(rèn)為是的，因?yàn)椋?/p>

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

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