小遊戲《羊了個羊》最近非常火爆，引發了全民關注，抖音和微博都有幾十億的檢視量。
它的開發難度，其實一點不高，主要遊戲邏輯都在前端，用的是普通的網頁開發技術。如此簡單的實現，卻取得了這樣巨大的反響，堪稱奇蹟。
本文就介紹這個遊戲怎麼實現。只用 HTML + CSS + JS 做出一個簡單版本，根本不需要後端。
最後的成品會放到"碼上掘金" code.juejin.cn，那是一個網頁的程式碼開發環境，可以分享執行結果，跟國外的 CodePen 差不多。
對於不瞭解的讀者，我先簡單說一下，《羊了個羊》是怎麼回事。
本質上，它就是傳統的"消消樂"遊戲（下圖），同種花色的方塊連到一起，可以消除，消除所有方塊，就過關了。
《羊了個羊》在形式上借鑑了國外的《消麻將》遊戲（下圖），採用堆疊式消除。
不同之處在於，它有一個槽位欄，存放取下的卡片（下圖）。只要槽位欄裡面，連續三張卡片花色相同，就能消除，也就是所謂的"三消"。
你仔細一想，網頁實現的核心邏輯，其實只有兩步。
第一步，網頁劃出一個區域，將所有卡片在這個區域堆成四層。每一層的卡片位置和花色分佈，可以用隨機數控制。
第二步，每一層的沒有被遮擋的卡片可以移動。它們只要被點選，就從卡片區移動到槽位欄。
那麼，下面就來實現這兩步。我原想自己寫，但在 GitHub 搜了一下"羊了個羊"，返回了近兩百個結果，什麼樣的程式碼都有。
他們實現得比我完善，效果更好，所以我選了一個倉庫 chenxch/xlegex，就用他的程式碼演示。
這個倉庫使用 vue3 + TypeScript，原始碼加起來不到1000行。核心邏輯就是上面的兩點，下面介紹一些關鍵的實現細節。
首先，每張卡片是一個例項物件，TypeScript 型別描述如下。
從上圖看到，每張卡片有如下屬性。
id：卡片編號。type：卡片種類，相同種類的卡片可消除。state：卡片狀態，是否已經點選或已經消除。zIndex：卡片在哪一層。index：該層的卡片編號。row：卡片所在的行。column：卡片所在的列。top：卡片距離堆疊區左上角的垂直距離。left：卡片距離堆疊區左上角的水平距離。
熟悉 CSS 的同學，看到裡面的zIndex、top、left這些屬性名，可能已經想到了，作者使用"絕對定位 + zIndex"實現卡片的定位。
定位邏輯就在卡片元件的程式碼裡面，只有幾行。
上面程式碼中，紅框部分就是定位邏輯，設定每張卡片的座標，以及在第幾層。
注意，上一層卡片的頂點要落在下一層卡片的中心點，從而可以露出下面的圖案。
上面示意圖中，黑色方塊代表下一層的卡片，以它的中心點為基點，上一層可以放四張卡片，以紅框表示。
最後得到的堆疊效果，就是下圖。
圖片替換以後，UI 就基本完成了。
最後，為每張圖片加上 click 事件處理函式（點選後移動到卡片槽），遊戲的核心邏輯就差不多了。
更詳細的原始碼解讀，可以參考作者自己的文章，並試玩 Demo。
但是，他的實現還不是最簡單的，這裡還有一個更簡單的實現。
這個實現的頁面原始碼只有一個指令碼，甚至不需要編譯。（如果"碼上掘金"頁面是白屏，點選右上角的"執行"按鈕。）
《羊了個羊》就介紹到這裡，不過本文還沒結束。
我的目的是拋磚引玉，向大家展示簡單的 HTML + CSS + JS 程式碼，就可以做出效果很好的小遊戲。下面是其他一些例子。
《平臺跳躍》
《消方塊》
《推箱子》
大家可以去"碼上掘金"平臺，看看它們的程式碼和效果。
如果你也有這樣的作品，或者想嘗試一下，現在就有一個好機會。"碼上掘金"正在舉辦首屆全國程式設計挑戰賽，這是國內少有的前端程式設計比賽。
它類似於國外的 Codepen，這種網站國內好像只有這一家。它主要面向前端開發，但是也支援20多種後端語言。
如果你有自己的作品（網頁遊戲、網頁動畫、UI 特效等等），但苦於無法向社群展示和推廣，那麼不要錯過這個比賽機會，請仔細閱讀下面的介紹。
只要參賽，平臺會幫忙推廣你的作品，並提供豐厚的獎金和獎品。
碼上掘金程式設計挑戰賽
一、活動賽道
賽題一：碼上游戲：基於碼上掘金開發完成一款創意的 web 互動小遊戲，具體遊戲內容及形式不限。
賽題二：碼上創意：可以使用任意第三方開源庫/框架，呈現形式包括但不限於視覺化的創意動效、動畫、UI 效果等，參見 Demo。
賽題三：碼上文言文：需使用碼上掘金提供的文言文程式設計能力，以文言文作為程式語言實現作品，呈現出的作品風格及形式不限，參見 Demo。
賽題四：碼上1024：在碼上掘金上實現"稀土掘金"或"1024"相關的效果，參見 Demo。
注意，參賽作品必須是原創作品。更多作品靈感參見討論區。
二、活動獎品
（一）獲獎同學：賽事獎金，榮譽證書，掘金年度會員，掘金周邊盲盒。
獲獎作品有可能成為掘金網站開屏頁面，獲得站內資源位推薦、位元組跳動工區宣傳位等。
獲獎同學有機會獲得位元組 offer。
（二）透過稽核的參賽選手：獲得稀土掘金月度會員，最新周邊盲盒。
（三）官網報名的所有同學：參與抽獎，有機會獲得 iPhone 14 Pro、Apple Watch 8、Pico4、Airpods Pro 2、掘金盲盒等獎品。
三、活動時間
10月12日 ～ 11月30日
時間點：
- 10月12日 ～ 11月22日：報名並提交作品。
- 11月23日 ～ 11月29日：作品評選。
- 11月30日：賽事頒獎。
四、報名方法
訪問活動官網，或者掃描下方二維碼，瞭解詳情，並報名參加。
（官網報名二維碼）
報名即可參與抽獎，iPhone 14 Pro、Apple Watch 8、Pico4、Airpods Pro 2、最新盲盒等獎品等你來拿！
如有疑問，微信掃碼新增賽事小助理，回覆"1024"加入大賽交流群。
（賽事小助理二維碼）
五、活動直播
10月31日（星期一）晚七點，掘金也會發起一場 《碼上掘金程式設計挑戰賽特別圓桌》 活動直播，邀請四位不同職業選擇的嘉賓，聊聊自己的"碼上掘金"之路。
他們有人去了大廠、有人離開大廠、有人創業、有人走上了學術道路，透過他們的分享希望給還在學習和剛進入職場的同學們一些啟發。
儲存直播連結，或到時點選這裡，進入直播間。
（完）