JavaScript Functions

Open the ag_squares.js file in your editor.

Go to the playPokerSquares() function. Within the function add an onclick event handler to the startButton object that runs an anonymous function when the user clicks the Start Button on the webpage. Within the anonymous function, do the tasks laid out in the remainder of this step.

Set up the initial game board by doing the following:

1. Set the gameTotal property of the squareGame object to 0.

2. Remove the current game score by changing the value of the gameScore input box on the page to an empty text string.

3. Remove the current game result by changing the text content of the gameResult element on the page to an empty text string.

4. Remove the current row and column totals by looping through the contents of the rowSumCells and columnSumCells object collections, setting the text content of each cell to an empty text string.

5. Remove the current card images by looping through the cardImages object collection, setting the source of every inline image to the "ag_trans.gif" file.

Create a new pockerDeck object named myDeck and use the shuffle() method to randomize the order of its cards.

Create a new pokerCard object named myStarterCard. Apply the shift() method to the cards array of myDeck to store the first card from the deck in myStarterCard. Change the src attribute of the newCard inline image by calling the cardImage() method for the myStarterCard object.

The starter card is added to the board by clicking a cell in the grid table where the user wants the card placed. For every image in the cardImages collection, create an onclick event handler that does the following:

1. Applies the cardImage() method to the myStarterCard object to display the image of the current card in the event object target.

2. Stores the row number and column number of the clicked image in the rowNum and colNum variables. (Hint: Use the charAt() method to retrieve the second and third characters of the id attribute of the event object target.)

3. Applies the insertCard() method to the squareGame.cardGrid[rowNum] object to insert a card into the new grid. Use myStarterCard as the poker card and colNum as the location in the insertCard() method.

4. After the card has been placed within the grid, it cannot be changed. Set the onclick event handler of the event target to null to prevent the user from re-clicking the cell later in the game.

Finally, test whether the user has completed the grid table. Within the onclick event handler of the previous step, test whether there are more than 27 cards left in the deck. If there are more than 27 cards left, the game continues. Shift the next card from myDeck into the myStarterCard object and change the src attribute of newCard to display the image of the next starter card.

Otherwise, if the grid table is completed and the game is over, calculate the game score and totals for the poker hands in each row and column as follows:

1. Indicate that the game is over by changing the src attribute of the newCard image to the "ag_cardback3.png" file.

2. Calculate the row poker hand totals by creating a for loop with a counter variable that goes from 0 to 4. Declare the rowTotal variable equal to the value returned by the calcRowPoints() method of squareGame object, using your counter variable as the parameter value. Add rowTotal to the value of the gameTotal property of the squareGame object. Display the rowTotal value in the element with the id rowindexsum where index is the value of your counter variable.

3. Calculate the column totals with another for loop as you did in the previous step for the row totals. Use the calcColumnPoints() method to calculate the totals for each column poker hand, adding the column total to the gameTotal property and displaying column total value in the element with the id colindexsum.

4. Change the value of the gameScore input box to the value of the gameTotal property of the squareGame object.

5. Show whether the user won or lost by changing the text content of the gameResult element to the text returned by the squareGame objects gameResult() method.

Document your work with comments.

---------------------------------------ag_squares.js---------------------------------------

"use strict";

/*

New Perspectives on HTML5, CSS3, and JavaScript 6th Edition

Tutorial 14

Review Assignment

Author:

Date:

Filename: ag_squares.js

*/

window.addEventListener("load", playPokerSquares);

function playPokerSquares() {

var newCard = document.getElementById("newCard");

var startButton = document.getElementById("startButton");

var rowSumCells = document.querySelectorAll("table#grid th.rowsum");

var colSumCells = document.querySelectorAll("table#grid th.colsum");

var cardImages = document.querySelectorAll("table#grid tr td img");

var gameScore = document.getElementById("gameScore");

var gameResult = document.getElementById("gameResult");

}