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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

KinHKin(五年前端)   2022-12-19 我要评论

1.前言

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

设计思路:

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

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

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

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

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

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们