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 month ago

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

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

please create a tic tac toe game with python using only graphics.py library

If you were to write a game of tic-tac-toe, you may store the representation of the...

If you were to write a game of tic-tac-toe, you may store the representation of the game board as a two dimensional list such as [['X', '', 'X'], ['O', 'X', ''], ['', 'O', 'X']] where each sublist is a row in the board. Empty strings ('') denote a space that does not yet have a value. Assuming this representation, write functions (contained in the same file) that do the following: a) Create a new empty tic-tac-toe board. This function should...