1、简单版:纯js原生手工代码,判断是否失败有点小bug,内含开发日志喔!
2、升级版:Canvas画图,无bug!!
3、最强版:功能丰富,画面比较好看,无bug,非常棒!!!
你好!玩见缝插针吗?
莫西莫西,接下来将为小生将简单展示一下,咱们用JavaScript写的见缝插针,到底是个啥样,在这里我想说(我!讨!厌!所!有!的!前!端!页!面~~~),简单来说就是菜的基础上还没有审美,好了,该进入正文了!
提示:以下是本篇文章正文内容
游戏简介
1. 游戏逻辑分析
- 圆圈( 中心大圆、等待发射的小圆、跟随大圆旋转的小圆)
- 小圆通过空隙插入大圆,小圆发射完则成功
- 小圆触碰到旋转小圆则失败
2. 功能
- 点击【开始游戏】按钮,开始游戏浮层消失,显示游戏界面
- 鼠标左击可发射小圆,随之小圆开始旋转
position: absolute;
top: -270px;
left: 720px;
animation:spin2 5s infinite linear;
transform-origin: 50% -125px;
z-index:1;
animation:spin2 5s infinite linear;
transform-origin: 50% -125px;
@keyframes spin2{
0%{ transform:rotate(0deg); }
100%{transform:rotate(360deg);}
}
- 游戏结束浮层出现,点击【继续游戏】按钮可进行当前的关卡,点击【重新开始】按钮可返回到第一关
- 游戏成功,开始游戏浮层出现,点击【进入下一关】按钮,即可进入下一关挑战
3. 界面
-
开始游戏浮层
-
游戏界面
-
结束游戏浮层(成功)
- 结束游戏浮层(失败)
原本是有一个视频介绍,但是无奈加不进去 o(´^`)o,详情见如下:
相关资源:见缝插针之三种版本总有你喜欢的