见缝插针之简单版、升级版、最强版

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，详情见如下：

相关资源：见缝插针之三种版本总有你喜欢的