教你前端如何用js写一个跑酷小游戏

最新推荐文章于 2024-10-09 16:39:11 发布

百里青山

最新推荐文章于 2024-10-09 16:39:11 发布

阅读量6.2k

点赞数 13

分类专栏：前端创意系列文章标签：前端 javascript 开发语言游戏

本文链接：https://blog.csdn.net/qq_28252421/article/details/125079460

版权

本文介绍了如何使用JavaScript开发一个跑酷小游戏。游戏规则是人物自动奔跑，玩家需通过跳跃和下滑躲避小恶魔。文章详细讲解了场景、人物、障碍物的开发过程，并提供了在线体验和源码地址。

摘要由CSDN通过智能技术生成

在线体验地址：http://summer.pkec.net/

源码地址：https://gitee.com/ihope_top/juejin-summer

前言

不知不觉夏天又到了，提到夏天你们能想到什么？空调、西瓜还有冰淇淋？但是夏天不止有这些，还有运动、流汗、露身材，还记得每年夏天的运动会吗？还记得那年夏天的天天酷跑吗？今天我就用js来给大家带来一个跑酷小游戏——《奔跑吧！程序员》，希望大家可以喜欢

游戏介绍

规则介绍

开始游戏后，人物会自动向前奔跑，奔跑的图中会遇到小恶魔，用户必须躲避小恶魔继续向前奔跑，如碰到小恶魔，则游戏结束。

操作方式：

跳跃：按 w 键或 ↑ 键进行跳跃躲避下方的小恶魔

下滑：按 s 键或 ↓ 键进行下滑躲避上方的小恶魔

随着里程的增加，人物奔跑的速度会越来越快，小恶魔的数量也会越来越多（有上限），规则介绍就到这里啦，快去体验一下游戏吧。

游戏开发

场景开发

白云开发

单个的白云其实就是一个圆角矩形，然后用伪类元素做两个圆叠加起来形成的，代码如下

.cloud-item {
   
  position: absolute;
  width: 175px;
  height: 55px;
  margin: 50px;
  border-radius: 100px;
  background: #fff;
}
.cloud-item::before, .cloud-item::after {
   
  content: '';
  display: block;
  background: #fff;
  position: absolute;
}
.cloud-item::before {
   
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: -90%;
  right: 10%;
}
.cloud-item::after {
   
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: -54%;
  left: 14%;
  transform: rotate(-25deg);
}

下面就是随机生成白云，之后给白云一个从右往左移动的动画，为了生成的白云更符合观感，我们给它一个随机的大小，然后根据这个大小再来一个对应的移动速度，就变成了下面这样

附上代码

<div class="cloud-wrap" ref="cloudWrap"></div>

screenWidth: document.documentElement.clientWidth,
lastCreateTime: 0,
cloudFrequency: 10,
cloudSpeed: 1

// 生成云朵
createCloud() {
   
  let now = new Date().getTime()
  if (now - this.lastCreateTime > 3000) {
   
    // 创建云朵
    let cloudItem = document.createElement('div')
    cloudItem.className = 'cloud-item'
    // 设置云朵变化系数
    cloudItem.cloudScale = Math.random()
    // 设置云朵大小
    cloudItem.style.transform = 'scale('+cloudItem.cloudScale+')'
    // 设置云朵透明度
    cloudItem.style.opacity = cloudItem.cloudScale
    // 设置云朵位置
    let _left = this.screenWidth
    cloudItem.style.left = _left + 'px'
    let _top = Math.random() * 400
    cloudItem.style.top = _top + 'px'

    this.$refs