源代码如下
1.游戏基本操作
用空格键攻击，kill the king。
css样式源码
@charset "UTF-8";
@font-face {
font-family: "AddLGBitmap09";
src: url("https://assets.codepen.io/217233/AddLGBitmap09.woff2") format("woff2"), url("https://assets.codepen.io/217233/AddLGBitmap09.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
background: black;
color: white;
margin: 0;
padding: 0;
overflow: hidden;
font-family: "AddLGBitmap09";
}
.game_lose,
.game_win {
position: absolute;
background: rgba(14, 3, 13, 0.94);
z-index: 99999;
width: 100%;
height: 100%;
text-align: center;
display: none;
}
.game_lose.show,
.game_win.show {
display: block;
}
.game_lose .inner,
.game_win .inner {
position: absolute;
width: 500px;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
.game_lose .inner p,
.game_win .inner p {
font-size: 12px;
line-height: 20px;
}
#app {
background: url("https://assets.codepen.io/217233/ssBg.png");
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
position: relative;
transition: all 0.1s;
position: relative;
}
@-webkit-keyframes shake {
0% {
left: -3px;
top: 3px;
}
20% {
left: 3px;
top: -3px;
}
40% {
left: 3px;
top: 3px;
}
60% {
left: -3px;
top: -3px;
}
80% {
left: 3px;
top: 3px;
}
100% {
left: 0;
top: 0px;
}
}
@keyframes shake {
0% {
left: -3px;
top: 3px;
}
20% {
left: 3px;
top: -3px;
}
40% {
left: 3px;
top: 3px;
}
60% {
left: -3px;
top: -3px;
}
80% {
left: 3px;
top: 3px;
}
100% {
left: 0;
top: 0px;
}
}
#app.pressed {
-webkit-animation: shake 0.1s forwards;
animation: shake 0.1s forwards;
}
.game_intro {
background: rgba(14, 3, 13, 0.94);
width: 100%;
height: 100%;
position: fixed;
z-index: 99;
transition: all 0.3s;
}
.game_intro.gamestarted {
opacity: 0;
pointer-events: none;
}
.game_intro__inner {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
width: 680px;
transform: translateY(-50%);
text-align: center;
transition: all 0.3s;
font-size: 12px;
line-height: 30px;
}
.game_intro__inner .begin {
text-align: center;
margin-top: 80px;
cursor: pointer;
transition: all 0.3s;
}
.game_intro__inner .begin:hover {
color: #76ece2;
}
.game_intro__inner .dialogue {
float: left;
width: 60%;
background: black;
color: white;
border-radius: 20px;
padding: 20px 31px;
position: relative;
}
.game_intro__inner p {
text-align: left;
clear: both;
}
.game_intro__inner span {
display: block;
color: #76ece2;
font-size: 9px;
text-align: left;
margin-bottom: -11px;
text-transform: uppercase;
}
.game_intro__inner .king {
float: right;
width: 140px !important;
}
.game_intro__inner.start {
transition: all 1s;
}
.game_intro__inner.start.gamestarted {
opacity: 0;
pointer-events: none;
}
.game_intro__inner .continue {
position: absolute;
z-index: 1;
cursor: pointer;
right: 20px;
font-size: 10px;
top: 175px;
transition: all 0.3s;
}
.game_intro__inner .continue:hover {
color: #76ece2;
}
.game_intro__inner.end {
opacity: 1;
pointer-events: all;
transition: all 1s 1s;
}
.game_intro__inner.end .continue {
opacity: 1;
transition: all 0.3s 6s;
}
.game_intro__inner.end.gamestarted {
opacity: 0;
}
.game_intro__inner.end.gamestarted .continue {
opacity: 0;
}
.game_intro__inner.gamestarted {
pointer-events: none;
}
.game_intro__inner img:nth-of-type(1) {
width: 400px;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
}
.game_intro__inner img:nth-of-type(2) {
position: relative;
left: 0px;
}
.game_intro__inner img:nth-of-type(2) {
cursor: pointer;
margin-top: 40px;
}
.game_inner__tooltip {
width: 390px;
margin: 0 auto;
text-align: left;
position: absolute;
top: calc(50% + 240px);
left: 0;
right: 0;
margin: auto;
opacity: 0;
transition: all 0.3s;
}
.game_inner__tooltip.active {
opacity: 1;
}
.game_inner__tooltip .smash {
width: 100%;
text-align: center;
margin-top: 23px;
font-size: 9px;
}
.game_inner__tooltip .space {
width: 390px;
margin-top: 50px;
height: 50px;
background: white;
position: relative;
top: 0;
border-radius: 6px;
box-shadow: 0 10px #d6d6d6;
-webkit-animation: press2 0.1s infinite;
animation: press2 0.1s infinite;
}
@-webkit-keyframes press2 {
0% {
box-shadow: 0 10px #d6d6d6;
top: 0px;
}
100% {
box-shadow: 0 0px #d6d6d6;
top: 10px;
}
}
@keyframes press2 {
0% {
box-shadow: 0 10px #d6d6d6;
top: 0px;
}
100% {
box-shadow: 0 0px #d6d6d6;
top: 10px;
}
}
.game_inner__footer {
position: fixed;
left: 50px;
font-size: 7px;
z-index: 2;
bottom: 40px;
width: calc(100% - 100px);
}
.game_inner__footer .madeby {
position: relative;
top: 50px;
}
.game_inner__footer .resources {
float: right;
}
.game_inner__footer .resources div {
margin: 0 0 10px 0;
font-size: 12px;
}
.game_inner__footer .resources div img {
position: relative;
top: 3px;
margin-right: 8px;
}
.game_inner__footer a {
color: #d0295f;
text-decoration: none;
}
.game_inner__left {
text-align: center;
float: left;
position: relative;
width: calc(100%);
height: 100vh;
}
.game_inner__left .buttons {
float: right;
padding: 50px;
}
.game_inner__left .buttons img {
width: 32px;
float: left;
margin-left: 12px;
cursor: pointer;
}
.game_inner__left .buttons img.off {
opacity: 0.3;
}
.game_inner__left .logo {
padding: 50px;
float: left;
}
.game_inner__left .ui {
width: 100%;
}
.game_inner__left .ui_spaces {
font-size: 24px;
margin-bottom: 7px;
}
.game_inner__left .ui_progress {
width: 500px;
margin: 0 auto;
text-align: left;
position: absolute;
top: calc(50% - 300px);
left: 0;
right: 0;
margin: auto;
}
.game_inner__left .ui_progress__stage {
font-size: 9px;
margin-bottom: 11px;
}
.game_inner__left .ui_progress__bar {
width: 100%;
position: relative;
}
.game_inner__left .ui_progress__bar .inner {
background: url("https://assets.codepen.io/217233/ktkProgressInner.png");
height: 7px;
width: calc(100% - 6px);
background-size: 494px 7px;
position: absolute;
top: 10px;
z-index: 1;
left: 3px;
transition: all 0.4s;
max-width: 494px;
}
.game_inner__left .ui_progress__bar .outer {
background: url("https://assets.codepen.io/217233/ktkProgressOuter.png");
height: 12px;
width: 100%;
background-size: 500px 12px;
position: absolute;
top: 8px;
}
.game_inner__left .ui_progress__icons {
display: flex;
justify-content: space-between;
position: relative;
z-index: 1;
padding: 0 14px;
}
.game_inner__left .ui_progress__icons .icon {
flex-grow: 1;
text-align: center;
}
.game_inner__left .ui_progress__icons .icon_bg {
width: 28px;
height: 28px;
margin: auto;
background: url("https://assets.codepen.io/217233/ktkStageLocked.png");
}
.game_inner__left .ui_progress__icons .icon_bg.active:after {
width: 10px;
height: 10px;
content: "▲";
display: block;
position: relative;
top: 31px;
left: 9px;
font-size: 10px;
}
.game_inner__left .ui_progress__icons .icon_bg.complete {
background: url("https://assets.codepen.io/217233/ktkStageComplete.png");
}
.game_inner__left .ui_presses {
font-size: 12px;
opacity: 0.4;
}
.game_inner__left .center {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
width: 390px;
}
.game_inner__left .center .player_sprite,
.game_inner__left .center .enemy_sprite {
width: 150px;
height: 150px;
-webkit-animation: idle 0.5s steps(7, end) infinite;
animation: idle 0.5s steps(7, end) infinite;
transform: scale(5);
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
}
.game_inner__left .center .player_sprite.pressed,
.game_inner__left .center .enemy_sprite.pressed {
-webkit-animation: attack 0.15s steps(3, end);
animation: attack 0.15s steps(3, end);
}
.game_inner__left .center .characters {
width: 400px;
margin: 80px auto;
}
.game_inner__left .center .characters .stand {
width: 100%;
height: 100px;
background: #141627;
border-radius: 100%;
position: absolute;
bottom: -20px;
left: 9px;
}
.game_inner__left .center .characters .player {
z-index: 1;
position: relative;
left: 10px;
top: 60px;
transition: all 1s 0.3s;
}
.game_inner__left .center .characters .player.run {
left: 400px;
opacity: 0;
}
.game_inner__left .center .characters .player .stats {
position: absolute;
left: -110px;
text-align: left;
transform: translateY(4px);
font-size: 8px;
-webkit-animation: health 2s infinite;
animation: health 2s infinite;
}
.game_inner__left .center .characters .player .stats span {
font-size: 6px;
opacity: 0.75;
display: block;
padding-left: 24px;
padding-top: 4px;
}
.game_inner__left .center .characters .player .stats div {
margin-bottom: 10px;
}
.game_inner__left .center .characters .player .stats div img {
position: relative;
margin-right: 4px;
top: 3px;
}
.game_inner__left .center .characters .enemy {
position: relative;
top: -134px;
left: -40px;
transition: all 0.3s;
}
.game_inner__left .center .characters .enemy.run {
opacity: 0;
}
.game_inner__left .center .characters .enemy,
.game_inner__left .center .characters .player {
width: 50%;
float: left;
}
.game_inner__left .center .enemy {
width: 100px;
}
.game_inner__left .center .enemy_hit, .game_inner__left .center .enemy_gold, .game_inner__left .center .enemy_xp {
position: absolute;
left: 98px;
top: 40px;
z-index: 1;
opacity: 0;
}
.game_inner__left .center .enemy_hit.pressed, .game_inner__left .center .enemy_gold.pressed, .game_inner__left .center .enemy_xp.pressed {
-webkit-animation: hit 0.15s forwards;
animation: hit 0.15s forwards;
}
.game_inner__left .center .enemy_gold.killed {
-webkit-animation: hit 0.3s 0.1s forwards;
animation: hit 0.3s 0.1s forwards;
}
.game_inner__left .center .enemy_xp {
left: 0;
right: 0;
}
.game_inner__left .center .enemy_xp.killed {
-webkit-animation: hit 0.3s 0.12s forwards;
animation: hit 0.3s 0.12s forwards;
}
.game_inner__left .center .enemy_sprite {
background: url("https://assets.codepen.io/217233/ssEnemyIdle_1.png");
-webkit-animation: none;
animation: none;
width: 200px;
-webkit-animation: enemyIdle 0.5s steps(7, end) infinite;
animation: enemyIdle 0.5s steps(7, end) infinite;
transform: scaleX(-5) scaleY(5);
position: relative;
}
.game_inner__left .center .enemy_sprite.boss {
background: url("https://assets.codepen.io/217233/ktkTrostIdle.png");
-webkit-animation: bossIdle 1s steps(7, end) infinite;
animation: bossIdle 1s steps(7, end) infinite;
width: 160px;
top: 10px;
left: 40px;
height: 105px;
filter: hue-rotate(0deg) !important;
}
.game_inner__left .center .enemy_sprite.boss.pressed {
-webkit-animation: bossHit 0.15s steps(3, end);
animation: bossHit 0.15s steps(3, end);
}
.game_inner__left .center .enemy_sprite.boss.killed {
-webkit-animation: bossKilled 0.8s steps(5, end);
animation: bossKilled 0.8s steps(5, end);
}
.game_inner__left .center .enemy_sprite.pressed {
-webkit-animation: enemyHit 0.15s steps(3, end);
animation: enemyHit 0.15s steps(3, end);
}
.game_inner__left .center .enemy_sprite.killed {
-webkit-animation: enemyKilled 0.8s steps(5, end);
animation: enemyKilled 0.8s steps(5, end);
}
.game_inner__left .center .enemy_health {
width: 190px;
height: 12px;
position: absolute;
left: 0;
font-size: 13px;
right: 0;
line-height: 39px;
border-radius: 10px;
top: 10px;
padding-top: 0px;
margin: auto;
background: url(https://assets.codepen.io/217233/ktkEnemyHealth.png);
-webkit-animation: health 2s infinite;
animation: health 2s infinite;
}
.game_inner__left .center .enemy_health_stats {
font-size: 7px;
padding-top: 6px;
text-align: left;
}
.game_inner__left .center .enemy_health_stats .name {
float: left;
}
.game_inner__left .center .enemy_health_stats .level {
float: right;
}
.game_inner__left .center .enemy_health_inner {
position: absolute;
left: 4px;
top: 3px;
height: 5px;
border-radius: 10px;
transition: all 0.1s;
max-width: 182px;
background: url(https://assets.codepen.io/217233/ktkEnemyHealthInner.png);
}
.game_inner__left .spaceBar {
width: 390px;
margin-top: 50px;
height: 50px;
background: white;
position: relative;
top: 0;
border-radius: 6px;
box-shadow: 0 10px #d6d6d6;
-webkit-animation: press2 0.1s forwards;
animation: press2 0.1s forwards;
}
@-webkit-keyframes health {
0% {
top: 10px;
}
50% {
top: 13px;
}
100% {
top: 10px;
}
}
@keyframes health {
0% {
top: 10px;
}
50% {
top: 13px;
}
100% {
top: 10px;
}
}
@-webkit-keyframes idle {
0% {
background: url("https://assets.codepen.io/217233/ssIdle.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ssIdle.png");
background-position: 100% 0;
}
}
@keyframes idle {
0% {
background: url("https://assets.codepen.io/217233/ssIdle.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ssIdle.png");
background-position: 100% 0;
}
}
@-webkit-keyframes attack {
0% {
background: url("https://assets.codepen.io/217233/ssAttack1.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ssAttack1.png");
background-position: 100% 0;
}
}
@keyframes attack {
0% {
background: url("https://assets.codepen.io/217233/ssAttack1.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ssAttack1.png");
background-position: 100% 0;
}
}
@-webkit-keyframes enemyIdle {
0% {
background: url("https://assets.codepen.io/217233/ssEnemyIdle_1.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ssEnemyIdle_1.png");
background-position: 100% 0;
}
}
@keyframes enemyIdle {
0% {
background: url("https://assets.codepen.io/217233/ssEnemyIdle_1.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ssEnemyIdle_1.png");
background-position: 100% 0;
}
}
@-webkit-keyframes bossIdle {
0% {
background: url("https://assets.codepen.io/217233/ktkTrostIdle.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ktkTrostIdle.png");
background-position: 100% 0;
}
}
@keyframes bossIdle {
0% {
background: url("https://assets.codepen.io/217233/ktkTrostIdle.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ktkTrostIdle.png");
background-position: 100% 0;
}
}
@-webkit-keyframes bossHit {
0% {
background: url("https://assets.codepen.io/217233/ktkTrostHit.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ktkTrostHit.png");
background-position: 100% 0;
}
}
@keyframes bossHit {
0% {
background: url("https://assets.codepen.io/217233/ktkTrostHit.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ktkTrostHit.png");
background-position: 100% 0;
}
}
@-webkit-keyframes bossKilled {
0% {
background: url("https://assets.codepen.io/217233/ktkTrostKilled.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ktkTrostKilled.png");
background-position: 100% 0;
}
}
@keyframes bossKilled {
0% {
background: url("https://assets.codepen.io/217233/ktkTrostKilled.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ktkTrostKilled.png");
background-position: 100% 0;
}
}
@-webkit-keyframes enemyHit {
0% {
background: url("https://assets.codepen.io/217233/ssEnemyHit_1.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ssEnemyHit_1.png");
background-position: 100% 0;
}
}
@keyframes enemyHit {
0% {
background: url("https://assets.codepen.io/217233/ssEnemyHit_1.png");
background-position: 0% 0;
}
100% {
background: url("https://assets.codepen.io/217233/ssEnemyHit_1.png");
background-position: 100% 0;
}
}
@-webkit-keyframes enemyKilled {
0% {
background: url("https://assets.codepen.io/217233/ssEnemyDeath_1.png");
background-position: 0% 0;
opacity: 1;
}
100% {
background: url("https://assets.codepen.io/217233/ssEnemyDeath_1.png");
background-position: 100% 0;
opacity: 0;
}
}
@keyframes enemyKilled {
0% {
background: url("https://assets.codepen.io/217233/ssEnemyDeath_1.png");
background-position: 0% 0;
opacity: 1;
}
100% {
background: url("https://assets.codepen.io/217233/ssEnemyDeath_1.png");
background-position: 100% 0;
opacity: 0;
}
}
@-webkit-keyframes hit {
0% {
top: 40px;
opacity: 0;
}
100% {
top: -30px;
opacity: 1;
}
}
@keyframes hit {
0% {
top: 40px;
opacity: 0;
}
100% {
top: -30px;
opacity: 1;
}
}
@-webkit-keyframes hit-1 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 387px;
bottom: 96px;
opacity: 0;
}
}
@keyframes hit-1 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 387px;
bottom: 96px;
opacity: 0;
}
}
@-webkit-keyframes hit-2 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 470px;
bottom: 81px;
opacity: 0;
}
}
@keyframes hit-2 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 470px;
bottom: 81px;
opacity: 0;
}
}
@-webkit-keyframes hit-3 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 114px;
bottom: 30px;
opacity: 0;
}
}
@keyframes hit-3 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 114px;
bottom: 30px;
opacity: 0;
}
}
@-webkit-keyframes hit-4 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 262px;
bottom: 36px;
opacity: 0;
}
}
@keyframes hit-4 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 262px;
bottom: 36px;
opacity: 0;
}
}
@-webkit-keyframes hit-5 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 109px;
bottom: 95px;
opacity: 0;
}
}
@keyframes hit-5 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 109px;
bottom: 95px;
opacity: 0;
}
}
@-webkit-keyframes hit-6 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 100px;
bottom: 68px;
opacity: 0;
}
}
@keyframes hit-6 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 100px;
bottom: 68px;
opacity: 0;
}
}
@-webkit-keyframes hit-7 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 265px;
bottom: 1px;
opacity: 0;
}
}
@keyframes hit-7 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 265px;
bottom: 1px;
opacity: 0;
}
}
@-webkit-keyframes hit-8 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 86px;
bottom: 45px;
opacity: 0;
}
}
@keyframes hit-8 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 86px;
bottom: 45px;
opacity: 0;
}
}
@-webkit-keyframes hit-9 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 313px;
bottom: 89px;
opacity: 0;
}
}
@keyframes hit-9 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 313px;
bottom: 89px;
opacity: 0;
}
}
@-webkit-keyframes hit-10 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 438px;
bottom: 46px;
opacity: 0;
}
}
@keyframes hit-10 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 438px;
bottom: 46px;
opacity: 0;
}
}
@-webkit-keyframes hit-11 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 232px;
bottom: 6px;
opacity: 0;
}
}
@keyframes hit-11 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 232px;
bottom: 6px;
opacity: 0;
}
}
@-webkit-keyframes hit-12 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 397px;
bottom: 61px;
opacity: 0;
}
}
@keyframes hit-12 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 397px;
bottom: 61px;
opacity: 0;
}
}
@-webkit-keyframes hit-13 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 345px;
bottom: 100px;
opacity: 0;
}
}
@keyframes hit-13 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 345px;
bottom: 100px;
opacity: 0;
}
}
@-webkit-keyframes hit-14 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 476px;
bottom: 34px;
opacity: 0;
}
}
@keyframes hit-14 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 476px;
bottom: 34px;
opacity: 0;
}
}
@-webkit-keyframes hit-15 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 460px;
bottom: 61px;
opacity: 0;
}
}
@keyframes hit-15 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 460px;
bottom: 61px;
opacity: 0;
}
}
@-webkit-keyframes hit-16 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 87px;
bottom: 47px;
opacity: 0;
}
}
@keyframes hit-16 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 87px;
bottom: 47px;
opacity: 0;
}
}
@-webkit-keyframes hit-17 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 381px;
bottom: 2px;
opacity: 0;
}
}
@keyframes hit-17 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 381px;
bottom: 2px;
opacity: 0;
}
}
@-webkit-keyframes hit-18 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 320px;
bottom: 20px;
opacity: 0;
}
}
@keyframes hit-18 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 320px;
bottom: 20px;
opacity: 0;
}
}
@-webkit-keyframes hit-19 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 169px;
bottom: 3px;
opacity: 0;
}
}
@keyframes hit-19 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 169px;
bottom: 3px;
opacity: 0;
}
}
@-webkit-keyframes hit-20 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 469px;
bottom: 87px;
opacity: 0;
}
}
@keyframes hit-20 {
0% {
left: 0px;
bottom: 0px;
opacity: 1;
}
60% {
opacity: 1;
}
100% {
left: 469px;
bottom: 87px;
opacity: 0;
}
}
.game_inner__left .spaceBar.pressed {
-webkit-animation: press 0.05s forwards;
animation: press 0.05s forwards;
}
.game_inner__right {
float: right;
position: fixed;
width: 720px;
background: #160917;
left: 0;
right: 0;
border-radius: 10px;
border: 2px solid white;
z-index: 999;
top: 50%;
box-shadow: 0 0 0 1160px #0a0209d1;
margin: auto;
transform: translateY(-50%);
}
.game_inner__right p {
text-align: left;
font-size: 10px;
padding: 26px;
}
.game_inner__right .xp {
padding: 0 26px;
font-size: 12px;
}
.game_inner__right .nextPhase {
background: #73256a;
width: calc(100% - 52px);
margin: 0 26px 26px 26px;
text-align: center;
font-size: 12px;
padding: 20px 0;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 4px #3d074e;
}
.game_inner__right .upgrades {
padding: 24px;
}
.game_inner__right .upgrades h2 {
text-transform: capitalize;
margin-bottom: 12px;
font-weight: normal;
font-size: 14px;
}
.game_inner__right .upgrades_upgrade .upgrade {
border: 2px solid white;
padding: 12px;
border-radius: 6px;
opacity: 0.6;
transition: all 0.3s;
pointer-events: none;
position: relative;
margin-bottom: 6px;
font-size: 11px;
}
.game_inner__right .upgrades_upgrade .upgrade:hover {
background: #ffffff0f;
padding: 12px 12px 12px 20px;
}
.game_inner__right .upgrades_upgrade .upgrade.max {
background: black;
pointer-events: none;
}
.game_inner__right .upgrades_upgrade .upgrade.max:after {
content: "max";
display: block;
position: absolute;
left: 0;
right: 0;
text-align: center;
margin: auto;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-transform: uppercase;
}
.game_inner__right .upgrades_upgrade .upgrade.max div {
opacity: 0.12;
}
.game_inner__right .upgrades_upgrade .upgrade.bought {
pointer-events: none !important;
background: green;
opacity: 0.2 !important;
}
.game_inner__right .upgrades_upgrade .upgrade .name {
font-size: 11px;
margin-bottom: 5px;
text-transform: uppercase;
}
.game_inner__right .upgrades_upgrade .upgrade .description {
font-size: 8px;
opacity: 0.5;
margin-bottom: 4px;
}
.game_inner__right .upgrades_upgrade .upgrade .cost {
font-size: 8px;
color: red;
transition: all 0.3s;
margin-bottom: 3px;
}
.game_inner__right .upgrades_upgrade .upgrade .level {
font-size: 8px;
position: absolute;
right: 12px;
bottom: 12px;
}
.game_inner__right .upgrades_upgrade .upgrade .effect {
font-size: 8px;
}
.game_inner__right .upgrades_upgrade .upgrade.available {
opacity: 1;
pointer-events: all;
cursor: pointer;
}
.game_inner__right .upgrades_upgrade .upgrade.available .cost {
color: green;
}
.timer {
width: 128px;
margin: 0 auto;
text-align: left;
position: absolute;
top: calc(50% - 400px);
left: 4px;
right: 0;
font-size: 14px;
margin: auto;
}
.timer_inner {
position: relative;
top: -40px;
text-align: center;
}
.timer_inner div {
display: inline-block;
width: 28px;
position: relative;
margin: 0 3px 0;
}
.timer_inner div:after {
display: block;
content: ":";
position: absolute;
right: -11px;
top: 50%;
transform: translateY(-50%);
}
.timer_inner .ms {
font-size: 9px;
opacity: 0.7;
width: 22px;
}
.timer_inner .ms:after {
display: none;
}html源码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="google-site-verification" content="i3bVXD3ywVilJt3b0Denbr2n41les3p8ciIldduw4X0" />
<title>海拥 | 杀死国王</title>
<link rel="icon" type="image/x-icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg"/>
<meta name="keywords" content="杀死国王" />
<meta name="description" content="杀死国王——游戏——海拥;立志打造一个拥有100个小游戏的摸鱼网站。Made By Haiyong，技术支持——海拥" />
<meta name="author" content="海拥(http://haiyong.site)" />
<meta name="copyright" content="海拥(http://haiyong.site)" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div :class="{'pressed': pressed}" id='app'>
<audio controls='' crossorigin='anonymous' style='display: none;'>
<source src='https://assets.codepen.io/217233/ktkBgAudio.mp3' type='audio/mp3'>
</audio>
<div class='game'>
<div :class="{'show': gameover}" class='game_lose'>
<div class='inner'>
<h1>你没时间了！</h1>
<p>特罗斯特国王获胜,刷新以重试。</p>
<p>
你可以
<a href='https://github.com/wanghao221/moyu/'>在 Github 上关注我</a>
获取更多好玩的游戏
</p>
</div>
</div>
<div :class="{'show': gamewin}" class='game_win'>
<div class='inner'>
<h1>你赢了！</h1>
<p>特罗斯特国王被杀,恭喜！</p>
<p>
你可以
<a href='https://github.com/wanghao221/moyu/'>在 Github 上关注我</a>
获取更多好玩的游戏
</p>
</div>
</div>
<div :class="{'gamestarted': gameStarted}" class='game_intro'>
<div :class="{'gamestarted': introClicked}" class='game_intro__inner start'>
<img src='https://assets.codepen.io/217233/ktkLogo.png'>
<br>
<p @click='introClicked = !introClicked, audioController.play("crushyou")' class='begin'>BEGIN GAME</p>
</div>
<div :class="{'gamestarted': !introClicked}" class='game_intro__inner end'>
<div class='dialogue'>
<span>特罗斯特王</span>
<p>哈哈哈，你真的以为你能打败我！？ 我的人会粉碎你，小屁孩。</p>
<p @click='introClicked = !introClicked, startGame()' class='continue'>Continue 点击继续</p>
</div>
<img class='king' src='https://assets.codepen.io/217233/kingTrost.png'>
</div>
</div>
<div class='game_inner'>
<div :class="{'active': tooltip}" class='game_inner__tooltip'>
<div class='space'></div>
<div class='smash'>粉碎空格键！</div>
</div>
<div class='game_inner__footer'>
<div class='madeby'>
Made by
<a href='http://haiyong.site' target='_blank'>Hai Yong</a>
</div>
<div class='resources'>
<div class='ui_xp'>
<img src='https://assets.codepen.io/217233/ktkXpIxon.png'>
{{ xp }}xp
</div>
</div>
</div>
<div class='game_inner__left'>
<div class='buttons'>
<img :class="{'off': !audioController.sfxOn}" @click='audioController.sfxOn = !audioController.sfxOn' src='https://assets.codepen.io/217233/ktkSfxButton.png'>
<img :class="{'off': muteBg}" @click='toggleBg()' src='https://assets.codepen.io/217233/ktkBgButton.png'>
</div>
<div class='logo'>
<img src='https://assets.codepen.io/217233/ktkLogo.png'>
</div>
<div class='timer'>
<img src='https://assets.codepen.io/217233/ktkTimerBg.png'>
<div class='timer_inner'>
<div class='minutes'>
{{ minutes }}
</div>
<div class='seconds'>
{{ seconds }}
</div>
<div class='ms'>
{{ ms }}
</div>
</div>
</div>
<div class='ui'>
<div class='ui_progress'>
<div class='ui_progress__stage'>
STAGE {{ stage }}
</div>
<div class='ui_progress__bar'>
<div :style='{width: `${((500 / enemiesPerStage) * (enemiesDefeated + 1)) - ((500 / enemiesPerStage) / 2)}px`}' class='inner'></div>
<div class='outer'></div>
</div>
<div class='ui_progress__icons'>
<div :key='enemies' class='icon' v-for='(enemies, index) in enemiesPerStage'>
<div :class="{'complete': index < enemiesDefeated, 'active': index == enemiesDefeated}" class='icon_bg'></div>
</div>
</div>
</div>
</div>
<div class='center'>
<div class='characters'>
<div :class="{'run': stageComplete}" class='player'>
<div class='stats'>
<div class='ui_strength'>
<img src='https://assets.codepen.io/217233/ktkStrengthIcon.png'>
{{ strength }} STR
<br>
</div>
<div class='ui_intelligence'>
<img src='https://assets.codepen.io/217233/ktkKnowledgeIcon.png'>
{{ intelligence }} INT
</div>
<div class='ui_speed'>
<img src='https://assets.codepen.io/217233/ktkSpeedIcon.png'>
{{ speed }} SPD
</div>
</div>
<div :class="{'pressed': pressed}" class='player_sprite'></div>
</div>
<div :class="{'run': stageComplete}" class='enemy'>
<div :class="{'pressed': pressed, 'killed' : enemyKilled, 'boss' : boss}" :style='{filter: `hue-rotate(${80 * (stage - 1)}deg)`}' class='enemy_sprite'></div>
<div :class="{'pressed': pressed}" class='enemy_hit'>
{{ damage }}
</div>
<div :class="{'killed': enemyKilled}" class='enemy_xp'>
<img src='https://assets.codepen.io/217233/ktkXpIxon.png'>
{{ xpGained }}xp
</div>
<div class='enemy_health'>
<div class='enemy_health_stats'>
<div class='name'>
{{ enemy.name }}
</div>
<div class='level'>
HP: {{ enemy.health }}
</div>
</div>
<div :style='{width: `${100 * (enemy.health / enemy.initHealth)}%`}' class='enemy_health_inner'></div>
</div>
</div>
</div>
</div>
</div>
<div class='game_inner__right' v-if='shoppingPhase'>
<div class='timer'>
<img src='https://assets.codepen.io/217233/ktkTimerBg.png'>
<div class='timer_inner'>
<div class='minutes'>
{{ minutes }}
</div>
<div class='seconds'>
{{ seconds }}
</div>
<div class='ms'>
{{ ms }}
</div>
</div>
</div>
<p>将您的金币和经验用于升级</p>
<div class='xp'>
<img src='https://assets.codepen.io/217233/ktkXpIxon.png'>
{{ xp }}xp
</div>
<div class='upgrades'>
<div :key='upgrades.name' class='upgrades_upgrade' v-for='(upgrade, index) in upgrades'>
<h2>{{ index != 0 ? upgrade.type != upgrades[index - 1].type ? upgrade.type : '' : 'Skills' }}</h2>
<div :class="{'max' : upgrade.level > upgrade.maxLevel, 'available': upgrade.type == 'stat' ? xp >= upgrade.cost : gold >= upgrade.cost, 'bought': upgrade.bought}" @click='buy(index, upgrade.type, upgrade.stat);audioController.play("upgrade")' @mouseenter='audioController.play("hover")' class='upgrade'>
<div class='name'>{{ upgrade.names }}</div>
<div class='description'>{{ upgrade.descriptions }}</div>
<div class='cost'>
Cost: {{ upgrade.cost }} {{ upgrade.type == "stat" ? 'xp' : 'gold' }}
</div>
<div class='effect'>
+{{ upgrade.type == "stat" ? upgrade.increment : upgrade.damage }} {{ upgrade.metric }}
</div>
<div class='level' v-if="upgrade.type == 'stat'">
Level: {{ upgrade.level }}
</div>
</div>
</div>
</div>
<div @click='exitShoppingPhase' class='nextPhase'>下一关</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?a9430a37066911650e26adadcc42798a";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script src="js/script.js"></script>
</html>
由于代码太多了，在资源绑定下载吧。
