A simple Monster vs Human game using VueJS

Player can fight a 'monster' with the option attack, special attack, heal and give up.

This application was made on VueJS where I learn the following

• Creating Vue Instances
• Conditional Rendering
• Rendering lists with v-for
• Binding Attributes
• Listening to events
• Dynamic Styling with CSS

To have a go of the application, feel free to clone or download the repo. No set up is required, just open index.html in your preferred browser.

Creating the VUE instance

Created the new Vue instance with playerHealth, monsterHealth and if the game is running.

new Vue ({
  el: "#app",
  data: {
    playerHealth: 100,
    monsterHealth: 100,
    gameIsRunning: false
  }
})

We also want to style it so the bar only shows the health of the player/monster

In the healthbar we used v-bind where we bound our playerHealth via the style tag for the player and monster.

<div class="healthbar">
    <div
    class="healthbar text-center"
    style="background-color: green; margin: 0; color: white;"
    :style="{width: playerHealth + '%'}">
      {{playerHealth}}
    </div>
</div>

Showing player controls conditionally.

Want to swap from game mode to non game mode.

Firstly, we created the v-if statements in the index.html

<section class="row controls" v-if="!gameIsRunning">
    <div class="small-12 columns">
        <button id="start-game" @click="startGame">START NEW GAME</button>
    </div>
</section>
<section class="row controls" v-if='gameIsRunning'>
    <div class="small-12 columns">
        <button id="attack">ATTACK</button>
        <button id="special-attack">SPECIAL ATTACK</button>
        <button id="heal">HEAL</button>
        <button id="give-up">GIVE UP</button>
    </div>
</section>

We could have run v-else for the 2nd section tag. Note that v-else will only work if it is wrapped in same element as the first v-if statement.

Initially I had

@click = "gameIsRunning = !gameIsRunning"

This still worked but let's create a method instead. In the app.js made the following startGame function.

new Vue ({
  el: "#app",
  data: {
    playerHealth: 100,
    monsterHealth: 100,
    gameIsRunning: false
  },
  methods: {
    startGame() {
      this.gameIsRunning = true;
      this.playerHealth = 100;
      this.monsterHealth = 100;

    }
  }
})

Attack function

var damage = this.calculateDamage(3, 10)
this.monsterHealth -= damage;

if (this.monsterHealth <= 0) {
    alert('Terry won');
    this.gameIsRunning = false;
    return;
}

var damage = this.calculateDamage(5, 12)
this.playerHealth -= damage;

if (this.playerHealth <= 0) {
alert('Monster won');
this.gameIsRunning = false;
}