纯前端实现「羊了个羊」小游戏

software • • Web前端 • 阅读 143

↓推荐关注↓

作者：QCY

https://juejin.cn/post/7143897892531486727


背景

最近简单的「羊了个羊」小游戏火到出圈，据说狂赚几百几千万。这么弱智的玩意，即便是前端，我上我也行！

最终成果

纯前端实现「羊了个羊」小游戏

游戏本体

如果一直白屏可以换这个地址 https://1enozc.csb.app/

地图模拟

游戏本体长这样

纯前端实现「羊了个羊」小游戏

可以很明显的观察到，卡片是以 1/4 为单位排列的

1. 单层

纯前端实现「羊了个羊」小游戏

假设有这种布局，模拟成二维数组应该如下表示，每个格子就是一个数字元素

.covered-item {
  pointer-event: none;
}

这样对应卡片上的任何事件都不会生效

2. 点击卡片

点击到最上层的卡片之后，我们按如下步骤处理：

  1. 把点击到的卡片实例 push 到暂存数组 pendingList 中

  2. 把卡片实例从 cardMap、cardList 中去除

  3. pendingList遍历

    1. 如果 pendingList 中存在 3 张相同的卡片，则消除这 3 张卡片
    2. 如果不存在，且pendingList 中卡片数为 7，游戏结束 。本局失败
    3. 如果 cardList 中的卡片数量为 0，游戏结束。本局成功

总结

到这一步，整个游戏的基础框架就已经搭建好了。剩下的难点还有

  • 道具的实现
    • 暂存道具
    • 随机道具
    • 撤销道具
  • 动效的实现
    • 从排堆进入 pendding 区域
    • 从 pendding 区域进入暂存区
    • 使用随机道具时候的动画
    • 集齐 3 个卡片时候的消除动画
  • 样式美化

这些基本属于锦上添花了，感兴趣的同学可以自行探索一下。提供的实时代码里基本已经实现了大部分


源码获取

关注公众号，

后台回复「羊」获取本文源码

纯前端实现「羊了个羊」小游戏

本篇文章来源于微信公众号:程序IT圈

原创文章，作者：software，如若转载，请注明出处：https://www.sldh123.com/5799.html

赞 (1)
softwaresoftware
0
上一篇 10月 20, 2022 12:09 上午
下一篇 10月 20, 2022 12:09 上午

相关推荐

发表回复

您的电子邮箱地址不会被公开。