Question: Javascript i need help adding this to my switchTurn function Implement switchTurn() part 2: checking for a winner (3 points) Add logic to the switchTurn()
Javascript
i need help adding this to my switchTurn function
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.
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
Get step-by-step solutions from verified subject matter experts
