「兔了个兔」 |
您所在的位置：网站首页 › 兔的各种字体下载 › 「兔了个兔」 |
「兔了个兔」
|
我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛 前言:正逢新春，突然间想到做一个前端的小游戏 兔兔跳一跳 「兔了个兔」—— 兔兔跳一跳—— 原本我的想法是你将扮演一只可爱的兔子，在各种障碍物之间跳跃，这个游戏非常简单易上手，只需要点击屏幕来控制兔子跳跃。随着你玩的越多，你将会发现越来越难以掌握兔子的跳跃，并且你将面对越来越多的障碍。 有点像恐龙跳
下面是一个兔子跳跃游戏的HTML代码片段。其中包含了兔子和鸡蛋的图形，以及一个加载界面。 LOADING下面是一段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 = "LOADING."; } function addYellowDot(i){ i.innerHTML = "LOADING.."; } function addGreenDot(i){ i.innerHTML = "LOADING..."; } function removeDots(i) { i.innerHTML = "LOADING"; } 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); } 效果展示：
|
现在写了个兔兔跳一跳的界面，待完成的是绑定键盘事件，实现完整版兔子跳一跳
【本文地址】