Vue Monster Slayer Game

by gbkim1988

HTML

<script src="bootstrap-vue"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div id="app">
  <div class="container">
    <div class="row">
      <div class="col-6 text-center">
        <div class="Name text-center">
          <h1>
            Slayer (Kim)
          </h1>
        </div>
        <div class="Healthbar shadow-lg p-3 mb-5 rounded font-weight-bold"
						:style="slayerStyle">
          {{ slayer.health }}
        </div>
      </div>
      <div class="col-6">
        <div class="Name text-center">
          <h1>
            Monster
          </h1>
        </div>
        <div class="Healthbar shadow-lg p-3 mb-5 rounded font-weight-bold"
						:style="monsterStyle">
          {{ monster.health }}
        </div>
      </div>
    </div>
    <br>
    <!-- 명령행 버튼을 모음 -->
    <div class="row commandBar shadow-lg p-3 mb-5 bg-white rounded">
			<div v-if="global.start">
				<div class="btn p-3 shadow-lg cmd border active" @click="attack">
					일반 공격
				</div>
				<div class="btn p-3 shadow-lg cmd border">
					강력한 공격
				</div>
				<div class="btn p-3 shadow-lg cmd border" @click="heal">
					Slayer (치료)
				</div>
				<div class="btn p-3 shadow-lg cmd border" @click="giveUp">
					게임 포기
				</div>
			</div>
			<div v-else="global.start">
				<div class="btn p-3 shadow-lg cmd border" @click="global.start = !global.start">
					start new game
				</div>
			</div>
      
    </div>
		
		<div class="row logger shadow-lg p-3 mb-5 bg-white rounded">
			<div v-for="log in global.logs" class="container">
			
				<div class="row">
					{{ log }}
				</div>
			</div>
		</div>
  </div>
  <!-- End of Container -->
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.Name {
  align-content: center;
}

.Healthbar {
  width: 100%;
  height: 40px;
  background-color: green;
  /* 텍스트를 수직 정렬 한다. */
  display: flex;
  /* 정렬 모드 */
  justify-content: center;
  /* 수평 중앙 정렬 */
  align-items: center;
  /* 수직 중앙 정렬 */
  color: white;
}

.commandBar {
	  /* 텍스트를 수직 정렬 한다. */
  display: flex;
  /* 정렬 모드 */
  justify-content: center;
  /* 수평 중앙 정렬 */
  align-items: center;
}

.cmd {
	margin: 0px 10px;
	border: 1px solid black !important;
}

div.cmd:hover {
	color: red !important;
	font-style: bold !important;
}

div.cmd:click {
	color: blue !important;
	font-style: bold !important;
}

.logger {
	
}

Vue

new Vue({
  el: "#app",
  data: function() {
		return {
			slayer: {
				health: 100,
				attack: 20,
			},
			monster : {
				health: 100,
				attack: 15,
			},
			global : {
				start: false,
				logs : [
					
				]
			}
		};
  },
	computed: {
		monsterStyle: function() {
			return{
				width: this.monster.health + '%',
				backgroundColor: this.monster.health < 40 ? 'red':'green'
			}
		},
		slayerStyle: function() {
			return {
				width: this.slayer.health + '%',
				backgroundColor: this.slayer.health < 40 ? 'red':'green'
			}
		}
	},
  methods: {
		giveUp: function() {
			this.global.start = false;
			this.global.logs.push("Slayer 가 항복하였다.")
		}, 
		heal: function() {
			m_h = this.monster.health;
			s_h = this.slayer.health;
			
			if ( m_h < 100 && (m_h + 10 <= 100))
				this.monster.health += 10;
			
			if ( s_h < 100 && (s_h + 10 <= 100)) 
				this.slayer.health += 10;
		},
		attack: function() {
			m_h = this.monster.health;
			s_h = this.slayer.health;
			m_a = this.monster.attack;
			s_a = this.slayer.attack;
			if ( m_h == 0 || s_h == 0) {
				if (m_h == 0 && s_h == 0 ){
					this.global.logs.push("Slayer 와 Monster 모두 죽었다.")
				}else if ( m_h == 0){
					this.global.logs.push("Slayer 가 승리하였다.")
				}else if(s_h == 0){
					this.global.logs.push("Monster 가 승리하였다.")
				}
			}else{
				if( m_h - s_a > 0 )
					this.monster.health -= s_a;
				else
					this.monster.health = 0 // monster die
				if (s_h - m_a > 0)
					this.slayer.health -= m_a;
				else
					this.slayer.health = 0 // slayer die
									
				if(this.slayer.health > this.monster.health)
					this.global.logs.push_front("Slayer 가 우세하다.");
				else
					this.global.logs.push("Monster 가 우세하다.")
			}
		}
  }
})