Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

i need help with part 2 of switchTurn() assignment is: Implement the newGame() function (1 point) Implement the newGame() function to do the following: Use

i need help with part 2 of switchTurn()

assignment is: Implement the newGame() function (1 point)

Implement the newGame() function to do the following: Use clearTimeout to clear the computer's move timeout and then set computerMoveTimeout back to 0 Loop through all game board cells and set the inner HTML of each to a non-breaking space: Reset to the player's turn by setting playerTurn to true Set the text of the turn information div to "Your turn"

Implement the cellClicked() function (2 points)

Implement the cellClicked() function to do the following: If playerTurn is true and the clicked cell is empty: Set the cell's innerHTML to "X" Set the cell's style color to "red" Call switchTurn()

Implement switchTurn() part 1: turn-switching logic (2 points) Implement the switchTurn() function to do the following: If switching from the player's turn to the computer's turn, use setTimeout to call makeComputerMove after 1 second (1000 milliseconds). Assign the return value of setTimeout to computerMoveTimeout. The timeout simulates the computer "thinking", and prevents the nearly-instant response to each player move that would occur from a direct call to makeComputerMove(). Toggle playerTurn's value from false to true or from true to false. Set the turn information div's text content to "Your turn" if playerTurn is true, or "Computer's turn" if playerTurn is false.

Implement makeComputerMove() (2 points)

Implement makeComputerMove() so that the computer puts an "O" in a random, available cell. Set the cell's style color to "blue". Call switchTurn() at the end of the function to switch back to the player's turn.

Implement switchTurn() part 2:

checking for a winner (3 points) Add logic to the switchTurn() function that checks for a winner before the turn switch. If the board contains 3 X's in a row, display the text "You win!" in the turn info div. If the board contains 3 O's in a row, display the text "Computer wins!" in the turn info div. If the board is full without either the player or computer having won, display the text "Draw game" in the turn info div. In the case of a winner or a draw game, set playerTurn to false and return without switching turns. This prevents the user from being able to place an X after the game is over.

my code is :

var playerTurn = true;

var count=0;

var computerMoveTimeout = 0;

// Returns an array of 9 elements that make up the game board. The first 3

// elements are the top row, the next 3 the middle row, and the last 3 the

// bottom row.

function getGameBoard() {

var gameBoardTable = document.getElementById("gameBoard");

var result = [];

for (var i = 0; i < 3; i++) {

for (var j = 0; j < 3; j++) {

result.push(gameBoardTable.rows[i].cells[j]);

}

}

return result;

}

function start() {

// Setup the click event for the "New game" button

var newBtn = document.getElementById("newGameButton");

newBtn.addEventListener("click", newGame);

// Create click-event listeners for each cell in the game board

var cells = getGameBoard();

for (let cell of cells) {

cell.addEventListener("click", function() { cellClicked(cell); });

}

// Call the newGame function to make sure the board is clear

newGame();

}

function newGame() {

// Use clearTimeout to clear the computer's move timeout and then set computerMoveTimeout back to 0

clearTimeout(computerMoveTimeout);

computerMoveTimeout = 0;

var spaces = getGameBoard();

for(let space of spaces) {

space.innerHTML = " "

}

// Reset to the player's turn by setting playerTurn to true

playerTurn = true;

// Set the text of the turn information div to "Your turn"

document.getElementById("turnInfo").textContent = "Your turn";

}

function cellClicked(cell) {

// If playerTurn is true and the clicked cell is empty:

// Set the cell's innerHTML to "X"

// Set the cell's style color to "red"

// Call switchTurn()

if(playerTurn && (cell.innerHTML!="X" && cell.innerHTML!="O")){

cell.innerHTML="X";

cell.style.color="red";

count++;

switchTurn();

}

}

function switchTurn() {

// 1. If switching from the player's turn to the computer's turn, use setTimeout to call makeComputerMove after 1 second

// (1000 milliseconds). Assign the return value of setTimeout to computerMoveTimeout. The timeout simulates the computer

// "thinking", and prevents the nearly-instant response to each player move that would occur from a direct call.

// 2. Toggle playerTurn's value from false to true or from true to false.

// playerTurn = !playerTurn;

// 3. Set the turn information div's text content to "Your turn" if playerTurn is true, or "Computer's turn"

// if playerTurn is false.

computerMoveTimeout = playerTurn? setTimeout(makeComputerMove(), 1000) : 0; // if switching from player turn, computerMoveTimeout = 1000ms

playerTurn = !playerTurn; // p->c or c->p

document.getElementById("turnInfo").textContent = playerTurn? "Your turn" : "Computer's turn"; // if now player turn, turnInfo div innerHTML = "Your turn"

}

function makeComputerMove() {

var board= getGameBoard();

var index= Math.floor(Math.random()*100);

index=index%9;

var space=board[index];

if(count<9){

while(space.innerHTML=="X" || space.innerHTML=="O"){

var index=Math.floor(Math.random()*100);

index=index%9;

var space=board[index];

}

if(playerTurn){

space.innerHTML="X";

space.style.color="red";

}

else{

space.innerHTML="O";

space.style.color="blue";

}

count++;

switchTurn();

}

}

Here is the HTML (which cannot be changed)

Tic-Tac-Toe

TURN INFO

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

User Defined Tensor Data Analysis

Authors: Bin Dong ,Kesheng Wu ,Suren Byna

1st Edition

3030707490, 978-3030707491

More Books

Students also viewed these Databases questions