Question
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 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)
td { border: 1px solid lightblue; padding: 10px; font-size: 64pt; font-family: Courier }
Tic-Tac-Toe
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started