1.运行效果
由于CSDN允许上传图片最大为5M，所以这里我就直接送死了，清晰度调的也比较低，看着会比较难受。
可以自己打开玩一下 -> view online demo
2.游戏玩法
从这个（不是那么邪恶的）狼中拯救这个小家伙。它的启动非常缓慢，但是请不要上当，因为它会慢慢加速。你需要躲避障碍物，尽可能多的吃到胡萝卜来逃离这只邪恶的狼。
3.游戏截图
4.代码展示
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://fonts.googleapis.com/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;
}
JS代码过长我就不放出来了
5.项目下载地址
1.CSDN积分下载
https://download.csdn.net/download/qq_44273429/14925883
2.关注公众号啦啦啦好想biu点什么回复 [兔兔] 免费获取
长按二维码获取
聪明的人已经关注作者了
后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩的小项目等等