draw bar healt after attack

Cristiano Magro

2024-12-26 8c672a568ad096f28d4c3a2ba95b01ecc30cc3ce

draw bar healt after attack

 04 - monster slayer game/prj-monster-01-starting-setup/app.js

@@ -10,7 +10,14 @@
      monsterHealth: 100,
    };
  },
  computed: {},
  computed: {
    monsterBarStyle(){
        return {width: this.monsterHealth + '%'}
    },
    playerBarStyle(){
        return {width: this.playerHealth + '%'}
    },
  },
  watch: {},
  methods: {
    attackMonster() {

 04 - monster slayer game/prj-monster-01-starting-setup/index.html

@@ -20,17 +20,23 @@
      <section id="monster" class="container">
        <h2>Monster Health</h2>
        <div class="healthbar">
          <div class="healthbar__value"></div>
          <div
            class="healthbar__value"
            :style="monsterBarStyle"
          ></div>
        </div>
      </section>
      <section id="player" class="container">
        <h2>Your Health</h2>
        <div class="healthbar">
          <div class="healthbar__value"></div>
          <div
            class="healthbar__value"
            :style="playerBarStyle"
          ></div>
        </div>
      </section>
      <section id="controls">
        <button>ATTACK</button>
        <button @click="attackMonster">ATTACK</button>
        <button>SPECIAL ATTACK</button>
        <button>HEAL</button>
        <button>SURRENDER</button>