羊了个羊，如何自己实现（暨码上掘金编程挑战赛介绍）

　　海报
　　稀土掘金正在面向全国举办首届编程挑战赛〔1〕，这是展示自己作品的好机会，详情见文后。
　　小游戏《羊了个羊》〔2〕最近非常火爆，引发了全民关注，抖音和微博都有几十亿的查看量。
　　它的开发难度，其实一点不高，主要游戏逻辑都在前端，用的是普通的网页开发技术。如此简单的实现，却取得了这样巨大的反响，堪称奇迹。
　　本文就介绍这个游戏怎么实现。只用HTMLCSSJS做出一个简单版本，根本不需要后端。
　　最后的成品会放到码上掘金code。juejin。cn〔3〕，那是一个网页的代码开发环境，可以分享运行结果，跟国外的CodePen差不多。
　　对于不了解的读者，我先简单说一下，《羊了个羊》是怎么回事。
　　本质上，它就是传统的消消乐游戏（下图），同种花色的方块连到一起，可以消除，消除所有方块，就过关了。
　　《羊了个羊》在形式上借鉴了国外的《消麻将》游戏（下图），采用堆叠式消除。
　　不同之处在于，它有一个槽位栏，存放取下的卡片（下图）。只要槽位栏里面，连续三张卡片花色相同，就能消除，也就是所谓的三消。
　　你仔细一想，网页实现的核心逻辑，其实只有两步。
　　第一步，网页划出一个区域，将所有卡片在这个区域堆成四层。每一层的卡片位置和花色分布，可以用随机数控制。
　　第二步，每一层的没有被遮挡的卡片可以移动。它们只要被点击，就从卡片区移动到槽位栏。
　　那么，下面就来实现这两步。我原想自己写，但在GitHub搜了一下羊了个羊，返回了近两百个结果，什么样的代码都有。
　　他们实现得比我完善，效果更好，所以我选了一个仓库chenxchxlegex〔4〕，就用他的代码演示。
　　这个仓库使用vue3TypeScript，源码加起来不到1000行。核心逻辑就是上面的两点，下面介绍一些关键的实现细节。
　　首先，每张卡片是一个实例对象，TypeScript类型描述如下。
　　从上图看到，每张卡片有如下属性。
　　id：卡片编号。type：卡片种类，相同种类的卡片可消除。state：卡片状态，是否已经点击或已经消除。zIndex：卡片在哪一层。index：该层的卡片编号。row：卡片所在的行。column：卡片所在的列。top：卡片距离堆叠区左上角的垂直距离。left：卡片距离堆叠区左上角的水平距离。
　　熟悉CSS的同学，看到里面的zIndex、top、left这些属性名，可能已经想到了，作者使用绝对定位zIndex实现卡片的定位。
　　定位逻辑就在卡片组件的代码里面，只有几行。
　　上面代码中，红框部分就是定位逻辑，设置每张卡片的坐标，以及在第几层。
　　注意，上一层卡片的顶点要落在下一层卡片的中心点，从而可以露出下面的图案。
　　上面示意图中，黑色方块代表下一层的卡片，以它的中心点为基点，上一层可以放四张卡片，以红框表示。
　　最后得到的堆叠效果，就是下图。
　　图片替换以后，UI就基本完成了。
　　最后，为每张图片加上click事件处理函数（点击后移动到卡片槽），游戏的核心逻辑就差不多了。
　　更详细的源码解读，可以参考作者自己的文章〔5〕，并试玩Demo〔6〕。
　　但是，他的实现还不是最简单的，这里还有一个更简单的实现〔7〕。
　　这个实现的页面源码〔8〕只有一个脚本，甚至不需要编译。（如果码上掘金页面是白屏，点击右上角的运行按钮。）
　　《羊了个羊》就介绍到这里，不过本文还没结束。
　　我的目的是抛砖引玉，向大家展示简单的HTMLCSSJS代码，就可以做出效果很好的小游戏。下面是其他一些例子。
　　《平台跳跃》〔9〕
　　《消方块》〔10〕
　　《推箱子》〔11〕
　　大家可以去码上掘金〔12〕平台，看看它们的代码和效果。
　　如果你也有这样的作品，或者想尝试一下，现在就有一个好机会。码上掘金正在举办首届全国编程挑战赛，这是国内少有的前端编程比赛。〔码上掘金介绍〕稀土掘金推出的一款面向开发者的在线CodePlayground服务，无需搭建复杂的开发环境，即可实现代码效果的即时预览、演示和分享。
　　它类似于国外的Codepen，这种网站国内好像只有这一家。它主要面向前端开发，但是也支持20多种后端语言〔13〕。
　　如果你有自己的作品（网页游戏、网页动画、UI特效等等），但苦于无法向社区展示和推广，那么不要错过这个比赛机会，请仔细阅读下面的介绍。
　　只要参赛，平台会帮忙推广你的作品，并提供丰厚的奖金和奖品。
　　码上掘金编程挑战赛一、活动赛道
　　赛题一：码上游戏：基于码上掘金开发完成一款创意的web互动小游戏，具体游戏内容及形式不限。
　　赛题二：码上创意：可以使用任意第三方开源库框架，呈现形式包括但不限于可视化的创意动效、动画、UI效果等，参见Demo〔14〕。
　　赛题三：码上文言文：需使用码上掘金提供的文言文编程能力〔15〕，以文言文作为编程语言实现作品，呈现出的作品风格及形式不限，参见Demo〔16〕。
　　赛题四：码上1024：在码上掘金上实现稀土掘金或1024相关的效果，参见Demo〔17〕。
　　注意，参赛作品必须是原创作品。更多作品灵感参见讨论区〔18〕。
　　二、活动奖品
　　（一）获奖同学：赛事奖金，荣誉证书，掘金年度会员，掘金周边盲盒。
　　获奖作品有可能成为掘金网站开屏页面，获得站内资源位推荐、字节跳动工区宣传位等。
　　获奖同学有机会获得字节offer。
　　（二）通过审核的参赛选手：获得稀土掘金月度会员，最新周边盲盒。
　　（三）官网报名的所有同学：参与抽奖，有机会获得iPhone14Pro、AppleWatch8、Pico4、AirpodsPro2、掘金盲盒等奖品。
　　三、活动时间
　　10月12日11月30日
　　时间点：
　　10月12日11月22日：报名并提交作品。11月23日11月29日：作品评选。11月30日：赛事颁奖。
　　四、报名方法
　　报名即可参与抽奖，iPhone14Pro、AppleWatch8、Pico4、AirpodsPro2、最新盲盒等奖品等你来拿！
　　五、活动直播
　　10月31日（星期一）晚七点，掘金也会发起一场《码上掘金编程挑战赛特别圆桌》活动直播，邀请四位不同职业选择的嘉宾，聊聊自己的码上掘金之路。
　　他们有人去了大厂、有人离开大厂、有人创业、有人走上了学术道路，通过他们的分享希望给还在学习和刚进入职场的同学们一些启发。
　　（完）
　　References
　　〔1〕首届编程挑战赛：https：juejin。cnchallenge1？utmsourceryf
　　〔2〕《羊了个羊》：https：baike。baidu。comitemE7BE8AE4BA86E4B8AAE7BE8A61983244
　　〔3〕code。juejin。cn：https：code。juejin。cn
　　〔4〕chenxchxlegex：https：github。comchenxchxlegex
　　〔5〕作者自己的文章：https：juejin。cnpost7147245442172977189
　　〔6〕Demo：https：chenxch。github。ioxlegex
　　〔7〕更简单的实现：https：juejin。cnpost7143897892531486727
　　〔8〕页面源码：https：code。juejin。cnpen7143796732931866660
　　〔9〕《平台跳跃》：https：code。juejin。cnpen7132404229280366606
　　〔10〕《消方块》：https：code。juejin。cnpen7132120696733302822
　　〔11〕《推箱子》：https：code。juejin。cnpen7131587018592796679
　　〔12〕码上掘金：https：code。juejin。cn
　　〔13〕20多种后端语言：https：www。jcode。pub？languages7116418967081582623
　　〔14〕Demo：https：code。juejin。cnpen7086673044839596046
　　〔15〕文言文编程能力：https：github。comxitujcodelanguages
　　〔16〕Demo：https：code。juejin。cnpen7123010306921463839
　　〔17〕Demo：https：code。juejin。cnpen7143068746234478632
　　〔18〕讨论区：https：juejin。cnpintopic7084534887633387555
　　〔19〕活动官网：https：juejin。cnchallenge1？utmsourceryf
　　〔20〕直播链接：https：juejin。cnlive1024sjc？utmsourceryf
　　〔21〕点击这里：https：juejin。cnlive1024sjc？utmsourceryf