在线经验地址：http：//summer.pkec.net/
源代码地址：https：//gitee.com/ihope_top/juejin-summer
不知不觉地，夏天又来了。您在夏天能想到什么？空调，西瓜和冰淇淋？但是不仅在夏天，而且还有运动，出汗和裸露的身材。您还记得每年夏天举行的体育会议吗？还记得那个夏天的每天都很酷吗？今天我将使用JS给您带来跑酷游戏 - “ Run！”程序员，我希望每个人都可以喜欢
这些功能涉及后端接口的支持，因此仅在事件期间生效。在论文活动之后，游戏可能会无效，但仍可以正常访问游戏。如果可能导致恶意攻击或其他无法控制的因素无效，则此功能可能会预先失败。
成就上传
没错，这次我们打开了前端和后端，并支持结果上传。游戏结束后，结果的选项将出现。您只需要填写自己的掘金ID，主要目的就是防止用户随机填写非法昵称，因此您需要在这里获取用户的用户昵称。
迷你游戏仅用于娱乐活动，因此没有任何反作用措施。不要作弊，但为了防止误解，不能反复上传相同的成就。结果无法上传。如果您第一次运行500米并第二次运行100米，则可以在两次中上传两个结果
掘金ID采集方法：
输入个人主页，地址栏背后的数字是您的ID
所有成员总共运行
游戏结束后，用户上传的结果将存储在数据库中。首页将显示所有用户上传的结果的总和
首页将显示排名的入口。排名将显示所有用户的单个过程。一位用户可以多次进入列表。最高分数为800米，因此第一和第二名是张san。
游戏开始后，角色将自动向前运行。在跑步的图片中，将遇到小恶魔。用户必须避开小魔鬼并继续向前奔跑。如果您遇到小恶魔，游戏结束了。
操作方法：
跳跃：按钮或钥匙跳跃以避免下面的小魔鬼
秋季：按钮或钥匙滑动以避免上面的小魔鬼
随着里程的增加，角色运行的速度将变得越来越快，而小魔鬼的数量将越来越多（具有上限）。规则在这里介绍。去体验游戏。
Baiyun开发
单个baiyun实际上是一个圆形矩形，然后用伪元素形成两发子弹，代码如下
以下是随机生成的Baiyun，然后是将Baiyun从右到左移动的动画。为了使Baiyun与感知更加一致，我们给它一个随机大小，然后基于此尺寸
附加代码
以下是代码块版本https://code.juejin.cn/pen/7103402725735399438
地面发展
地面部分是用如此小的立方体形成的。如果高度不够
我们都知道，游戏中的角色运动实际上不是角色本身，而是场景的动作启动角色正在移动。在这里，我们需要地面继续移动以启动运动中的角色。由于我们在这里使用背景图片，我们只需要控制背景图片的定位
因为有了游戏，角色将移动越来越快，因此这里的地面运动速度也需要随速度（全球速度控制变量）而变化。另外，运行到一定距离时的速度
个性发展
角色运行实际上是在来回切换到这样的一些静态图片。我之所以没有使用GIF，是因为我还必须控制字符运行速度。GIF我找不到如何控制速度。让我们先看一下不同速度的运行。
以下是代码
首先加载运行的运行阵列
运行时切换图片
与跑步的动画处理不同，我没有在跳跃和下降时进行动画处理。一个是它不容易控制，另一个是太多的图片。
这种飞行对象的发展是该飞行对象发展的相同原则。从我的野兽的最初年份到阻力饺子的支柱，或者提到的天空中的云层，所有这些都是在规定的时间生成一个物体，然后给它一个移动动画。
这里的不同地方是每个障碍物中包含的小魔鬼的数量，障碍物可能在上面。
响应数量问题，我根据速度（全局速度变量）随机生成。至少一个，最多四个，数量越多，就越困难。
为了解决上下问题，它不过是编写倾斜和降低的样式，然后在生成时随机生成以提供相应的样式。请注意，此状态需要在此处保留，因为碰撞时应使用它。
这里的一系列障碍也借用了弹幕中的生成计划，即需要障碍的时间，并自动加载下一个而不是定期创造。
之后，存在障碍的运动。这里的障碍物的移动速度与地面相同。这种感觉是障碍物漂浮在地面上。此外，它与白云不同。障碍物的运动，而不是移动动画添加到一个障碍物中，因为这里的障碍物无需给出每个障碍物的不同移动速度。另一个原因是，当人们遇到人们的行动时，如果遇到所有障碍的行动，如果将其添加到一个障碍中时，我们需要停止。
游戏玩法无非是角色运动+障碍运动+碰撞检测+避免障碍。角色运动和障碍运动刚刚被说。这是碰撞检测并避免障碍。只要您不遇到它，就可以避免。
这里的碰撞检测实际上等同于抵抗饺子中的碰撞检测和修订。只有三个州，跳跃，跑步和衰落，因此我们只需要确定它在适当的时间。不是，它被判断为碰撞
首先，我们需要找到谁与谁发生碰撞，因为可能同时存在多个障碍。我们在每个障碍物中添加了一个碰撞检测，这显然会浪费性能，因此我们需要找到最接近角色并且尚未完全通过角色的障碍。进行检测如下图所示
我们需要在没有角色测试障碍的情况下找到第一个自己
已知字符的宽度为120，字符位于屏幕级别的中心
因此，障碍物的障碍物是从屏幕宽度的左侧左侧>一半
我们仍然需要知道何时测试检测目标，也就是说，当障碍物距离的左侧距离<（屏幕宽度的一半+一半的角色）时，此时根据障碍物（生成时保存）和角色的状态，您可以确定是否是碰撞。
碰撞检测是在障碍运动中执行的，完整的代码如下。
这是迷你游戏的介绍。我希望每个人都能喜欢它，并为自己设定旗帜。如果您可以进入前三名，请给自己买一个Mac。如果您可以进入前十名，您将自己购买iPad。如果前十名进步，请不要去，什么也不买。
原始：https：//juejin.cn/post/7103423600660578341