勇敢なウサギのクレイジーなランニングゲーム
1.操作効果
CSDNでは最大5Mの画像をアップロードできるため、ここで直接死にます。定義は比較的低く、見るのがより不快になります。
あなたは自分で開いて遊ぶことができます->オンラインデモを見る
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/149258832
。公式アカウントの啦啦啦好想biu点什么返信に従う[兔兔]無料アクセス
QRコードを長押しして取得します
賢い人たちが作者に注目してきましたが
、今後も同様の無料で楽しいH5ゲーム、Javaゲーム、楽しい小さなプロジェクトなどを更新していきます。