How do I create a JavaScript Tic-Tac-Toe using the giveninstructions? 6.14 LAB: JavaScript Tic-Tac-Toe Investigate the page
Fantastic news! We've Found the answer you've been seeking!
Question:
How do I create a JavaScript Tic-Tac-Toe using the giveninstructions?
Transcribed Image Text:
6.14 LAB: JavaScript Tic-Tac-Toe Investigate the page elements The template.html page contains all needed page elements for a game of Tic-Tac-Toe: • A 3x3 table is used to provide 9 cells for the game board. . A div, initially containing text TURN INFO", provides information about whether the current turn belongs to the player or computer. The div's ID is turninfo. • A "New game" button allows the player to clear the board and start a new game. The button's ID is 'newGameButton". Investigate the existing script elements The template.js script has three declarations: • player Turn: Boolean variable that is true when the turn belongs to the player and false when the turn belongs to the computer. • computerMove Timeout: ID of an active timeout for the computer's move, or 0 if no such timeout exists. • getGameBoard(): Function that returns an array of 9 <td> elements, representing all cells in the game board. The first 3 elements are the top row, the next 3 the middle row, and the last 3 are the bottom row. The getGameBoard() function is implemented for you and requires no alteration. • start(): Function that is called when the page loads, in order to start the game. Events for the "New game" button click and game board cell clicks are registered. Then new Game() is called to start the game. The start() function is implemented for you and requires no alteration. Implement the newGame() function (1 point) Implement the newGame() function to do the following: 1. Use clear Timeout to clear the computer's move timeout and then set computerMoveTimeout back to 0 2. Loop through all game board cells and set the inner HTML of each to a non-breaking space: 3. Reset to the player's turn by setting player Turn to true 4. 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 player Turn is true and the clicked cell is empty: 1. Set the cell's innerHTML to "X" 2. Set the cell's style color to "red" 3. Call switch Turn() Implement switch Turn() part 1: turn-switching logic (2 points) Implement the switch Turn() function to do the following: 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 computerMove Timeout. The timeout simulates the computer "thinking", and prevents the nearly-instant response to each player move that would occur from a direct call makeComputerMove(). 2. Toggle playerTurn's value from false to true or from true to false. 3. Set the turn information div's text content to "Your turn" if playerTurn is true, or "Computer's turn" if player Turn 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 switch Turn() at the end of the function to switch back to the player's turn. Implement switch Turn() part 2: checking for a winner (3 points) Add logic to the switch Turn() 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 player Turn to false and return without switching turns. This prevents the user from being able to place an X after the game is over. 6.14 LAB: JavaScript Tic-Tac-Toe Investigate the page elements The template.html page contains all needed page elements for a game of Tic-Tac-Toe: • A 3x3 table is used to provide 9 cells for the game board. . A div, initially containing text TURN INFO", provides information about whether the current turn belongs to the player or computer. The div's ID is turninfo. • A "New game" button allows the player to clear the board and start a new game. The button's ID is 'newGameButton". Investigate the existing script elements The template.js script has three declarations: • player Turn: Boolean variable that is true when the turn belongs to the player and false when the turn belongs to the computer. • computerMove Timeout: ID of an active timeout for the computer's move, or 0 if no such timeout exists. • getGameBoard(): Function that returns an array of 9 <td> elements, representing all cells in the game board. The first 3 elements are the top row, the next 3 the middle row, and the last 3 are the bottom row. The getGameBoard() function is implemented for you and requires no alteration. • start(): Function that is called when the page loads, in order to start the game. Events for the "New game" button click and game board cell clicks are registered. Then new Game() is called to start the game. The start() function is implemented for you and requires no alteration. Implement the newGame() function (1 point) Implement the newGame() function to do the following: 1. Use clear Timeout to clear the computer's move timeout and then set computerMoveTimeout back to 0 2. Loop through all game board cells and set the inner HTML of each to a non-breaking space: 3. Reset to the player's turn by setting player Turn to true 4. 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 player Turn is true and the clicked cell is empty: 1. Set the cell's innerHTML to "X" 2. Set the cell's style color to "red" 3. Call switch Turn() Implement switch Turn() part 1: turn-switching logic (2 points) Implement the switch Turn() function to do the following: 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 computerMove Timeout. The timeout simulates the computer "thinking", and prevents the nearly-instant response to each player move that would occur from a direct call makeComputerMove(). 2. Toggle playerTurn's value from false to true or from true to false. 3. Set the turn information div's text content to "Your turn" if playerTurn is true, or "Computer's turn" if player Turn 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 switch Turn() at the end of the function to switch back to the player's turn. Implement switch Turn() part 2: checking for a winner (3 points) Add logic to the switch Turn() 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 player Turn to false and return without switching turns. This prevents the user from being able to place an X after the game is over.
Expert Answer:
Related Book For
Systems analysis and design
ISBN: 978-0136089162
8th Edition
Authors: kenneth e. kendall, julie e. kendall
Posted Date:
Students also viewed these electrical engineering questions
-
create a tic tac toe gui application in python using simple code for python 101 student.
-
a. In Chapter 9, you created a Tic Tac Toe game in which you used a 2D array of characters to hold Xs and Os for a player and the computer. Now create a JPanel that uses an array of nine JButtons to...
-
a. Create a Tic Tac Toe game. In this game, two players alternate placing Xs and Os into a grid until one player has three matching symbols in a row, horizontally, vertically, or diagonally. Create a...
-
Sunland Company has the below information for accruals for the year ended December 31st, 2022. the company adjusts its accounts annually. Chapter 4 Homework e Question 6 of 7 Current Attempt in...
-
The following information was drawn from the accounting records of Boulder Manufacturing Company: Beginning Ending Raw materials inventory............................. $ 8,000.............. $ 9,000...
-
Distinguish between real property, personal property and intellectual property. Distinguish between a chattel and a chose in action. Explain how personal property can be used to secure a loan.
-
How are (a) a time-based agenda and (b) an action item list used in a marketing program meeting?
-
From an ethical perspective, some believe that it is never justifiable for an individual or business to declare bankruptcy. Others believe that some actions are appropriate only in extreme...
-
Vitex, Incorporated manufactures a popular consumer product and it has provided the following data excerpts from its standard cost system: Inputs ( 1 ) Standard Quantity or Hours ( 2 ) Standard Price...
-
Exhibit 5.26 presents risk ratios for Walmart for 2014 and 2013. Exhibits 1.19, 1.20, and 1.21 in Chapter 1 present the financial statements for Walmart. REQUIRED a. Compute the values of each of the...
-
Transcribed image text: Represent the situation as a game and find the optimal strategy for each player. State your final answer in the terms of the original question. Political scientists...
-
An important first step of exploratory data analysis is always to visualize the data. Construct a scatterplot of each time series (i.e., two different plots). If you need pointers on how to make a...
-
Cleanie Wombat Cleanie Wombat is a small Australian company that makes cleaning products. The chemical formulas used for its products were developed through R&D conducted by the company's small R&D...
-
As a manager at Yummy Melts, Martin is responsible for the firm's Just Right brand of ice cream. He recently approved a proposal to test market new ice cream flavors. He is also considering the...
-
Cogenesis Corporation is replacing their current steam plant with a 6-megawatt cogeneration plant that will produce both steam and electric power for their operations. What is the impact of a 5% and...
-
Suppose ABC firm is considering an investment that would extend the life of one of its facilities for 5 years. The project would require upfront costs of $9.97M plus $28.94M investment in equipment....
-
On 31 December Yr 5, Matahari Sdn Bhd purchased a new machinery costing RM 100 000. Matahari Sdn Bhd estimates the machine to be utilize for 10 years, at the end of which it will have a residual...
-
Explain the circumstances that could result in a long-term bank loan being shown in a statement of financial position as a current liability.
-
Michael also assembles packages of camping kits. Each kit is a group of separate products that are sold as a package. Each package (called a PRODUCT) is built using many parts, which vary from...
-
When should check boxes be used?
-
The base ticket price for Cloudliner Airlines is determined by the distance traveled and the day of the week a passenger is traveling. In addition, the airline adjusts its ticket prices based on a...
-
For 2004 Stoneland Corporation re- ported net income $24,000; net sales $400,000; and average shares outstanding 6,000. There were no preferred stock dividends. What was the 2004 earnings per share?...
-
Sue Leonard, the president of Leon Company, is pleased. Leon substantially increased its net income in 2004 while keeping its unit inventory relatively the same. Dan Noonan, chief accountant,...
-
(a) What are generally accepted accounting princi- ples (GAAP)? (b) What body provides authoritative support for GAAP? AppendixLO1
![Mobile App Logo](https://dsd5zvtm8ll6.cloudfront.net/includes/images/mobile/finalLogo.png)
Study smarter with the SolutionInn App