摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對(duì)決這是一篇非常有趣的文章，作者詳細(xì)講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關(guān)鍵思想。

序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對(duì)決！這是一篇非常有趣的文章，作者詳細(xì)講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。因?yàn)榘咐旧肀容^復(fù)雜，而本人水平有限，翻譯必有不恰當(dāng)之處，歡迎留言評(píng)論。

實(shí)驗(yàn)是學(xué)習(xí)新技巧、思考新想法、并突破自身極限的有趣的方式?！凹?CSS”演示很早就有了，但是隨著瀏覽器和CSS的發(fā)展，新的挑戰(zhàn)又出現(xiàn)了。CSS 和 HTML 預(yù)處理器也促進(jìn)了純 CSS 演示的發(fā)展。有時(shí)候，預(yù)處理程序用于每個(gè)可能的硬編碼場(chǎng)景，比如 :checked 的長(zhǎng)字符串和相鄰兄弟選擇器。

在本文中，我將介紹使用純 CSS 制作的四子連珠游戲的關(guān)鍵思想。在我的實(shí)驗(yàn)中，我盡量避免硬編碼，并且不使用預(yù)處理器，專注于保持代碼的簡(jiǎn)潔。以下是游戲的所有代碼以及演示：

See the Pen Pure CSS Connect 4 by Bence Szabó (@finnhvman) on CodePen.

我認(rèn)為在“純 CSS”類型中有一些概念是必不可少的。通常，表單元素用于管理狀態(tài)和捕獲用戶操作。當(dāng)我發(fā)現(xiàn)有人使用 重置或者重新開始新游戲時(shí)，我非常興奮。只需要將元素包裹在

標(biāo)簽中并添加按鈕。在我看來，這是一個(gè)比刷新頁面更方便的解決方案。

第一步就是創(chuàng)建表單元素，再在表單中創(chuàng)建一些用作圓孔（the slots）的 input，然后添加重置按鈕。以下是使用

的基本演示：

See the Pen Pure HTML Form Reset by Bence Szabó (@finnhvman) on CodePen.

為了讓演示好看一些，我使用 radial-gradient()，而不是在游戲板（the board）或者圓盤（the discs）上貼一張圖片。我經(jīng)常使用 Lea Verou 制作的 CSS3 圖案庫。它是使用漸變制作的圖案集，而且很容易編輯。我使用了currentcolor，非常適合圓盤的圖案。我添加了頭部，并且復(fù)用了自己制作的純 CSS 波紋按鈕。

現(xiàn)在，布局和圓盤已經(jīng)設(shè)計(jì)好了，只是還不能游戲

把圓盤放到游戲板上

接下來，需要讓用戶輪流將圓盤放到四子連珠的游戲板上。在四子連珠游戲中，玩家（一個(gè)紅色，一個(gè)黃色）輪流將圓盤放置在面板的列中。游戲板有 7 列 6 行（一共有 42 個(gè)圓孔）。每一個(gè)圓孔可以為空或者被一個(gè)紅色或黃色的圓盤占用。所以，一個(gè)圓孔可以有三種狀態(tài)（空、紅色或者黃色）。在同一列中掉落的圓盤會(huì)堆疊在一起。

首先我為每個(gè)圓孔放置了兩個(gè) checkbox 。當(dāng)它們都沒有被選中時(shí)，圓孔就被認(rèn)為是空的，當(dāng)其中一個(gè)被選中時(shí)，相應(yīng)的玩家就會(huì)把他的圓盤放進(jìn)去。

當(dāng)其中任何一個(gè)被選中之后，應(yīng)該把它隱藏起來，避免出現(xiàn)兩者都被選中的狀態(tài)。這些 checkbox 是直接的兄弟類，所以如果選中第一個(gè)之后，可以使用 :checked 偽類和相鄰兄弟選擇器(+)來隱藏兩個(gè)元素。但是如果選中第二個(gè)呢？你可以隱藏第二個(gè)，但是怎么才能影響第一個(gè)呢？可惜沒有選擇前一個(gè)的兄弟選擇器，這不是 CSS 選擇器的工作方式。我不得不拒絕這個(gè)想法。

實(shí)際上，一個(gè) checkbox 本身可以有三個(gè)狀態(tài)，可以使用 indeterminate 狀態(tài)。問題是，僅僅使用 HTML 不能將其置于不確定狀態(tài)。即使可以，當(dāng)再次點(diǎn)擊復(fù)選框時(shí)，它也會(huì)轉(zhuǎn)換成選中狀態(tài)。強(qiáng)迫第二個(gè)玩家在移動(dòng)圓盤時(shí)進(jìn)行雙擊是不現(xiàn)實(shí)的。

我仔細(xì)閱讀了 MDN 上關(guān)于 :indeterminate 的文檔后發(fā)現(xiàn) radio input 通用都有 indeterminate 狀態(tài)。名稱相同的 radio 按鈕在未選中時(shí)都處于這種狀態(tài)。哇，這是一個(gè)真正的初始狀態(tài)！真正有用的是，選中后一個(gè)同胞元素也會(huì)對(duì)前者產(chǎn)生影響！于是我在游戲板上放置了 42 對(duì) radio input。

從以往的經(jīng)歷來看，使用 label ，并通過合理的順序搭配 checkbox 或 radio 可以解決問題，但我認(rèn)為 label 不能使代碼更簡(jiǎn)潔。

為了獲得更好的用戶體驗(yàn)，我希望交互區(qū)域可以更大一些，所以合理的做法是讓玩家點(diǎn)擊一個(gè)列來移動(dòng)圓盤。通過在合適的元素上添加絕對(duì)和相對(duì)位置，我將同一列的控件相互疊加。這樣，在每一列中只能選擇最下面的圓孔。我仔細(xì)地設(shè)置了每一行的圓盤下降的時(shí)間，它們的時(shí)間函數(shù)近似于一個(gè)二次曲線，與現(xiàn)實(shí)中的自由落體相似。到目前為止，游戲的各部分都做好了，但是下圖清晰地顯示出只有紅色的玩家才能操作。

盡管已經(jīng)設(shè)置了所有的控件，但只有紅色的圓盤可以落在游戲板上

我用彩色且半透明的矩形對(duì) Radio input 的可點(diǎn)擊區(qū)域用進(jìn)行了可視化顯示。黃色和紅色的 input 在每列上重疊 6 次(= 6 行)，將最下面一行的紅色的 input 放在頂部。紅色和黃色的混合形成了橙黃色，可以在游戲板上看到。每一列中可用的圓孔越少，這種橙黃色就越不強(qiáng)烈，因?yàn)?radio input 只有在 :indeterminate 狀態(tài)時(shí)才會(huì)顯示。由于在每個(gè)圓孔上，紅色 input 總是蓋住黃色 input，所以只有紅色的玩家能夠移動(dòng)。

輪流游戲

我只有一個(gè)模糊的想法，就是能不能使用普通的兄弟選擇器解決玩家輪流游戲的問題。這個(gè)想法就是統(tǒng)計(jì)選中的 input 的數(shù)量，為偶數(shù)（0、2、4等）時(shí)紅色玩家移動(dòng)，為奇數(shù)時(shí)黃色玩家移動(dòng)。很快我就意識(shí)到一般的兄弟選擇器不能（也不應(yīng)該?。┌凑瘴蚁胍姆绞焦ぷ?。

還有一種方式就是使用 nth 選擇器。盡管我喜歡使用even和odd這樣的關(guān)鍵詞，但我還是走進(jìn)了死胡同。:nth-child 選擇器 “統(tǒng)計(jì)”父類中的子元素，包括所有類型，類、偽類等等。:nth-of-type 選擇器 “統(tǒng)計(jì)”在父類中某類型的子類，不包括類或偽類。所以問題就在于無法通過 :checked 狀態(tài)去統(tǒng)計(jì)。

CSS counters 也可以統(tǒng)計(jì)，所以為什么不試試呢？計(jì)數(shù)器的一個(gè)常見用法是在文檔中對(duì)標(biāo)題（甚至多個(gè)級(jí)別）進(jìn)行編號(hào)。它們由 CSS 規(guī)則控制，可以在任何時(shí)候被重置，其增加（或遞減?。┲悼梢允侨我庹麛?shù)。計(jì)數(shù)器“counter()”函數(shù)顯示在 content 屬性中。

所以最簡(jiǎn)單的方法就是設(shè)置計(jì)數(shù)器，然后統(tǒng)計(jì)四子連珠游戲中 :checked 的 input 的數(shù)量。這種方法只有兩個(gè)困難。首先，你不能在一個(gè)計(jì)數(shù)器上執(zhí)行算術(shù)運(yùn)算來檢測(cè)它是偶數(shù)還是奇數(shù)。其次，你不能基于計(jì)數(shù)器的值在元素上應(yīng)用 CSS 規(guī)則。

我使用二進(jìn)制解決了第一個(gè)問題。計(jì)數(shù)器的初始值設(shè)為 0 。當(dāng)紅色玩家選中 radio 按鈕時(shí)，計(jì)數(shù)器加 1。當(dāng)黃色玩家選中 radio 按鈕時(shí)，計(jì)數(shù)器就減 1，以此類推。因此，計(jì)數(shù)器的值始終是 0 或 1，偶數(shù)或奇數(shù)。

解決第二個(gè)問題需要更多的創(chuàng)造力（read: hack）。如上所述，計(jì)數(shù)器只能顯示在 ::before 和 ::after 偽元素中。這是顯而易見的，但它們?nèi)绾斡绊懫渌啬兀恐辽儆?jì)數(shù)器值可以改變偽元素的寬度。不同的數(shù)有不同的寬度。字符 1 通常比 0 纖細(xì)，但這是很難控制的。如果改變的是字符的數(shù)量，而不是字符本身，那么由此產(chǎn)生的寬度變化就是可控的。在 CSS 計(jì)數(shù)器中使用羅馬數(shù)字并不少見。用羅馬數(shù)字表示的 1 和 2 與字符 1 和 2 是相同的，它們的像素寬度也是相同的。

我的想法是將一個(gè)玩家（黃色）的單選按鈕貼著左邊放置，并將另一個(gè)玩家（紅色）的單選按鈕貼著共享父容器的右邊放置。最初，紅色的按鈕被覆蓋在黃色的按鈕上，然后容器的寬度變化會(huì)導(dǎo)致紅色的按鈕“消失”，顯示黃色的按鈕。可以將其比作現(xiàn)實(shí)中有兩個(gè)窗格的滑動(dòng)窗口，一個(gè)窗格是固定的（黃色按鈕），另一個(gè)是可滑動(dòng)的（紅色按鈕）。區(qū)別在于，在游戲中只有一半的窗口是可見的。

到目前為止，還不錯(cuò)，但我并不滿意使用 font-size （以及其他 font 屬性）間接控制寬度。更好的方式是使用 letter-spacing，因?yàn)樗辉谝粋€(gè)維度上改變了大小。出乎意料的是，即使是一個(gè)字母也有字母間距（在字母后面呈現(xiàn)），兩個(gè)字母就有兩個(gè)字母間距。可靠性的關(guān)鍵就是保證寬度是可預(yù)知的。寬度為 0 的字符加上單字母和雙字母間距都可以，但是將 font-size 設(shè)置為 0 是存在風(fēng)險(xiǎn)的。為了兼容所有瀏覽器，可以將 letter-spacing （以像素為單位）設(shè)置的大一些并且將 font-size 設(shè)置的小一點(diǎn)（1px），是的，我說的是子像素。

我需要容器的寬度在初始大小(=w)與至少兩倍以上大小(>=2w)之間交替變換，以便能夠完全隱藏和顯示黃色按鈕。假設(shè) v 是 "i" 字符的渲染寬度（小寫羅馬字母表示，在不同的瀏覽器中不同），c 是 letter-spacing 的渲染寬度（常量）。我需要 v + c = w 為真，但這是不可能的，因?yàn)?c 和 w 是整數(shù)，而 v 是非整數(shù)。最后我使用了 min-width 和 max-width 屬性來約束可能的寬度值，因此我還將可能的計(jì)數(shù)器值更改為 "i" 和 "iii" ，以確保文本在流下變寬并溢出約束。通過方程 v + c < w， 3v + 3c > 2w,，v << c，可以得到2/3w < c < w。結(jié)論就是“字母間距”必須比初始寬度小一些。

我一直以為偽元素顯示的計(jì)數(shù)值是 radio 按鈕的父元素，可惜不是。但是，我注意到偽元素的寬度改變了其父元素的寬度，在本例中父元素是 radio 按鈕的容器。

如果你在想，難道不能用阿拉伯?dāng)?shù)字來解決嗎？你說得對(duì)，計(jì)數(shù)器的值在 "1" 和 "111" 之間交替變換也是可以的。盡管如此，羅馬數(shù)字最先給了我啟示，它們也是點(diǎn)擊器標(biāo)題的不錯(cuò)的方式，所以我保留了它們。

從紅色玩家開始，然后輪流游戲

應(yīng)用所討論的技術(shù)使 radio input 的父容器在選中紅色 input 時(shí)寬度加倍，在選中黃色 input 寬度變?yōu)樵瓉淼膶挾?。在原始寬度的容器中，紅色 input 位于黃色 input 之上，而在雙寬度容器中，紅色 input 被移開。

識(shí)別模式

在現(xiàn)實(shí)生活中，四子連珠游戲并不會(huì)告訴你是贏了還是輸了，但是提供適當(dāng)?shù)姆答伿侨魏诬浖己糜脩趔w驗(yàn)的一部分。下一個(gè)目標(biāo)是檢測(cè)玩家是否贏得了游戲。要想贏得比賽，玩家必須在一列、一行或?qū)蔷€上放四個(gè)圓盤。在許多編程語言中，這是一個(gè)非常簡(jiǎn)單的任務(wù)，但是在純 CSS 世界中，這是一個(gè)巨大的挑戰(zhàn)。將它分解成子任務(wù)是系統(tǒng)地處理這個(gè)問題的方法。

我使用一個(gè) flex 容器作為 radio 按鈕和圓盤的父類。一個(gè)黃色的 radio 按鈕、一個(gè)紅色的 radio 按鈕和一個(gè)代表圓盤并與圓孔重疊的 div 。這樣的圓孔重復(fù)了42 次，并排列成多列。因此，列中的圓孔是相鄰的，這使得使用相鄰選擇器識(shí)別列中的四個(gè)是最容易的:

  
  
  

  
  
  

  ...
  
  
  


  
  
  

  ...

/* Red four in a column selector */
input:checked + .disc + input + input:checked + .disc + input + input:checked + .disc + input + input:checked ~ .outcome

/* Yellow four in a column selector */
input:checked + input + .disc + input:checked + input + .disc + input:checked + input + .disc + input:checked ~ .outcome

這是一個(gè)簡(jiǎn)單但丑陋的解決方案。為了檢測(cè)一列中四子相連的情況，每個(gè)玩家都有 11 個(gè)類型和類選擇符鏈接在一起。在圓孔元素后面添加一個(gè)類名為 .outcome 的 div 可以展示輸出的信息。在被列包裹的一列中，檢測(cè)四子相連存在問題，但是我們先把這個(gè)問題放到一邊。

如果采用類似的方法判斷一行中是否有四子相連，那將是一個(gè)可怕的想法。每個(gè)玩家將會(huì)有 56 個(gè)選擇器（如果我算對(duì)了的話），更不用說他們會(huì)有類似的檢測(cè)錯(cuò)誤的情況。在將來，[:nth-child(An+B [of S])](https://drafts.csswg.org/sele... 或者 column combinators 會(huì)派得上用場(chǎng).

為了更好的語義化，可以為每個(gè)列添加一個(gè)新的 div，并在其中排列圓孔元素。這一修改也將消除上述檢測(cè)錯(cuò)誤的情況。然后，檢測(cè)一行中的有四子相連可以用以下方法：選擇第一個(gè)紅色 radio input 被選中的一個(gè)列，然后再選擇第一個(gè)紅色 radio input 被選中的相鄰?fù)?，重?fù)兩次。這聽起來很麻煩，需要"parent"選擇器。

選擇父節(jié)點(diǎn)是不可行的，但是選擇子節(jié)點(diǎn)是可行的。如何用選擇器及其組合方式檢測(cè)一行中的四子相連？ 選擇一個(gè)列，再選擇它的第一個(gè)被選中的紅色 radio input，然后選擇相鄰的列，再選擇它的第一個(gè)被選中的紅色 radio input ，以此類推，再重復(fù)兩次。這聽起來仍然很麻煩，但卻是可行的。訣竅不僅在 CSS 中，而且在 HTML 中，下一列必須是上一列中創(chuàng)建嵌套結(jié)構(gòu)的單選按鈕的同胞元素。

  
  
  

  ...
  
  
  


  

    
    
    

    ...
    
    
    


    

      ...
    
  

/* Red four in a row selectors */
input:nth-of-type(2):checked ~ .column > input:nth-of-type(2):checked ~ .column > input:nth-of-type(2):checked ~ .column > input:nth-of-type(2):checked ~ .column::after,
input:nth-of-type(4):checked ~ .column > input:nth-of-type(4):checked ~ .column > input:nth-of-type(4):checked ~ .column > input:nth-of-type(4):checked ~ .column::after,
...
input:nth-of-type(12):checked ~ .column > input:nth-of-type(12):checked ~ .column > input:nth-of-type(12):checked ~ .column > input:nth-of-type(12):checked ~ .column::after

語義混亂了，這些選擇器只適用于紅色的玩家（黃色的玩家有另一輪），但是它確實(shí)有用。有一個(gè)好處是不會(huì)出現(xiàn)檢測(cè)錯(cuò)誤的列或行。結(jié)果的顯示也必須進(jìn)行修改，任何匹配列使用的 ::after 偽元素都應(yīng)該是一致的。因此，必須在最后一個(gè)位置之后添加一個(gè)偽第八列。

如上面的代碼片段所示，列的特殊的位置關(guān)系可以檢測(cè)一行中的四子相連?？梢允褂猛瑯拥募夹g(shù)并通過調(diào)整這些位置來檢測(cè)對(duì)角線上的四子相連。注意對(duì)角線可以在兩個(gè)方向上。

input:nth-of-type(2):checked ~ .column > input:nth-of-type(4):checked ~ .column > input:nth-of-type(6):checked ~ .column > input:nth-of-type(8):checked ~ .column::after,
input:nth-of-type(4):checked ~ .column > input:nth-of-type(6):checked ~ .column > input:nth-of-type(8):checked ~ .column > input:nth-of-type(10):checked ~ .column::after,
...
input:nth-of-type(12):checked ~ .column > input:nth-of-type(10):checked ~ .column > input:nth-of-type(8):checked ~ .column > input:nth-of-type(6):checked ~ .column::after

在最終的代碼中，選擇器的數(shù)量非常龐大，如果使用 CSS 預(yù)處理器則可以顯著減少聲明長(zhǎng)度。盡管如此，我認(rèn)為演示的代碼還是比較短的。它應(yīng)該是在中間的某個(gè)地方，從硬編碼一個(gè)選擇器到使用 4 個(gè)神奇的選擇器（列，行，兩個(gè)對(duì)角線）。

當(dāng)有玩家獲得勝利就會(huì)顯示一條信息

修復(fù)漏洞

任何軟件都有邊緣情況需要處理。四子相連游戲的可能結(jié)果不僅是紅色或黃色的玩家獲勝，而且會(huì)出現(xiàn)游戲板被填滿的平局。從技術(shù)上講，這種情況不會(huì)破壞游戲或產(chǎn)生任何錯(cuò)誤，所缺少的是對(duì)玩家的反饋。

我們的目標(biāo)是檢測(cè)出黑板上有 42 個(gè) :checked 的單選按鈕，并且它們都沒有處于 :indeterminate 狀態(tài)。這就要求為每個(gè)單選按鈕做一個(gè)選擇。單選按鈕處于 :indeterminate 時(shí)是 invalid ，否則是 valid 。因此，我為每個(gè) input 添加了 required 屬性，然后在表單上使用 :valid 偽類來檢測(cè)平局。

當(dāng)游戲板被填滿時(shí)會(huì)顯示平局的信息

檢測(cè)平局結(jié)果出現(xiàn)了一個(gè) bug。在極少數(shù)的情況下會(huì)出現(xiàn)黃色玩家最終勝利的情況，勝利和平局的消息都顯示出來了。這是因?yàn)檫@些結(jié)果的檢測(cè)和顯示方法是正交的。我解決了這個(gè)問題，確保獲勝消息有一個(gè)白色的背景，并在平局消息之上。還必須延遲平局消息的過渡，這樣它就不會(huì)與獲勝消息混合出現(xiàn)了。

黃方勝利的信息蓋住了平局結(jié)果

雖然許多單選按鈕是通過絕對(duì)定位隱藏在彼此后面的，但是所有處于不確定狀態(tài)的按鈕仍然可以通過 tab 鍵來訪問。這使得玩家可以將他們的圓盤放入任意的圓孔中。處理這個(gè)問題的一種方法是簡(jiǎn)單地禁止使用 tabindex 屬性進(jìn)行鍵盤交互:將其設(shè)置為 -1 意味著不應(yīng)該通過連續(xù)的鍵盤導(dǎo)航來訪問它。為了解決這個(gè)問題，必須在每個(gè)單選按鈕上添加這一屬性。

...

限制

最實(shí)質(zhì)性的缺點(diǎn)是，由于輪流游戲的解決方案不可靠，游戲板沒有響應(yīng)，并且可能在小的視圖窗口上出現(xiàn)故障。我不敢冒險(xiǎn)重構(gòu)響應(yīng)式的解決方案，由于實(shí)現(xiàn)的本質(zhì)，硬編碼看起來更安全。

另一個(gè)問題是觸摸設(shè)備上的 sticky hover 。在正確的位置添加一些媒體查詢是解決這個(gè)問題最簡(jiǎn)單的方法，但是這會(huì)消除自由落體動(dòng)畫。

有人可能認(rèn)為 :indeterminate 偽類已經(jīng)得到了廣泛的支持，事實(shí)的確如此。問題是它只在一些瀏覽器中得到部分支持。注意兼容性表中的注釋1：MS IE 和 Edge 在單選按鈕上不支持它。如果您在這些瀏覽器中查看演示程序，您的光標(biāo)將變成 not-allowed 的光標(biāo)，這是無意的，但有點(diǎn)優(yōu)雅的降級(jí)。

不是所有瀏覽器都支持 radio 按鈕的 :indeterminate 屬性

總結(jié)

感謝閱讀到最后一部分！讓我們看看這個(gè)游戲的一些數(shù)據(jù)：

140 個(gè) HTML 元素

350 行 （合理地） CSS

0 行 JavaScript

0 個(gè)外部資源

總的來說，我對(duì)結(jié)果很滿意，反饋也很好。做這個(gè)演示我確實(shí)學(xué)到了很多，我希望可以分享更多這樣的文章！