1.运行效果
由于CSDN允许上传图片最大为5M,所以这里我就直接送死了,清晰度调的也比较低,看着会比较难受。
可以自己打开玩一下 -> view online demo
2.游戏玩法
从这个(不是那么邪恶的)狼中拯救这个小家伙。它的启动非常缓慢,但是请不要上当,因为它会慢慢加速。你需要躲避障碍物,尽可能多的吃到胡萝卜来逃离这只邪恶的狼。
3.游戏截图
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://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; }
5.项目下载地址
1.CSDN积分下载
https://download.csdn.net/download/qq_44273429/14925883