vue3版本网页小游戏设计思路

1.前言

最近火爆全网的羊了个羊小程序，背景是根据官方介绍，“羊了个羊”是一款闯关消除小游戏，通关率不到0.1%。主要玩法为重叠的各类方块，需要在下方7个栏内完成消除（3个同类消除），其特点就是“极难”，也因此成为热门挑战。我也颇感兴趣，去玩了2把，的确很有乐趣，整理了一下思路，决定搞个vue3版本的网页版本，我看网上有react版本的了，vue3版本还没有，下面分别给出设计思路，实现方式，和玩法

设计思路：

1，先来一张背景图，网上搜一张草地图片

2，最底部设置七个槽位，有三个连续相同的就消除，槽位满了的话，挑战失败

3，中间的图层区域使用重叠的方式，可能是半重叠，可能是全重叠，只有第一层可以移入槽位，全部消除时，表示挑战成功！后续挑战是变化关卡的布局方式（多种排列方式）

4，点击事件的思路（内层不能点击，前置点击如果槽位满了还没有消除完，关卡的消除，消除动作 和 添加爆炸效果，进入下一关，挑战失败）

5，辅助类函数：判断是否过关，消除函数，实现爆炸