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...
-
Failure to meet price standards is the responsibility of the purchasing officer. Do you agree? Explain.
-
A 200-L rigid tank contains propane at 400 K, 3.5 MPa. A valve is opened, and propane flows out until half the initial mass has escaped, at which point the valve is closed. During this process the...
-
Identify the research scenario, including the general area of focus. Develop a hypothetical research scenario that would necessitate the use of the Action Research Approach and a Posttest With a...
-
Powells Book Warehouse distributes hardcover books to retail stores and extends credit terms of 2/10, n/30 to all of its customers. At the end of May, Powells inventory consisted of books purchased...
-
You recently joined a prestigious venture capital firm in Munich. As one of your first tasks, you should analyze the performance of the following mutually exclusive investment opportunities by...
-
Using the check register below and the following bank statement, prepare a bank reconciliation for Lee.com. Note: Input all amounts as positive values. Round your answers to 2 decimal places. NUMBER...
-
Electrolux have contacted the Nene Electronics Company which manufactures subassemblies for electronics hardware. The company is based in Cranford, Northants, and has a world-wide reputation for the...
-
A delivery truck was just purchased for $80,000, It's estimated salvage value at the end of its useful life, in 8 years, is $20,000. Assume 25% tax rate, and straight-line depreciation. a. What is...
-
Given the facts of the case, summarize the advantages and disadvantages of using A.I to the organization and the society. State how A.I have been of benefit to you personally. Describe the measures...
-
The training is estimated to cost $10,000. Lenova Digital have told you that they are considering making the payment either by using cash or the company credit card. They will be making the purchase...
-
Which of these items are set to Inflation by default but can be changed individually? Personal Exemptions Federal Income Tax Brackets Annual Gift Tax Exclusion Unclassified Holdings Unclassified...
-
After closing the accounts on July 1, prior to liquidating the partnership, the capital account balances of Gold, Porter, and Sims are $26,700, $37,800, and $16,800, respectively. Cash, noncash...
-
Zervos Inc. had the following data for last year (in millions). The new CFO believes (1) that an improved inventory management system could lower the average inventory by $4,000, (2) that...
-
Borrowing costs should be recognised as an expense and charged to the profit and loss account of the period in which they are incurred : A. If the borrowing costs relate to qualifying asset B. If the...
-
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...
-
Dalia owns a small public relations firm and wants to contract with her insurance provider to offer her employees the option to purchase short-term disability insurance. The insurance will pay out...
-
Distinguish between portfolio (capital) investment and direct investment.
-
What are performance requirements?
Study smarter with the SolutionInn App