master

分支 (1)

管理

管理

master

assassinate-the-king
/
index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>我是国王</title>
  <link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="./style.css">
<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset='utf-8'" />
</head>
<body>
<!-- partial:index.partial.html -->
<div :class="{'pressed': pressed}" id='app'>
  <audio controls='' crossorigin='anonymous' style='display: none;'>
    <source src='img/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='http://小颜.我爱你'>跟着我</a>
          在挑战一次
        </p>
      </div>
    </div>
    <div :class="{'show': gamewin}" class='game_win'>
      <div class='inner'>
        <h1>赢了</h1>
        <p>国王被你打败了</p>
        <p>
          恭喜
          <a href='http://小颜.我爱你'>跟着我</a>
          领取奖励
        </p>
      </div>
    </div>
    <div :class="{'gamestarted': gameStarted}" class='game_intro'>
      <div :class="{'gamestarted': introClicked}" class='game_intro__inner start'>
        <img src='img/ktkLogo.png'>
        <br>
        <p @click='introClicked = !introClicked, audioController.play("crushyou")' class='begin'>开始游戏</p>
      </div>
      <div :class="{'gamestarted': !introClicked}" class='game_intro__inner end'>
        <div class='dialogue'>
          <span>King Trost</span>
          <p>哈哈哈，你真以为你能打败我！？我的人会压垮你的，弟弟。</p>
          <p @click='introClicked = !introClicked, startGame()' class='continue'>继续</p>
        </div>
        <img class='king' src='img/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://小颜.我爱你' target='_blank'>小颜</a>
        </div>
        <div class='resources'>
          <div class='ui_xp'>
            <img src='img/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='img/ktkSfxButton.png'>
          <img :class="{'off': muteBg}" @click='toggleBg()' src='img/ktkBgButton.png'>
        </div>
        <div class='logo'>
          <img src='img/ktkLogo.png'>
        </div>
        <div class='timer'>
          <img src='img/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='img/ktkStrengthIcon.png'>
                  {{ strength }} STR
                  <br>
                </div>
                <div class='ui_intelligence'>
                  <img src='img/ktkKnowledgeIcon.png'>
                  {{ intelligence }} INT
                </div>
                <div class='ui_speed'>
                  <img src='img/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='img/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='img/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='img/ktkXpIxon.png'>
          {{ xp }}xp
        </div>
        <div class='upgrades'>
          <div :key='upgrades.name' class='upgrades_upgrade' v-for='(upgrade, index) in upgrades'>
			  <span>{{upgrade.names}}</span>
            <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'>下一关</div>
      </div>
    </div>
  </div>
</div>

<script   src='js/vue.min.js'></script>
<script>
	console.log(upgrade.names)
</script>
<script charset="utf-8" src="js/script.js"></script>
</body>
</html>