By Vishal Basumatary in Tutorial — Sep 25, 2022

How to Create TIC-TAC-TOE game using VUEJS

In this article, we will be creating a Tic-Tac-Toe game in Vue.js. We will be using the Vue.js 2.0 framework and the Vuetify UI library.

Photo by micheile dot com / Unsplash

Creating a Tic-Tac-Toe game in Vue.js

Tic-tac-toe is a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.

In this article, we will be creating a Tic-Tac-Toe game in Vue.js. We will be using the Vue.js 2.0 framework and the Vuetify UI library.

The game will have the following features:

A 3×3 game board

The ability to place X or O on the board

A way to detect when the game is over

A way to restart the game

Let’s get started!

Creating the project

We will be using the Vue CLI to generate our project. If you don’t have the Vue CLI installed, you can do so by running the following command:

npm install -g vue-cli

Once the Vue CLI is installed, we can create our project by running the following command:

vue init webpack tic-tac-toe

This will generate a project with the following structure:

├── README.md

├── index.html

├── package.json

├── src

│ ├── App.vue

│ └── main.js

└── webpack.config.js

We won’t be needing the index.html file, so we can delete it.

Installing dependencies

Next, we need to install the dependencies for our project. We will be using the Vuetify UI library, so we need to install that first:

npm install vuetify --save

Once that’s done, we need to install the vue-router and vuex libraries:

npm install vue-router vuex --save

Creating the game board

Now that we have our project set up, we can start creating our game board.

Open src/App.vue and replace the contents with the following:

<template>
<div id="app">
<v-app>
<v-content>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-card-title>
Tic-Tac-Toe
</v-card-title>
<v-card-text>
<v-layout row wrap>
<v-flex xs12>
<v-btn @click="startGame">Start Game</v-btn>
</v-flex>
<v-flex xs12 class="game-board">
<v-layout row wrap>
<v-flex xs4 class="game-square" v-for="(square, index) in squares" :key="index">
<v-btn @click="makeMove(index)" :disabled="gameOver || square !== ''">
{{ square }}
</v-btn>
</v-flex>
</v-layout>
</v-flex>
<v-flex xs12>
<v-btn @click="restartGame" :disabled="gameOver === false">Restart Game</v-btn>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
</template>

<script>
export default {
name: 'App',
data() {
return {
squares: Array(9).fill(''),
gameOver: false
}
},

methods: {
startGame() {
this.squares = Array(9).fill('');
this.gameOver = false;
},

makeMove(index) {
if (this.gameOver) return;
if (this.squares[index] === '') {
this.squares.splice(index, 1, 'X');
this.checkGameOver();
}
},

checkGameOver() {
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];

for (let i = 0; i < winningConditions.length; i++) {
const [a, b, c] = winningConditions[i];
if (
this.squares[a] &&
this.squares[a] === this.squares[b] &&
this.squares[a] === this.squares[c]
) {
this.gameOver = true;
}
}
},

restartGame() {
this.startGame();
}
}
}
</script>

<style>
.game-board {
margin-top: 20px;
}

.game-square {
margin: 10px;
}
</style>

In the code above, we have a 3×3 grid of buttons which make up our game board. We have a method for starting the game, making moves, checking if the game is over, and restarting the game.

You may have noticed that we are using the Vuetify UI library. Vuetify is a Material Design component library for Vue.js. It provides us with a bunch of great-looking UI components that we can use to build our app.

If you run the app at this point, you should see the following:

Playing the game

If you click on the Start Game button, you should see the following:

Now, if you click on one of the squares, you should see an X appear.

If you click on another square, you should see an O appear.

And if you click on a third square, you should see the following:

The game is over!

If you click on the Restart Game button, you can start a new game.

And that’s it! You’ve now created a Tic-Tac-Toe game in Vue.js.

In this article, we have created a Tic-Tac-Toe game in Vue.js. We have used the Vue.js 2.0 framework and the Vuetify UI library. The game has the following features: