Categories
Vue 3 Projects

Create a Whack a Mole 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 whack a mole 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 whack-a-mole

and select all the default options to create the project.

Create the Whack a Mole Game

To create the whack a mole game, we write:

<template>
  <button @click="startGame">start game</button>
  <button @click="endGame">end game</button>
  <p>score: {{ score }}</p>
  <div>
    <div v-for="n of 6" :key="n" class="container">
      <img
        v-if="index === n"
        src="https://grid.gograph.com/happy-mole-cartoon-vector-art_gg68718247.jpg"
        @click="onClick(n)"
      />
      <div v-else class="hole"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      index: 0,
      timer: undefined,
      score: 0,
    };
  },
  methods: {
    generateIndex() {
      this.index = Math.floor(Math.random() * 6);
    },
    startGame() {
      this.timer = setInterval(this.generateIndex, 2000);
    },
    endGame() {
      clearInterval(this.timer);
      this.score = 0;
      this.index = 0;
    },
    onClick(n) {
      if (this.index === n) {
        this.score++;
      }
    },
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.hole {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 50%;
}

.container {
  display: inline-block;
}

img {
  width: 50px;
  height: 50px;
}
</style>

We have the start game and end game buttons to let us start and end the game.

When we click start game, startGame is called to start the game.

And when we click start game, endGame is called to end the game.

Then we show the score to the player in the p element.

Next, we render the divs to show the mole.

index is the index where the mole is located.

So if index equals n , then we show the mole.

Otherwise, we show a circle.

On the image, we have a click event listener that checks if we click on the mole.

In the component object, we have the data method to return the initial values of the reactive properties.

The generateIndex generates random index value.

startGame starts the game by calling setInterval to start the timer.

The 2nd argument is the interval to wait between the callback in the first argument runs again.

The interval is in milliseconds.

endGame calls clearInterval to the end of the timer.

We also set score and index back to 0 to reset the game.

The onClick method checks if n is the same as this.index and increases the score if it is.

Now when we click start game, we should see moles popping up and we can click it to increase the score.

Conclusion

We can create a whack a mole game easily with Vue 3 and JavaScript.

Categories
Vue 3 Projects

Create a Height Converter App 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 height converter app 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 height-converter

and select all the default options to create the project.

Create the Height Convert App

To create the height converter app, we write:

<template>
  <form @submit.prevent="submit">
    <div>
      <label>feet</label>
      <input v-model.number="feet" />
    </div>
    <div>
      <label>inches</label>
      <input v-model.number="inches" />
    </div>
    <button type="submit">calculate</button>
  </form>
  <p>{{ centimeters }} cm</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      feet: 0,
      inches: 0,
      centimeters: 0,
    };
  },
  computed: {
    formValid() {
      const { feet, inches } = this;
      return +feet >= 0 && +inches >= 0;
    },
  },
  methods: {
    submit() {
      if (!this.formValid) {
        return;
      }
      const { feet, inches } = this;
      this.centimeters = (feet + inches / 12) * 12 * 2.54;
    },
  },
};
</script>

To create the height converter, we create a form with 2 inputs.

One input is for entering the number of feet.

The other one is for entering the number of inches.

We bind them to the feet and inches reactive properties with v-model .

number lets us convert the entered value to a number.

Then in the component object, we have the data method to return the reactive properties and their initial values.

We listen for the submit event with the @submit directive.

prevent lets us do client-side form submission instead of server-side submission.

The formValid computed property checks whether the feet and inches values are valid.

And in the submit method, we check if the entered values are valid with formValid .

Then we compute the centimeters from the feet and inches .

We convert everything to feet in the parentheses.

Then we multiply by 12 to get the inches.

And then we multiply that by 2.54 to get the centimeters.

Then we show the centimeters value in the template.

Conclusion

We can create a height converter with Vue 3 and JavaScript.

Categories
Vue 3 Projects

Create a Guess a Number 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 guess a number 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 number-guessing-game

and select all the default options to create the project.

Create the Guess a Number Game

To create the guess a number game, we write:

<template>
  <div v-if="started">
    <form @submit.prevent="submit">
      <div>
        <label>answer</label>
        <input v-model.number="answer" />
      </div>
      <button type="submit">check</button>
    </form>
    <p>{{ status }}</p>
  </div>
  <div v-else>
    <button type="button" @click="start">start</button>
    <p>{{ status }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      rightAnswer: undefined,
      answer: 0,
      status: "",
      started: false,
    };
  },
  computed: {
    formValid() {
      return +this.answer >= 0;
    },
  },
  methods: {
    start() {
      this.rightAnswer = Math.ceil(Math.random() * 10);
      console.log(this.rightAnswer);
      this.started = true;
    },
    submit() {
      if (!this.formValid) {
        return;
      }
      const { answer, rightAnswer } = this;
      if (answer === rightAnswer) {
        this.status = "you got it";
        this.started = false;
      } else if (answer < rightAnswer) {
        this.status = "too low";
      } else {
        this.status = "too high";
      }
    },
  },
};
</script>

We start by adding the form div that’s shown when the game is started.

It’s started when started is true .

Inside it, we have a form element.

We listen to the submit evbent with the @sumbit directive.

The prevent modifier prevents server-side submission and let us do client-side form submission.

We have an input to let the player enter the answer.

We bind the inputted value to the answer reactive property with v-model .

The number modifier automatically converts the entered value to a number.

Then we add a button with type set to submit to let the player submit the form.

We also display the status in the form.

If the game isn’t started, we display the status and a button to let us start the game.

Then we move on to adding the component options object.

Inside it, we have the data method to return the reactive properties and their initial values.

Next, we add the formValid to check the answer reactive property to see if it’s bigger than or equal to 0.

The start method lets us start the game by generating the rightAnswer and set started to true to start the game.

Next, we add the submit method to compareanswer with the rightAnswer .

First, we check if the value is a valid number with formValid .

If it’s not, then we stop running the function.

And we display different messages depending on whether answer is equal, less than, or bigger than the rightAnswer .

If the player got the right answer, then we set started to false to end the game.

Conclusion

We can create a guess the number game easily with Vue 3 and JavaScript.

Categories
Vue 3 Projects

Create a Balloon Popping 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 balloon popping 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 balloon-poppinng-game

and select all the default options to create the project.

Create the Balloon Popping Game

To create the balloon popping app, we write:

<template>
  <div v-for="(b, index) of balloons" :key="b.id" class="balloon-container">
    <div
      v-if="!b.popped"
      class="balloon"
      :style="{ 'background-color': b.color }"
      @mouseover="onPop(index)"
    ></div>
    <div v-else>popped</div>
  </div>
</template>

<script>
const colors = ["red", "green", "blue"];

const generateColor = () => {
  const index = Math.floor(Math.random() * colors.length);
  return colors[index];
};
export default {
  name: "App",
  data() {
    return {
      balloons: Array(25)
        .fill()
        .map((_, i) => ({ id: i, popped: false, color: generateColor() })),
    };
  },
  methods: {
    onPop(index) {
      this.balloons[index] = {
        ...this.balloons[index],
        popped: true,
      };
    },
  },
};
</script>

<style scoped>
.balloon-container {
  display: inline-block;
}

.balloon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid black;
}
</style>

In the template, we render the divs for the balloons with v-for .

b is the ballon object, index is the index of the balloon entry.

key has the unique ID for the ballon for Vue to keep track of the balloons.

Inside it, we have a div to render the ballon if b.popped is false , which indicates it’s not popped.

Otherwise, we show ‘popped’ with v-else .

In the script object, we have the genberateColor function to generate a random color for the balloon.

We set the style prop to the background-color to the balloon’s color property.

Also, we have the @mouseover directive to run the onPop method to pop the balloon.

In the data method, we return the ballons array with the balloon entries.

In the onPop method, we just set popped property of the balloon entry to true .

In the style tag, we make the ballon round and display side by side.

To make it display side by side, we set the balloon-container class to display: inline-block .

In the balloon class, we set the width and height of the balloon to the same dimensions.

border-radius is set to 50% to make it a circle.

And we add a border with the border property.

Now when we hover over a balloon with our mouse, we see the popped text displayed in place of the balloon.

Conclusion

We can create a balloon popping game easily with Vue 3 and JavaScript.

Categories
Vue 3 Projects

Create a Quiz 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 quiz 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 quiz-game

and select all the default options to create the project.

Create the Quiz Game

To create the quiz app, we write:

<template>
  <form>
    <div v-if="questionIndex < questions.length">
      <label>{{ question.question }}</label>
      <div v-for="c of question.choices" :key="c">
        <input type="radio" name="choice" v-model="answer" :value="c" />
        {{ c }}
      </div>
    </div>
    <div v-else>
      <button type="button" @click="restart">restart</button>
    </div>
    <button type="button" @click="submit">check</button>
  </form>
  <p>score: {{ score }}</p>
</template>

<script>
const questions = [
  {
    question: "What is American football called in England?",
    choices: ["American football", "football", "Handball"],
    rightAnswer: "American football",
  },
  {
    question: "What is the largest country in the world?",
    choices: ["Russia", "Canada", "United States"],
    rightAnswer: "Russia",
  },
  {
    question: "What is the 100th digit of Pi?",
    choices: [9, 4, 7],
    rightAnswer: 9,
  },
];
export default {
  name: "App",
  data() {
    return {
      questions,
      score: 0,
      questionIndex: 0,
      question: questions[0],
      answer: "",
    };
  },
  methods: {
    submit() {
      const { answer, question, questions, questionIndex } = this;
      if (answer === question.rightAnswer) {
        this.score++;
      }

      if (questionIndex < questions.length) {
        this.questionIndex++;
        this.question = { ...questions[this.questionIndex] };
      }
    },
    restart() {
      this.question = questions[0];
      this.answer = "";
      this.questionIndex = 0;
      this.score = 0;
    },
  },
};
</script>

We have the form element with a div to display the question.

We display a question only if questionIndex is less than questions.length .

If questionIndex is equal to questions.length , then we ran out of questions to display.

To display the question, we render the question.question in the label.

And we render the question.choices entry in the div below it.

We render radio buttons by rendering an input with type set to radio .

The name attribute are all set to choice so that the browser knows that they’re in the same group.

This means we can only choose one of them.

v-model is also bound to the same value so the selected choice is bound to the answer reactive property.

Otherwise, we display the restart button so that the restart method is called when we click it.

We display the submit button below that to submit the answer.

And we display the score below that.

In the script tag, we have the question entries with the chocies and rightAnswer .

The data has all our reactive properties’ initial values.

The submit method is where we check out answer.

We get the answer and compare it to question.rightAnswer .

question has the current question.

If they’re the same, we increase score by 1.

And if questionIndex is less than questions.length , we move to the next question by increasing questionIndex by 1.

And then we set this.question to the new question after that.

Once we went through all the questions, restart is run.

We just reset the reactive variables to their initial values.

Conclusion

We can create a quiz game easily with Vue 3 and JavaScript.