Question

In: Computer Science

How to make tic tac toe game in javascript with vue.js

Expert Solution

//styling the game appearance.

master.css

#game-view{
   width: 500px;
   margin: 0 auto;
   border: 1px solid #000;
}

#game-view-info{
   padding: 15px;
   font-family: sans-serif;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
   background-color: #eee;
}

#game-view-squares{
   height: 500px;
   display: flex;
   flex-wrap: wrap;
   padding: 25px;
   box-sizing: border-box;
}

.game-view-square{
width: 33.33%;
height: 33.33%;

   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;

   font-family: cursive;
   font-size: 75px;
   text-transformation: uppercase;

   border-radius: 15px;
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
}

.game-view-square.hightlighted { color: green}

.game-view-square:hover { background-color: #eee }

.game-view-square:nth-child(-n + 6) { border-bottom: 15px solid brown }

.game-view-square:nth-child(3n + 1),

.game-view-square:nth-child(3n+2) {border-right: 15px solid brown}

create Game.js file with the following code

Class Game{
   constructor(){
       this.inProgress=true;
       this.winner=null;//'O'or'x'
       this.currentTurn=Game.O;//'O'or'X'
       this.movesMode=0;
       this.squares=new Array(9).fill().map(s => new Square() );
   }
   makeMove(i){
       if(this.inProgress && !this.squares[i].value){
       this.squares[i].value=this.currentTurn;

       this.movesMade++;
       this.checkForWinner();
       this.currenTurn=(this.currentTurn == Game.O) ? Game.X : Game.O;

           }
       }
   checkForWinner(){
       const winningCombinations = [
       [0,1,2],
       [3,4,5],
       [6,7,8],
       [0,3,6],//a==0,b=3,c=6
       [1,4,7],
       [2,5,8],
       [0,4,8],
       [2,4,6]
];
       winningCombinations.forEach(wc)={
           const [a,b,c] =wc;
           const sqA=this.squares[a];
           const sqB=this.squares[b];
           const sqC=this.squares[c];

           if(sqA.value && sqA.value ==sqB.value && sqA.value == sqC.value){
               this.inProgress=false;
               this.winner=sqA.value;//'O' or 'X'
               sqA.isHighlighted=sqB.isHighlighted=sqC.isHighlighted=true;
           }
       });
       //check for tie
       if (this.movesMade == this.squares.length){
        this.inProgress=false;//inProgress=false AND winner=null
       }

}

Game.O='O';
Game.X='X';

create Square.js with the following code

class Square {
   constructor(){
       this.value=null;
       this.isHighlighted-false;
   }
}

create index.html with the following code:-

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Tic Tac Toe</title>
       <link rel="stylesheet" href="CSS/master.css">
   </head>
   <body>
       <div id="game-view">
       <div id="game-view-info">
           {{ infoMessage }}
       </div>
       <div id="game-view-squares">

       </div>
       <div id="game-view-squares">
           <div
           v-for="(square,i) in squares"
           v-on:click="activeGame.makeMove(i)"
           v-bind:class="{highlighted: square.isHighlighted}"
           class="game-view-square">
           {{ square.value }}
       </div>
       </div>
       <script src="https://cdn.jsdeliver.net/npm/vue" charset="utf-8"></script>
       <script src="js/Square.js" charset="utf-8"></script>
       <script src="js/Game.js" charset="utf-8"></script>
       <script type="text/javascript">
       let activeGame=new Game();
       let gameVue =new Vue({
       el: '#game-view',
       data: activeGame
       computed: {
           infoMessage: function(){
           if(this.inprogress){
               return 'It is' + this.currentTurn + '\'s turn!';
               }
           if(this.winner){
               return this.winner + 'wins!';

               }
           if(this.winner && !this.inProgress){
               return 'It was a draw!' ;
               }
           }
       }

       });
       </script>
   </body>
</html>

Launch it in a browser.

venereology answered 1 year ago

How to make a 2D array Tic Tac Toe game in C?

make a 4x4 tic tac toe in javascript (X is the user) (O is the computer)

Write a program that plays tic-tac-toe. The tic-tac-toe game is played on a 3 × 3...

Write a program that plays tic-tac-toe. The tic-tac-toe game is played on a 3 × 3 grid as shown below: The game is played by two players, who take turns. The first player marks moves with a circle, the second with a cross. The player who has formed a horizontal, vertical, or diagonal sequence of three marks wins. Your program should draw the game board, ask the user for the coordinates of the next mark (their move), change the players...

PYTHON (Game: Tic-tac-toe): Write a program that plays the tic-tac-toe game. Two players take turns clicking...

PYTHON (Game: Tic-tac-toe): Write a program that plays the tic-tac-toe game. Two players take turns clicking an available cell in a 3 x 3 grid with their respective tokens (either X or O). When one player has placed three tokens in a horizontal, vertical, or diagonal row on the grid, the game is over and that player has won. A draw (no winner) occurs when all the cells in the grid have been filled with tokens and neither player has...

In a game of tic tac toe. How do you check if all the positions in...

In a game of tic tac toe. How do you check if all the positions in a double array are taken, the double arrays are used to store the x's and o's?

Use JavaScript/HTML to create a Tic Tac Toe game displaying X's O's. Score the result. Each...

Use JavaScript/HTML to create a Tic Tac Toe game displaying X's O's. Score the result. Each player takes a turn putting their mark until done or tied.

C++ Make a Tic Tac Toe game for 2 players to play using 2D arrays and...

C++ Make a Tic Tac Toe game for 2 players to play using 2D arrays and classes. Do not add more #include functions other than the ones listed. I never said what type of code I needed in a previous question. I apologize and I can't go back and change it so here is the same question with more information Using the tictactoeGame class, write a main program that uses a tictactoeGame to implement a game in which two players...

Make a Tic Tac Toe game for 2 players to play using 2D arrays and classes....

Make a Tic Tac Toe game for 2 players to play using 2D arrays and classes. Do not add more #include functions other than the ones listed (such as #include <stdio.h> etc). Using the tictactoeGame class, write a main program that uses a tictactoeGame to implement a game in which two players (you and a friend) take turns placing X’s and O’s onto the board. After each turn, the current board configuration should be displayed, and once a player connects...

The objective of this assignment is to implement the tic-tac-toe game with a C program. The...

The objective of this assignment is to implement the tic-tac-toe game with a C program. The game is played by two players on a board defined as a 5x5 grid (array). Each board position can contain one of two possible markers, either ‘X’ or ‘O’. The first player plays with ‘X’ while the second player plays with ‘O’. Players place their markers in an empty position of the board in turns. The objective is to place 5 consecutive markers of...

- Make a 2-D array to represent a Tic-Tac-Toe game/grid. Place a couple of 'X's and...

- Make a 2-D array to represent a Tic-Tac-Toe game/grid. Place a couple of 'X's and 'O's in the grid and display it. Do some extra printing to make it look like a Tic-Tac-Toe board we are suppose to use rows and columns so just make it simple thanks!