当前位置： 首页 > article >正文

h5小游戏5--杀死国王（附源码）

article 2024/10/30 20:28:07

源代码如下

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>

由于代码太多了，在资源绑定下载吧。 


http://www.kler.cn/a/372011.html

相关文章：

  • Python虚拟显示器pyvirtualdisplay
  • 3D Gaussian Splatting代码详解（三）：模型构建，实现3D 高斯椭球体的克隆和分裂
  • 从0学习React（10）
  • 3D Gaussian Splatting代码详解（一）：模型训练、数据加载
  • 我谈Canny算子
  • gin入门教程（8）：渲染与静态文件
  • three.js 纹理（Texture）、深度纹理（DepthTexture）、视频纹理（VideoTexture）
  • Flutter主题最佳实践
  • 力扣1381:设计一个支持增量操作的栈
  • 【快速小项目】蛋糕商城首页展示
  • 大数据-193 Apache Tez - DAG 作业计算框架 核心解释 工作原理 配置集成
  • 力扣91~95题
  • Android 获取OAID
  • [BUG]warn(f“Failed to load image Python extension: {e}“)的解决办法
  • linux服务器LAMP的搭建
  • 深入理解Linux内核网络（九）：容器网络虚拟化
  • 国标GB28181摄像机接入EasyGBS国标GB28181视频平台的亮点深入分析
  • ubantu系统之实现Ubuntu与Windows之间的复制粘贴
  • 计算机低能儿从0刷leetcode | 31.下一个排列
  • 重学SpringBoot3-Spring WebFlux之HttpHandler和HttpServer
  • Flux-IP-Adapter-V2版本发布，效果实测！是惊喜还是意外？
  • 【PythonWeb开发】Flask-RESTful风格编程
  • itertools模块的combinations很牛
  • 基于Springboot的在线考试与学习交流平台的设计与实现
  • Spring Boot：打造智能植物健康监测平台
  • QT找不到ffmpeg链接库解决方法