首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端写的跑酷游戏——《奔跑吧!程序员》js小游戏火热来袭,快来一起奔跑

今天我就用js来给大家带来一个跑酷小游戏——《奔跑吧!...规则介绍 开始游戏后,人物会自动向前奔跑奔跑的图中会遇到小恶魔,用户必须躲避小恶魔继续向前奔跑,如碰到小恶魔,则游戏结束。...操作方式: 跳跃:按 w 键或 ↑ 键进行跳跃躲避下方的小恶魔 下滑:按 s 键或 ↓ 键进行下滑躲避上方的小恶魔 随着里程的增加,人物奔跑的速度会越来越快,小恶魔的数量也会越来越多(有上限),规则介绍就到这里啦...由于我们这里使用的是背景图片,所以只需要控制背景图片的定位即可 因为随着游戏的进行,人物会移动的越来越快,所以这里地面的移动速度也需要随着speed(全局速度控制变量)变化,另外我们对于人物的奔跑距离也在这里进行计算...,当人物奔跑到一定距离时改变速度 // 地面背景横向滚动 groundScroll() { let ground = document.querySelector('.ground-wrap

1.3K30

网站页面滚动加载动画JS特效

终于尘埃落定了,前段时间忙的不可开交,结婚,工作,因为婚假+年假一起休的,导致很长时间没有更新博客了,今天抽空给大家带来了一个js特效,网站模块延迟加载的动画,假期之前就想着制作这个功能,页面滚动加载...简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。...不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件...container.innerHTML(data.newElementHTML); scrollReveal.init(); 其中高级自定义可以在后期加入,目前本站只是简单的加载动画,更加美妙的特效以后会慢慢加入...如果不喜欢这个可以试试wow.js,网站页面滚动加载动画JS特效(二)。

11.3K20
领券