Create a Hi-Low Card Game with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a hi-low card game with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create hi-low-game

and select all the default options to create the project.

Create the Hi-Low Card Game

To create the hi-low game, we write:

<template>
  <form @submit.prevent="draw">
    <select v-model="guess">
      <option>lower</option>
      <option>higher</option>
    </select>
    <button type="submit">guess</button>
  </form>
  <p>score: {{ score }}</p>
  <p>last drawn card</p>
  <img
    v-if="drawnCards[drawnCards.length - 2]"
    :src="`https://tekeye.uk/playing_cards/images/svg_playing_cards/fronts/${
      drawnCards[drawnCards.length - 2]
    }.svg`"
  />
  <p>currently drawrn card</p>
  <img
    v-if="drawnCards[drawnCards.length - 1]"
    :src="`https://tekeye.uk/playing_cards/images/svg_playing_cards/fronts/${
      drawnCards[drawnCards.length - 1]
    }.svg`"
  />
</template>

<script>
const suits = ["diamonds", "clubs", "hearts", "spades"];
const values = ["ace", 2, 3, 4, 5, 6, 7, 8, 9, 10];
const cards = [];
for (const s of suits) {
  for (const v of values) {
    cards.push(`${s}_${v}`);
  }
}
export default {
  name: "App",
  data() {
    return {
      score: 0,
      cards: [...cards].sort(() => Math.random() - 0.5),
      drawnCards: [],
      guess: "lower",
    };
  },
  methods: {
    draw() {
      const drawnCard = this.cards.pop();
      this.drawnCards.push(drawnCard);
      const indexLastCard = cards.indexOf(
        this.drawnCards[this.drawnCards.length - 2]
      );
      const indexDrawnCard = cards.indexOf(
        this.drawnCards[this.drawnCards.length - 1]
      );
      if (
        (indexLastCard < indexDrawnCard && this.guess === "higher") ||
        (indexLastCard > indexDrawnCard && this.guess === "lower")
      ) {
        this.score++;
      }
    },
  },
};
</script>

In the template, we have the form element with a select dropdown to let us pick whether the next card is higher or lower than the last drawn card.

The @submit directive lets us listen to the submit event, which is triggered when we click on a button with type set to submit .

The prevent modifier lets us prevent server-side submission and do client-side submission instead.

The score is displayed below the form.

And we display the last drawn card and the currently drawn card’s picture below that.

Then we create the cards array in the order of their magnitude by combining the values from the suits and values array.

In the data method,. we have the reactive properties in the object we return.

score has the score.

cards has a copy of the cards array shuffled with sort .

guess has the guess which can be 'lower' or 'higher' .

In the draw method, we take the card with pop .

And then we push that into drawnCards .

Then we have get the index of each card from the original card array, which is sorted in the order of their magnitude.

Then finally, we have an if block that compares the index of the last and currently drawn card and the guess.

If they match the condition, then score is increment by 1.

Conclusion

We can create a high-low card game easily with Vue 3 and JavaScript.