我正在参与「码上挑战赛」详情请看：码上挑战赛来了！

布景

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

最终成果

游戏本体

假如一直白屏能够换这个地址 1enozc.csb.app/

---

地图模拟

游戏本体长这样

能够很明显的调查到，卡片是以 1/4 为单位摆放的

1. 单层

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

[
    [0, 0, 1, 0, 0, 0],
    [1, 0, 0, 0, 1, 0],
    [0, 0, 0, 0, 0, 0],
]

2. 多层

[
    // 第1层
    [
        [1, 0, 0, 0, 1, 0],
        [0, 0, 0, 0, 0, 0],
  	[1, 0, 0, 0, 1, 0],
  	[0, 0, 0, 0, 0, 0],
    ],
    // 第2层
    [
  	[0, 0, 0, 0, 0, 0],
        [0, 1, 0, 1, 0, 0],
  	[0, 0, 0, 0, 0, 0],
  	[0, 0, 0, 0, 0, 0],
    ],
]

地图生成

1. 根底生成

最根底的地图只关乎当时层，假设当时需求断定是否放置卡片的坐标为 [i, j]，那么下面四个方位就不能存在卡片，否则就会呈现同层卡片堆叠

• [i-1,j] != 1
• [i,j-1] != 1
• [i-1, j-1] ! = 1
• [i-1, j+1] ! = 1

一起咱们参加一个随机系数，确保每次生成的地图不同

• Math.random() < 0.3 === true 的时分该方位才放置卡片

2. 优化地图

以一层为例，按上面的逻辑只能生成最简单的地图，实践咱们调查游戏，会发现卡片的放置是有一定规则的：

• 左右对称
• 从顶层到底层越来越往中心集合，卡片越来越少
• 上一层不会彻底掩盖下一层

加上这两点优化之后，地图应该如下展示：

顶层

底层

3. 卡片渲染

每次方位和随机数断定合格，咱们应该实践放置一张卡片，一个实践的 dom。然后依据卡片的 x、y、z、宽高 值设置实践方位

const style = {
  position: "absolute",
  top: (y * CardItem.height) / 2 + offset + "px",
  left: (x * CardItem.width) / 2 + offset + "px",
  width: CardItem.width + "px",
  height: CardItem.height + "px",
}

掩盖关系

咱们能够先按一层的巨细初始化一个处理遮挡用的二维数组 coverMap，然后在之前生成的游戏地图上，从最后一层往第一层遍历。

[
    // 第1层
    [
  	[1, 0, 0, 0, 1, 0],
        [0, 0, 0, 0, 0, 0],
  	[1, 0, 0, 0, 1, 0],
  	[0, 0, 0, 0, 0, 0],
    ],
    // 第2层
    [
  	[0, 0, 0, 0, 0, 0],
        [0, 1, 0, 1, 0, 0],
  	[0, 0, 0, 0, 0, 0],
  	[0, 0, 0, 0, 0, 0],
    ],
]

先遍历第二层，发现 [1,1] 方位有卡片（由所以最上层能够先不考虑本身被遮挡的情况）所以咱们把 coverMap 的对应 4 个坐标置为 1，第 [1,4] 方位的卡片也一样处理。

处理完顶层之后的 coverMap 结果如下

const coverMap = [
    [0, 0, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 0],
    [0, 1, 1, 1, 1, 0],
    [0, 0, 0, 0, 0, 0],
]

第二次（底层）遍历到 [0,0] 方位发现有卡片，而且实践会占据：

• [0,0]
• [0,1]
• [1,0]
• [1,1]

而其中 [1,1] 方位，是被遮挡的，所以这张卡片也应该被断定成遮挡状态。依次处理完这一层一切卡片，一起遮挡数组更新

const coverMap = [
    [1, 1, 0, 0, 1, 1],
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
    [1, 1, 0, 0, 1, 1],
]

填充数据

整改游戏的中心逻辑是 pending 区域存在 3 个同样图案的卡片时会消除。所以咱们有两个要害点要注意

1. 确保卡片是 3 的倍数

之前都是用 0、1 代指卡片，实践之前设置卡片的时分，咱们能够新建 CardItem 类的实例，每个卡片实例会记录自己的方位、样式、是否被掩盖等情况。而且咱们能够用一个 cardList 数组保存下这些实例

而且在地图生成完之后，依据数组数量除 3 的余数，早年开端删除对应数量的卡片

能够想想为什么不从后边删~

2. 填充卡片类型

咱们需求随机的把指定种类的卡片类型，以 3 的倍数填充到现有卡片中去

随机

创立一个新数组，而且随机交流次序即可

const tempList = [...this.cardList];
const listLength = tempList.length;
for (let i = 0; i < listLength; i++) {
  const j = Math.ceil(Math.random() * listLength);
  const tempItem = tempList[i];
  tempList[i] = tempList[j];
  tempList[j] = tempItem;
}

填充

假设有 cardType 种类型的卡片，那么按 3 张重复填充即可

for (let i = 0; i < listLength; i++) {
  const item = tempList[i];
  item.setVal(Math.floor(i / 3) % this.cardType);
}

点击交互

1. 是否能够点击

只要顶层能够被点击，咱们之前已经断定过卡片是否被掩盖的逻辑，做对应处理即可。一个简单的办法是给被掩盖的卡片设置一个特殊 style

.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 个卡片时分的消除动画

• 样式美化

这些根本属于如虎添翼了，感兴趣的同学能够自行探索一下。我供给的实时代码里根本已经完成了大部分

其他

能够随意转载，注明作者、出处即可！

源码在游戏本体部分，点击左上方 script 部分即可