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...
-
Refer to the information in Exercise 25-8. Create an Excel spreadsheet to compute the internal rate of return for each of the projects. Round the percentage return to twodecimals. ProjectA Project B...
-
Will someone who believes that unemployment is an individuals responsibility believe that the current measure of unemployment over-or underestimates the level of unemployment? Explain.
-
Many state courts have forms posted on their websites. Determine whether California has a form for notice of removal of actions for federal court.
-
In the spring of each year, Steinbrook Colleges theater department puts on a contemporary play. Before the performance, the theater manager instructs student volunteers in their duties as cashier,...
-
Assume you have a portfolio of zero coupon bonds. The first bond is 15 year bond and the other bond is 5 year bond with. Assume the the CURRENT Market value of the first bond is 100,000,000 while the...
-
Factory work can be boring and monotonous. Employees must work at the pace of the assembly line or machine, with output levels closely prescribed and monitored by management. It is not surprising...
-
Which action is most likely to positively influence readers' perceptions of credibility?
-
A neurologist, Dr. Narci, sends every hospitalist who refers patients to his practice a custom portrait of himself. Dr. Narci mainly sees this as a way to boost his own ego, but also a nice gesture...
-
The current price of a stock is $20. In 1 year, the price will be either $28 or $15. The annual risk-free rate is 7%. Find the price of a call option on the stock that has a strike price is of $25...
-
Big Blue University has a fiscal year that ends on June 30. The 2022 summer session of the university runs from June 8 through July 28. Total tuition paid by students for the summer session amounted...
-
1. Develop or propose a Facilitation/Lecture Plan for the subject of your choice. Your plan should NOT be of Faculty of Management Sciences and TUT. (30) Facilitation/Lecture plan includes critical...
-
6) Given the function: f(x)=x-2x - 15 a) Find the value of the slope of the function for x = 0 and x = 10. b) Find the value of x such that the first derivative f'(x) = 0. c) Using your answer from...
-
What are the components of aggregate expenditure? O a. Consumption, savings, government spending, and net exports. O b. Consumption, investment, government spending, and imports. O c. Consumption,...
-
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...
-
The duties of a nozzle and a diffuser are (a) Opposite to each other (b) Identical to each other (c) Not comparable at all (d) None of these.
-
Nozzles and diffusers are widely used in (a) Heat exchangers (b) Refrigeration systems (c) Rockets and other space vehicles (d) None of these.
-
1 ton of refrigeration is equivalent to (a) \(3.517 \mathrm{~kW}\) (b) \(4.202 \mathrm{~kW}\) (c) \(250 \mathrm{kcal} / \mathrm{min}\) (d) \(50000 \mathrm{kcal} / \mathrm{min}\).
Study smarter with the SolutionInn App