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 8 months ago

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

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...

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...

For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML...

For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML <canvas> tag. The game will be played "hot seat" where players take turns using the same device. Requirements: The canvas should be 600px tall and wide, with the gameplay area occupying most of the canvas. The X's and O's may be drawn using polygons or large-font text The grid should be drawn using polygons, specifically long, thin rectangles Before & between games, the canvas...

- 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!

Game of Tic Tac Toe with the following conditions A point system where a move that leads...

Game of Tic Tac Toe with the following conditions A point system where a move that leads to a winning game is given 1 point, a move that leads to a tie is given 0 point, and a lead to a losing game will get -1 point. Grid size of 5x5 A timer that can be set for how long a game can be played 5 symbols in a row to get a point Connected lines cannot be crossed (No diagonal lines)...