我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
前言:
正逢新春，突然间想到做一个前端的小游戏 兔兔跳一跳 「兔了个兔」—— 兔兔跳一跳—— 原本我的想法是你将扮演一只可爱的兔子，在各种障碍物之间跳跃，这个游戏非常简单易上手，只需要点击屏幕来控制兔子跳跃。随着你玩的越多，你将会发现越来越难以掌握兔子的跳跃，并且你将面对越来越多的障碍。
有点像恐龙跳
现在写了个兔兔跳一跳的界面，待完成的是绑定键盘事件，实现完整版兔子跳一跳
HTML部分：
下面是一个兔子跳跃游戏的HTML代码片段。其中包含了兔子和鸡蛋的图形，以及一个加载界面。
<div class="canvas">
<div class="scrolling-area">
<div class="rabbit-main rabbit-floor rabbit-jump">
<div class="rabbit-body-part rabbit-body"></div>
<div class="rabbit-body-part rabbit-tail"></div>
<div class="rabbit-body-part rabbit-foot">
<div class="foot-cover"></div>
</div>
<div class="rabbit-body-part rabbit-head"></div>
<div class="rabbit-body-part rabbit-ear rabbit-ear-1">
<div class="ear-cover"></div>
</div>
<div class="rabbit-body-part rabbit-ear rabbit-ear-2">
<div class="ear-cover"></div>
</div>
</div>
<div class="egg-outer egg-1">
<div class="egg-line egg-line-1"></div>
<div class="egg-line egg-line-2"></div>
<div class="egg-line egg-line-3"></div>
<div class="egg-line egg-line-4"></div>
<div class="egg-line egg-line-5"></div>
</div>
<div class="egg-outer egg-2">
<div class="egg-line egg-line-1"></div>
<div class="egg-line egg-line-2"></div>
<div class="egg-line egg-line-3"></div>
<div class="egg-line egg-line-4"></div>
<div class="egg-line egg-line-5"></div>
</div>
<div class="egg-outer egg-3">
<div class="egg-line egg-line-1"></div>
<div class="egg-line egg-line-2"></div>
<div class="egg-line egg-line-3"></div>
<div class="egg-line egg-line-4"></div>
<div class="egg-line egg-line-5"></div>
</div>
<div class="egg-outer egg-4">
<div class="egg-line egg-line-1"></div>
<div class="egg-line egg-line-2"></div>
<div class="egg-line egg-line-3"></div>
<div class="egg-line egg-line-4"></div>
<div class="egg-line egg-line-5"></div>
</div>
</div>
<div class="ground">
</div>
</div>
<div class="loading" id="loading">
<h1>LOADING</h1>
</div>
下面是一段Sass（Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它可以帮助用户更加高效地编写CSS代码，并且可以提供更多的功能，比如变量、嵌套、混合等。） 代码，用于布局和样式设置「兔了个兔」—— 兔兔跳一跳游戏的界面。它定义了一些颜色变量，并使用了这些变量来设置背景颜色、字体等。这段代码还使用了 CSS3 的动画和变形属性，来制作兔子耳朵动态摆动的效果。
@charset "utf-8"
@import url(https://fonts.googleapis.com/css?family=Arvo)
$grey: #454545
$white: #fefefe
$blue: #7072ff
$green: #8aff70
$yellow: #fffe70
$orange: #ffab61
$red: #f16565
body
background-color: $grey
width: 100vw
height: 100vh
position: relative
overflow: hidden
.canvas
position: relative
width: 60vw
height: 15vw
//background-color: green
margin: 0 auto
top: 0%
overflow: hidden
.loading
margin: 0 auto
position: relative
width: 80vw
height: 20px
top: 0%
h1
width: 100%
text-align: center
color: $white
font-family: 'Arvo'
font-size: 30pt
height: 100%
letter-spacing: 6px
.scrolling-area
width: 100%
height: 98%
//background-color: blue
position: relative
.ground
width: 100%
height: 2%
z-index: 2
position: relative
//background-color: red
background-color: $white
.rabbit-main
width: 15%
height: 60%
//background-color: purple
margin: 0 auto
transform: translate3d(0,0,0) !important
position: relative
z-index: 0
.rabbit-body-part
position: absolute
background-color: $white
.rabbit-main.rabbit-floor
top: 40%
.rabbit-body
width: 60%
height: 60%
border-radius: 100%
top: 35%
left: 10%
z-index: 2
transform: translate3d(0,0,0) !important
.rabbit-tail
width: 13%
height: 13%
border-radius: 100%
top: 80%
left: 9%
transform: translate3d(0,0,0) !important
.rabbit-foot
width: 31%
height: 17%
border-radius: 100%
top: 88%
left: 38%
position: relative !important
transform: translate3d(0,0,0) !important
.foot-cover
background-color: $grey
height: 75%
width: 110%
top: 40%
position: relative !important
z-index: 0 !important
.rabbit-head
width: 32%
height: 32%
border-radius: 100%
top: 21%
left: 52%
z-index: 2 !important
transform: translate3d(0,0,0) !important
.rabbit-ear
width: 36%
height: 25%
border-radius: 100%
top: 0%
left: 0%
.ear-cover
background-color: $grey
height: 65%
width: 110%
top: 40%
position: relative !important
z-index: 0 !important
.rabbit-ear-1
transform: rotate(-146deg) translate3d(0,0,0)
left: 38%
top: 8%
animation: ear-1-twitch
animation-duration: 1s
animation-iteration-count: infinite
.rabbit-ear-2
transform: rotate(-130deg) translate3d(0,0,0)
left: 45%
top: 5%
animation: ear-2-twitch
animation-duration: 1s
animation-iteration-count: infinite
@keyframes ear-1-twitch
0%
transform: rotate(-146deg)
25%
transform: rotatate(-120deg)
50%
transform: rotate(-135deg)
75%
transform: rotate(-115deg)
90%
tranform: rotate(-146deg)
@keyframes ear-2-twitch
0%
transform: rotate(-130deg)
25%
transform: rotatate(-110deg)
50%
transform: rotate(-120deg)
75%
transform: rotate(-115deg)
90%
transform: rotate(-146deg)
.egg-outer.egg-1
transform: rotate(-20deg)
animation: egg-scroll linear
animation-duration: 4s
animation-iteration-count: infinite
.egg-outer.egg-2
transform: rotate(35deg)
animation: egg-scroll linear
animation-duration: 4s
animation-iteration-count: infinite
animation-delay: 1s
.egg-outer.egg-3
transform: rotate(-15deg)
animation: egg-scroll linear
animation-duration: 4s
animation-iteration-count: infinite
animation-delay: 2s
.egg-outer.egg-4
transform: rotate(20deg)
animation: egg-scroll linear
animation-duration: 4s
animation-iteration-count: infinite
animation-delay: 3s
.egg-outer
width: 5%
height: 30%
background-color: red
position: absolute
left: 110%
border-radius: 50%/60% 60% 40% 40%
top: 70%
overflow: hidden
.egg-line
width: 120%
height: 20%
background-color: white
.egg-line-1
background-color: $red
.egg-line-2
background-color: $orange
.egg-line-3
background-color: $yellow
.egg-line-4
background-color: $green
.egg-line-5
background-color: $blue
@keyframes egg-scroll
0%
left: 110%
40%
left: 30%
60%
left: 0%
61%
left: -1%
65%
left: -10%
100%
left: -20%
.rabbit-main.rabbit-jump
animation: rabbit-jump
animation-duration: 1s
animation-iteration-count: infinite
.rabbit-head
animation: rabbit-jump-head
animation-duration: 1s
animation-iteration-count: infinite
.rabbit-foot
animation: rabbit-jump-foot
animation-duration: 1s
animation-iteration-count: infinite
.rabbit-body
animation: rabbit-jump-body
animation-duration: 1s
animation-iteration-count: infinite
.rabbit-tail
animation: rabbit-jump-tail
animation-duration: 1s
animation-iteration-count: infinite
.rabbit-ear-1
animation: rabbit-jump-ear-1
animation-duration: 1s
animation-iteration-count: infinite
.rabbit-ear-2
animation: rabbit-jump-ear-2
animation-duration: 1s
animation-iteration-count: infinite
@keyframes rabbit-jump
0%
top: 40%
30%
top: 0%
100%
top: 40%
@keyframes rabbit-jump-foot
0%
transform: rotate(0deg)
left: 38%
top: 88%
10%
transform: rotate(30deg)
left: 25%
top: 94%
100%
transform: rotate(0deg)
left: 38%
top: 88%
@keyframes rabbit-jump-tail
0%
top: 80%
left: 9%
5%
top: 76%
left: 6%
10%
top: 73%
left: 4.5%
15%
top: 68%
left: 3%
25%
top: 64%
left: 2%
40%
top: 68%
left: 3%
60%
top: 73%
left: 4.5%
80%
top: 77%
left: 6%
100%
top: 80%
left: 9%
@keyframes rabbit-jump-head
0%
top: 21%
left: 52%
20%
top: 28%
left: 58%
100%
top: 21%
left: 52%
@keyframes rabbit-jump-ear-1
0%
transform: rotate(-146deg) translate3d(0,0,0)
left: 38%
top: 8%
10%
transform: rotate(-150deg)
left: 40%
top: 10%
100%
transform: rotate(-146deg) translate3d(0,0,0)
left: 38%
top: 8%
@keyframes rabbit-jump-ear-2
0%
transform: rotate(-130deg) translate3d(0,0,0)
left: 45%
top: 5%
10%
transform: rotate(-140deg)
left: 43%
top: 7%
100%
transform: rotate(-130deg) translate3d(0,0,0)
left: 45%
top: 5%
.dot-red
color: $red
font-family: 'Arvo'
.dot-yellow
color: $yellow
font-family: 'Arvo'
.dot-green
color: $green
font-family: 'Arvo'
下面是一段 JavaScript 代码，用于在游戏加载过程中在 “LOADING” 文字后面添加点。它定义了一些函数，每个函数都用于添加不同颜色的点，并在给定的时间间隔内调用这些函数。最后，它设置了一个 setInterval 函数来循环调用 timedDots 函数，这样就可以在不断循环中添加点。
//For adding dots to loading
window.onload = function(){
var loading = document.getElementById("loading");
function addRedDot(i){
i.innerHTML = "<h1>LOADING<span class='dot-red'>.</span></h1>";
}
function addYellowDot(i){
i.innerHTML = "<h1>LOADING<span class='dot-red'>.</span><span class='dot-yellow'>.</span></h1>";
}
function addGreenDot(i){
i.innerHTML = "<h1>LOADING<span class='dot-red'>.</span><span class='dot-yellow'>.</span><span class='dot-green'>.</span></h1>";
}
function removeDots(i) {
i.innerHTML = "<h1>LOADING</h1>";
}
function timedDots(i) {
setTimeout(function(){
addRedDot(i)
}, 1000);
setTimeout(function(){
addYellowDot(i)
}, 2000);
setTimeout(function(){
addGreenDot(i)
}, 3000);
setTimeout(function(){
removeDots(i)
}, 4000);
}
setInterval(function(){
timedDots(loading)
}, 4000);
}
