勇猛的兔子的疯狂奔跑小游戏

原创

海拥haiyong 2022-01-17 11:49:57 博主文章分类：游戏 ©著作权

文章标签 游戏 html 小游戏 css 下载地址 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者海拥haiyong的原创作品，请联系作者获取转载授权，否则将追究法律责任

勇猛的兔子的疯狂奔跑小游戏

1.运行效果
2.游戏玩法
3.游戏截图
4.代码展示

HTML代码
CSS代码

5.项目下载地址
相关内容

1.运行效果

由于CSDN允许上传图片最大为5M，所以这里我就直接送死了，清晰度调的也比较低，看着会比较难受。

可以自己打开玩一下 -> view online demo

勇猛的兔子的疯狂奔跑小游戏_小游戏

2.游戏玩法

从这个（不是那么邪恶的）狼中拯救这个小家伙。它的启动非常缓慢，但是请不要上当，因为它会慢慢加速。你需要躲避障碍物，尽可能多的吃到胡萝卜来逃离这只邪恶的狼。

3.游戏截图

勇猛的兔子的疯狂奔跑小游戏_html_02

勇猛的兔子的疯狂奔跑小游戏_下载地址_03

4.代码展示

-> view online demo

HTML代码

<div id="world" />
<div id="gameoverInstructions">
  Game Over
</div>
<div id="dist">
    <div class="label">distance</div>
    <div id="distValue">000</div>
</div>

<div id="instructions">Click to jump<span class="lightInstructions"> — Grab the carrots / avoid the hedgehogs</span></div>


<div id="credits">
  <p><a href="https://codepen.io/Yakudoo/" target="blank">other codepens</a> | <a href="https://www.epic.net" target="blank">epic.net</a></p>
</div>

CSS代码

@import url('https:///css?family=Voltaire');


#world{
  position: absolute;
  width:100%;
  height: 100%;
  background-color: #dbe6e6;
  overflow: hidden;
}


#gameoverInstructions{
  position:absolute;
  font-family:'Voltaire', sans-serif;
  font-weight:bold;
  text-transform: uppercase;
  font-size:120px;
  text-align:center;
  color:#ffc5a2;
  opacity:0;
  left:50%;
  top:50%;
  width:100%;
  transform : translate(-50%,-100%);
  user-select: none;
  transition: all 500ms ease-in-out;

  &.show{
    opacity:1;
    transform : translate(-50%,-50%);
    transition: all 500ms ease-in-out;
  };
}


#dist{
  position:absolute;
  left:50%;
  top:50px;
  transform:translate(-50%,0%);
  user-select: none;  
}

.label{
  position:relative;
  font-family:'Voltaire', sans-serif;
  text-transform:uppercase;
  color:#ffa873;//100707;
  font-size:12px;
  letter-spacing:2px;
  text-align:center;
  margin-bottom:5px;
}


#distValue{
  position:relative;
  text-transform:uppercase;
  color:#dc5f45;//dc5f45;
  font-size:40px;
  font-family:'Voltaire';
  text-align:center;
}

#credits{
  position:absolute;
  width:100%;
  margin: auto;
  bottom:0;
  margin-bottom:20px;
  font-family:'Voltaire', sans-serif;
  color:#544027;
  font-size:12px;
  letter-spacing:0.5px;
  text-transform: uppercase;
  text-align : center;
  user-select: none;  
}
#credits a {
  color:#544027;

}

#credits a:hover {
  color:#dc5f45;
}

#instructions{
  position:absolute;
  width:100%;
  bottom:0;
  margin: auto;
  margin-bottom:50px;
  font-family:'Voltaire', sans-serif;
  color:#dc5f45;
  font-size:16px;
  letter-spacing:1px;
  text-transform: uppercase;
  text-align : center;
  user-select: none;
}
.lightInstructions {
  color:#5f9042;
}