implement special attack

Cristiano Magro

2024-12-27 5529c72570323d88366d8119f353ba60131a3eb2

implement special attack

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

@@ -1,33 +1,43 @@
function getRandomValue(min, max){
    return Math.floor(Math.random() * (max - min)) + min;
function getRandomValue(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}


const app = Vue.createApp({
  data() {
    return {
      playerHealth: 100,
      monsterHealth: 100,
      currentRound: 0,
    };
  },
  computed: {
    monsterBarStyle(){
        return {width: this.monsterHealth + '%'}
    monsterBarStyle() {
      return { width: this.monsterHealth + "%" };
    },
    playerBarStyle(){
        return {width: this.playerHealth + '%'}
    playerBarStyle() {
      return { width: this.playerHealth + "%" };
    },
    mayUseSpecialAttack() {
      return this.currentRound % 3 !== 0;
    },
  },
  watch: {},
  methods: {
    attackMonster() {
      const attackValue = getRandomValue(5,12);
      this.currentRound++;
      const attackValue = getRandomValue(5, 12);
      this.monsterHealth -= attackValue;
      this.attackPlayer();
    },
    attackPlayer(){
        const attackValue = getRandomValue(8,15);
        this.playerHealth -= attackValue;
    attackPlayer() {
      const attackValue = getRandomValue(8, 15);
      this.playerHealth -= attackValue;
    },
    specialAttackMonster() {
      this.currentRound++;
      const attackValue = getRandomValue(10, 20);
      this.monsterHealth -= attackValue;
      this.attackPlayer();
    },
  },
});

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

@@ -20,24 +20,20 @@
      <section id="monster" class="container">
        <h2>Monster Health</h2>
        <div class="healthbar">
          <div
            class="healthbar__value"
            :style="monsterBarStyle"
          ></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"
            :style="playerBarStyle"
          ></div>
          <div class="healthbar__value" :style="playerBarStyle"></div>
        </div>
      </section>
      <section id="controls">
        <button @click="attackMonster">ATTACK</button>
        <button>SPECIAL ATTACK</button>
        <button @click="specialAttackMonster" :disabled="mayUseSpecialAttack">
          SPECIAL ATTACK
        </button>
        <button>HEAL</button>
        <button>SURRENDER</button>
      </section>