Table of Content

Posts

Kill The King - Html Based Game

 

Kill For King / Vue - Html Based Game Is Fully Featured Browser Based Game Made With HTML Only. Hope You Guys Would Like This Game And Let's Go.



How To Use This Game:

  1. Install VS Code In Your SYSTEM.
  2. Create A New File In VS Code With name as killtheking.html
  3. Go On The Code Editor
  4. Paste The Code Given Further In The Article

Code:



<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - Kill The King - Vue / HTML game</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
@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: 461px;
    bottom: 33px;
    opacity: 0;
  }
}
@keyframes hit-1 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 461px;
    bottom: 33px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-2 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 377px;
    bottom: 35px;
    opacity: 0;
  }
}
@keyframes hit-2 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 377px;
    bottom: 35px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-3 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 268px;
    bottom: 68px;
    opacity: 0;
  }
}
@keyframes hit-3 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 268px;
    bottom: 68px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-4 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 182px;
    bottom: 98px;
    opacity: 0;
  }
}
@keyframes hit-4 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 182px;
    bottom: 98px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-5 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 199px;
    bottom: 21px;
    opacity: 0;
  }
}
@keyframes hit-5 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 199px;
    bottom: 21px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-6 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 467px;
    bottom: 46px;
    opacity: 0;
  }
}
@keyframes hit-6 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 467px;
    bottom: 46px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-7 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 399px;
    bottom: 43px;
    opacity: 0;
  }
}
@keyframes hit-7 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 399px;
    bottom: 43px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-8 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 213px;
    bottom: 54px;
    opacity: 0;
  }
}
@keyframes hit-8 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 213px;
    bottom: 54px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-9 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 442px;
    bottom: 34px;
    opacity: 0;
  }
}
@keyframes hit-9 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 442px;
    bottom: 34px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-10 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 224px;
    bottom: 57px;
    opacity: 0;
  }
}
@keyframes hit-10 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 224px;
    bottom: 57px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-11 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 161px;
    bottom: 55px;
    opacity: 0;
  }
}
@keyframes hit-11 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 161px;
    bottom: 55px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-12 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 385px;
    bottom: 64px;
    opacity: 0;
  }
}
@keyframes hit-12 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 385px;
    bottom: 64px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-13 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 307px;
    bottom: 14px;
    opacity: 0;
  }
}
@keyframes hit-13 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 307px;
    bottom: 14px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-14 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 107px;
    bottom: 10px;
    opacity: 0;
  }
}
@keyframes hit-14 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 107px;
    bottom: 10px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-15 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 188px;
    bottom: 17px;
    opacity: 0;
  }
}
@keyframes hit-15 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 188px;
    bottom: 17px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-16 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 288px;
    bottom: 61px;
    opacity: 0;
  }
}
@keyframes hit-16 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 288px;
    bottom: 61px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-17 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 104px;
    bottom: 7px;
    opacity: 0;
  }
}
@keyframes hit-17 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 104px;
    bottom: 7px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-18 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 131px;
    bottom: 25px;
    opacity: 0;
  }
}
@keyframes hit-18 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 131px;
    bottom: 25px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-19 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 392px;
    bottom: 41px;
    opacity: 0;
  }
}
@keyframes hit-19 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 392px;
    bottom: 41px;
    opacity: 0;
  }
}
@-webkit-keyframes hit-20 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 191px;
    bottom: 30px;
    opacity: 0;
  }
}
@keyframes hit-20 {
  0% {
    left: 0px;
    bottom: 0px;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 191px;
    bottom: 30px;
    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;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no" >
  <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>YOU RAN OUT OF TIME!</h1>
        <p>King Trost was victorious. Refresh to try again.</p>
        <p>
          Be sure to
          <a href='https://www.codepen.io/jcoulterdesign'>follow me on Codepen</a>
          for more pointless stuff.
        </p>
      </div>
    </div>
    <div :class="{'show': gamewin}" class='game_win'>
      <div class='inner'>
        <h1>YOU WIN!</h1>
        <p>King Trost was slain. Congratulations!</p>
        <p>
          Be sure to
          <a href='https://www.codepen.io/jcoulterdesign'>follow me on Codepen</a>
          for more pointless stuff.
        </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>King Trost</span>
          <p>HAHAHA, YOU HONESTLY THINK YOU CAN DEFEAT ME!? MY MEN WILL CRUSH YOU, BOY.</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'>Smash the spacebar!</div>
      </div>
      <div class='game_inner__footer'>
        <div class='madeby'>
          Made by
          <a href='https://www.codepen.io/jcoulterdesign' target='_blank'>Jamie Coulter</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 &lt; 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>Spend your gold and experience on upgrades</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 &gt; upgrade.maxLevel, 'available': upgrade.type == 'stat' ? xp &gt;= upgrade.cost : gold &gt;= 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'>Next round</div>
      </div>
    </div>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.min.js'></script>
      <script id="rendered-js" >
class Enemy {
  constructor(health, name) {
    this.health = health;
    this.initHealth = health;
    this.name = name;
  }}


const development = true;

class AudioController {
  constructor(audioArray, helpers) {

    this.sampleCount = 0;
    this.loadedIndex = 0;
    this.sfxOn = true;

    if (helpers == undefined) {
      this.helpers = true;
    }

    // Affirm in console that module has been included
    console.log('%c 🔊 Audio module active ', 'padding: 10px; background: #cbfd9f; color: #3b4e2a');

    // Helpers
    if (this.helpers) {
      if (audioArray.length == 0) {
        console.warn('No audio array or audio array empty');
      }
    }

    audioArray.forEach(function (aud, index) {
      if (aud.stackSize != undefined) {
        this.sampleCount += aud.stackSize;
      } else {
        this.sampleCount += 1;
      }
    }.bind(this));

    // Create a global audio array
    this._globalAudio = [];

    // Iterate through all our samples
    audioArray.forEach(function (aud, index) {

      if (aud.stackSize != undefined) {
        this.stackSize = aud.stackSize;
      } else {
        this.stackSize = 1;
      }

      // If the type of audio is not background music, stack it and play based on an index,
      // This means you can play small samples very quickly. You cannot play the same audio
      // Object until the current object has finished

      var audioObject = [];

      let a = new Audio();
      let b;
      a.preload = true;
      a.src = aud.source;

      for (var i = 0; i < this.stackSize; i++) {

        b = new Audio();
        b.src = a.src;

        b.onloadeddata = function () {
          this.loadedIndex++;
          this.progress = Math.ceil(this.loadedIndex / this.sampleCount * 100);

          if (this.helpers) {
            console.clear();
            console.log('%c 🔊 Audio module active ', 'padding: 10px; background: #cbfd9f; color: #3b4e2a');
            console.log(`Loading ${audioArray.length} audio sample(s)`);
            console.log(`Loading ${aud.name}`);
            console.log(`${this.progress}%`);
          }

          if (this.progress == 100) {
            this.onLoaded();
          }

        }.bind(this);

        audioObject.push(b);
      }

      audioObject.index = 0;
      audioObject.maxIndex = this.stackSize;

      this._globalAudio[aud.name] = audioObject;

    }.bind(this));
  }

  play(audio) {


    let sample = this._globalAudio[audio];

    if (sample != undefined) {
      // Get the current audio object in the stack
      let index = sample.index;
      let aud = sample[index];

      // Play the audio object
      if (this.sfxOn) {
        aud.play();
      }


      // Increase the stack index or reset if it exceeds the max stack size
      if (sample.index > sample.maxIndex - 2) {
        sample.index = 0;
      } else {
        sample.index++;
      }
    } else {
      console.warn(`${audio} does not exist.`);
    }
  }

  stop(audio) {
    let sample = this._globalAudio[audio];

    if (sample != undefined) {
      // Get the current audio object in the stack
      let index = sample.index;
      let aud = sample[index];

      // Stop the audio object
      aud.pause();
      aud.currentTime = 0;
    }
  }

  restart(audio) {
    let sample = this._globalAudio[audio];

    if (sample != undefined) {
      // Get the current audio object in the stack
      let index = sample.index;
      let aud = sample[index];

      // Stop the audio object
      aud.pause();
      aud.currentTime = 0;
      aud.play();
    }
  }

  pause(audio) {
    let sample = this._globalAudio[audio];

    if (sample != undefined) {
      // Get the current audio object in the stack
      let index = sample.index;
      let aud = sample[index];

      // Stop the audio object
      aud.pause();
    }
  }

  mute(audio) {
    let sample = this._globalAudio[audio];

    sample.forEach(function (s) {
      s.volume = 0;
    });
  }

  setVolume(audio, volume) {
    let sample = this._globalAudio[audio];
    let vol = volume / 100;

    sample.forEach(function (s) {
      s.volume = vol;
    });
  }

  // Destroy an audio sample to save memory

  destroy(audio) {
    this._globalAudio[audio] = undefined;
  }

  stopAll() {
    Object.keys(this._globalAudio).forEach(function (key) {
      this._globalAudio[key].forEach(function (aud) {
        aud.pause();
        aud.currentTime = 0;
      });
    }.bind(this));
  }

  muteAll() {
    Object.keys(this._globalAudio).forEach(function (key) {
      this._globalAudio[key].forEach(function (aud) {
        aud.volume = 0;
      });
    }.bind(this));
  }

  list() {
    Object.keys(this._globalAudio).forEach(function (key) {
      console.log('%c' + key, 'font-weight: bold; color: green');
    }.bind(this));
  }

  onLoaded() {
    if (this.helpers) {
      console.log('All audio loaded');
      this.list();
    }
  }}


new Vue({
  el: '#app',


  data() {
    return {
      keyCode: 32,
      minutes: 4,
      seconds: 0,
      ms: 1,
      pressed: false,
      strength: 1,
      intelligence: 1,
      luck: 1,
      speed: 1,
      gameStarted: false,
      muteBg: false,
      boss: false,
      damage: 1,
      weapon: 'Blunt sword',
      weaponDamage: 1,
      enemiesPerStage: 2,
      canAttack: false,
      stage: 1,
      goldGained: 0,
      sfx: true,
      xpGained: 0,
      introClicked: false,
      bgMusicStarted: false,
      stageComplete: false,
      xp: 0,
      damageAnim: 1,
      shoppingPhase: false,
      gold: 0,
      gameover: false,
      gamewin: false,
      audioController: '',
      enemy: new Enemy(5, 'HAREK SEDGWICK'),
      enemiesDefeated: 0,
      enemyKilled: false,
      tooltipTimer: 0,
      tooltip: true,
      enemyNames: [
      'JACOB DANGERS',
      'MILEON MASON',
      'MACE CAVELIER',
      'OSRIC GRAGOLOON',
      'MOSES STONEWELL',
      'TRISTAN GOSBECK',
      'REDWALD CROMWELL',
      'JEREMIAS PICARD',
      'EGRIC MAIDSTONE',
      'ROBIN CURTEYS',
      'DINUS DE REUE',
      'HAREK SEDGWICK',
      'FLORA DAUBERVILLE',
      'RAMETTA THE SLENDER',
      'ISEMAY VERNOLD',
      'AVINA CECIL',
      'FANUS THE GREAT',
      'GASPAR SHADOWSEEKER',
      'GOUBERT THE RED',
      'ALDOUS DARCY',
      'RYN THE RED',
      'FULLER CARDON',
      'ANSELM THE OLD',
      'ALVINA BLUETOOTH',
      'MICKNEY  CORVISER',
      'RYKOR RAVENSGATE',
      'REYNARD LONGBOW',
      'ALEX TROST',
      'ADAM KUHN',
      'STEVE GARDNER',
      'CHASSIE EVANS',
      'STEVEN SHAW',
      'CHRIS COYIER',
      'JHEY',
      'PETE BARR',
      'ZACH SAUCIER'],


      audioArray: [
      {
        'name': 'swordHit1',
        'source': 'https://assets.codepen.io/217233/ktkSwordHit1.mp3',
        'stackSize': 10 },

      {
        'name': 'swordHit2',
        'source': 'https://assets.codepen.io/217233/ktkSwordHit2.mp3',
        'stackSize': 10 },

      {
        'name': 'swordHit3',
        'source': 'https://assets.codepen.io/217233/ktkSwordHit3.mp3',
        'stackSize': 10 },

      {
        'name': 'death1',
        'source': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ktkDeath1.mp3',
        'stackSize': 10 },

      {
        'name': 'death2',
        'source': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ktkDeath2.mp3',
        'stackSize': 10 },

      {
        'name': 'death3',
        'source': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ktkDeath3.mp3',
        'stackSize': 10 },

      {
        'name': 'death4',
        'source': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ktkDeath4.mp3',
        'stackSize': 10 },

      {
        'name': 'grunt1',
        'source': 'https://assets.codepen.io/217233/ktkGrunt1.mp3',
        'stackSize': 10 },

      {
        'name': 'grunt2',
        'source': 'https://assets.codepen.io/217233/ktkGrunt2.mp3',
        'stackSize': 10 },

      {
        'name': 'grunt3',
        'source': 'https://assets.codepen.io/217233/ktkGrunt3.mp3',
        'stackSize': 10 },

      {
        'name': 'grunt4',
        'source': 'https://assets.codepen.io/217233/ktkGrunt4.mp3',
        'stackSize': 10 },

      {
        'name': 'grunt5',
        'source': 'https://assets.codepen.io/217233/ktkGrunt5.mp3',
        'stackSize': 10 },

      {
        'name': 'grunt6',
        'source': 'https://assets.codepen.io/217233/ktkGrunt6.mp3',
        'stackSize': 10 },

      {
        'name': 'grunt7',
        'source': 'https://assets.codepen.io/217233/ktkGrunt7.mp3',
        'stackSize': 10 },

      {
        'name': 'grunt8',
        'source': 'https://assets.codepen.io/217233/ktkGrunt8.mp3',
        'stackSize': 10 },

      {
        'name': 'grunt9',
        'source': 'https://assets.codepen.io/217233/ktkGrunt9.mp3',
        'stackSize': 10 },

      {
        'name': 'bgmusic',
        'source': 'https://assets.codepen.io/217233/ktkBgAudio.mp3' },

      {
        'name': 'shopBell',
        'source': 'https://assets.codepen.io/217233/ktkBell.wav' },

      {
        'name': 'shopWoosh',
        'source': 'https://assets.codepen.io/217233/ktkWoosh.wav' },

      {
        'name': 'upgrade',
        'source': 'https://assets.codepen.io/217233/ktkUpgrade.mp3',
        'stackSize': 10 },

      {
        'name': 'hover',
        'source': 'https://assets.codepen.io/217233/ktkHover.mp3',
        'stackSize': 10 },

      {
        'name': 'crushyou',
        'source': 'https://assets.codepen.io/217233/crush+you.wav',
        'stackSize': 1 },

      {
        'name': 'neverstop',
        'source': 'https://assets.codepen.io/217233/neverstop.wav',
        'stackSize': 1 },

      {
        'name': 'persistance',
        'source': 'https://assets.codepen.io/217233/persistance.wav',
        'stackSize': 1 },

      {
        'name': 'mercy',
        'source': 'https://assets.codepen.io/217233/mercy.wav',
        'stackSize': 1 },

      {
        'name': 'purchases',
        'source': 'https://assets.codepen.io/217233/pointlesspurchases.wav',
        'stackSize': 1 },

      {
        'name': 'fool',
        'source': 'https://assets.codepen.io/217233/fool.wav',
        'stackSize': 1 },

      {
        'name': 'notpossible',
        'source': 'https://assets.codepen.io/217233/not+possible.wav',
        'stackSize': 1 }],



      // Hmm. Upgrades
      upgrades: {
        0: {
          'type': 'stat',
          'names': 'Strength up',
          'descriptions': 'Increase your base strength. Do more damage.',
          'cost': 25,
          'level': 1,
          'increment': 1,
          'costIncreasePerLevel': 20,
          'metric': 'Strength',
          'stat': 'strength',
          'maxLevel': 100 },

        1: {
          'type': 'stat',
          'names': 'Intelligence up',
          'descriptions': 'Increase your intelligence and gain more xp per kill.',
          'cost': 25,
          'level': 1,
          'increment': 1,
          'costIncreasePerLevel': 20,
          'metric': 'Intelligence',
          'stat': 'intelligence',
          'maxLevel': 100 },

        2: {
          'type': 'stat',
          'names': 'Speed up',
          'descriptions': 'Increase your speed. Strike quicker!',
          'cost': 25,
          'level': 1,
          'increment': 1,
          'costIncreasePerLevel': 20,
          'metric': 'Speed',
          'stat': 'speed',
          'maxLevel': 7 } } };



  },

  methods: {
    punch() {
      if (_this.canAttack && !_this.gamewin && !_this.gameover) {
        _this.tooltip = false;
        _this.tooltipTimer = 0;

        _this.canAttack = !_this.canAttack;
        _this.pressed = !_this.pressed;
        _this.damageAnim = Math.floor(Math.random() * 10) + 1;


        let hitSound = Math.floor(Math.random() * 3) + 1;
        let gruntSound = Math.floor(Math.random() * 9) + 1;
        _this.audioController.play(`swordHit${hitSound}`);
        _this.audioController.play(`grunt${gruntSound}`);

        setTimeout(function () {
          _this.pressed = !_this.pressed;
        }, 150);

        setTimeout(function () {
          if (_this.enemyKilled == false) {
            _this.canAttack = !_this.canAttack;
          }

        }, 500 - 50 * _this.speed);

        if (_this.enemy.health > _this.damage) {
          _this.enemy.health -= _this.damage;
        } else {

          _this.canAttack = false;

          let deathSound = Math.floor(Math.random() * 4) + 1;
          _this.audioController.play(`death${deathSound}`);

          _this.enemy.health = 0;
          _this.enemiesDefeated++;
          _this.enemyKilled = true;

          let baseXpPerKill = 10 + Math.floor(Math.random() * 3) + 1;
          let xpPerKillWithBonus = Math.ceil(baseXpPerKill * _this.stage + baseXpPerKill * _this.stage / 100 * (_this.intelligence * 10));

          _this.xp += xpPerKillWithBonus;
          _this.xpGained = xpPerKillWithBonus;

          let baseGoldPerKill = 10 + Math.floor(Math.random() * 3) + 1;
          let goldPerKillWithBonus = Math.ceil(baseGoldPerKill * _this.stage + baseGoldPerKill * _this.stage / 100 * (_this.luck * 10));

          _this.goldGained = goldPerKillWithBonus;
          _this.gold += goldPerKillWithBonus;

          if (_this.boss) {
            _this.audioController.play('notpossible');
            window.clearInterval(timer);
            _this.gamewin = true;

          } else {

            if (_this.enemiesDefeated > _this.enemiesPerStage - 1) {

              _this.stageComplete = true;

              setTimeout(function () {


                _this.shoppingPhase = true;

                _this.audioController.play('shopWoosh');
                _this.audioController.play('shopBell');

                if (_this.stage == 1) {
                  _this.audioController.play('fool');
                }

                if (_this.stage == 3) {
                  _this.audioController.play('neverstop');
                }

                if (_this.stage == 5) {
                  _this.audioController.play('purchases');
                }

                if (_this.stage == 7) {
                  _this.audioController.play('persistance');
                }

                if (_this.stage == 9) {
                  _this.audioController.play('mercy');
                }

                console.log('lowpass');
                lowpassNode.frequency.value = 250;

              }, 1000);

              // Use Web Audio to create an audio graph that uses the stream from the audio element


            } else {
              setTimeout(function () {
                console.log(_this.enemiesDefeated, _this.stage);
                if (_this.enemiesDefeated == 10 && _this.stage == 10) {
                  _this.enemy = new Enemy(3000, 'King Trost');
                  _this.boss = true;
                } else {
                  _this.enemy = new Enemy(7 * (_this.enemiesDefeated + 1 * _this.stage), _this.enemyNames[Math.floor(Math.random() * _this.enemyNames.length)]);
                }
              }, 800);
            }

          }

          setTimeout(function () {
            _this.canAttack = true;
            _this.enemyKilled = false;
          }, 800);
        }
      }
    },

    toggleBg() {
      if (this.muteBg == false) {
        audioNode.volume = 0;
        this.muteBg = true;
      } else {
        audioNode.volume = 1;
        this.muteBg = false;
      }
    },
    toggleSFX() {
      this.sfx = !this.sfx;
    },

    buy(upgrade, type, stat) {

      if (type == 'stat') {
        let u = this.upgrades[upgrade];
        u.level++;

        this.xp -= u.cost;

        if (stat == 'strength') {
          this.strength += u.increment;
          this.damage = this.strength * 1 + this.weaponDamage;
        }

        if (stat == 'speed') {
          this.speed += u.increment;
        }

        if (stat == 'intelligence') {
          this.intelligence += u.increment;
        }

        if (stat == 'luck') {
          this.luck += u.increment;
        }

        let newCost = u.costIncreasePerLevel * u.level;
        u.cost = newCost;

      }

      if (type == 'weapons') {
        let w = this.upgrades[upgrade];
        this.gold -= w.cost;
        this.weaponDamage = w.damage;
        this.damage = this.strength * 1 + this.weaponDamage;
        this.weapon = w.names;
        w.bought = true;

        let newCost = u.costIncreasePerLevel * u.level;
        u.cost = newCost;
      }
    },

    exitShoppingPhase() {
      _this.stageComplete = false;
      this.shoppingPhase = !this.shoppingPhase;
      this.stage++;
      this.enemiesPerStage++;
      this.enemiesDefeated = 0;
      this.enemy = new Enemy(5 * (_this.enemiesDefeated + 1 * _this.stage), _this.enemyNames[Math.floor(Math.random() * _this.enemyNames.length)]);
      lowpassNode.frequency.value = 15000;
    },


    startGame() {
      this.gameStarted = true;
      lowpassNode.frequency.value = 15000;
      this.canAttack = true;

      timer = setInterval(function () {
        _this.tooltipTimer++;

        if (_this.minutes == 0 && _this.seconds == 0 && _this.ms == 0) {
          // Show game over!
          window.clearInterval(timer);
          _this.gameover = true;
          _this.canAttack = false;
        }

        if (_this.tooltipTimer > 100) {
          _this.tooltip = true;
        }
        if (_this.ms > 0) {
          _this.ms--;
          if (_this.ms < 10) {
            _this.ms = '0' + _this.ms;
          }
        } else {
          _this.ms = 99;
          if (_this.seconds < 1) {
            _this.seconds = 59;
            _this.minutes--;
            _this.minutes = '0' + _this.minutes;
          } else {
            _this.seconds--;
            if (_this.seconds < 10) {
              _this.seconds = '0' + _this.seconds;
            }
          }
        }
      }, 10);

    } },



  mounted() {
    _this = this;

    this.audioController = new AudioController(this.audioArray);

    // JCanvas Audio Module
    audioNode = document.querySelector("audio");

    document.onclick = function () {
      audioNode.loop = true;
      audioNode.play();

      if (!_this.bgMusicStarted) {
        _this.bgMusicStarted = true;
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        sourceNode = audioCtx.createMediaElementSource(audioNode);

        // Create the lowpass filter
        lowpassNode = audioCtx.createBiquadFilter();

        // Connect the source to the lowpass filter
        sourceNode.connect(lowpassNode);

        // Connect the lowpass filter to the output (speaker)
        lowpassNode.connect(audioCtx.destination);

        console.log('lowpass');
        lowpassNode.frequency.value = 250;
      }
    };

    document.body.onkeyup = function (e) {
      if (e.keyCode == _this.keyCode) {
        if (!_this.shoppingPhase)
        _this.punch();
      }

    };
  } });
//# sourceURL=pen.js
    </script>

  

</body>

</html>

 Bug Fixes:

  • JavaScript Error , Enemy Not Attacking
  • Game Not Opening
  • Browser Crashes
Found Any Bugs, Tell us in the comments

Post a Comment