Assignment 4--Clickable grid, animation, input elements, and project checkpoint

Due: October 16, 2017

Make a clickable grid by adding onclick handlers to all table cells

You can use a JavaScript statement like the following to get a list of all table cells in the document:

var cells = document.getElementsByTagName("td");

You can replace document in the statement above with a reference to another element to restrict the elements retrieved by getElementsByTagName. For example, if I wanted to get a list of all the paragraphs in the div with id div1, I could use statements like this:

var aDiv = document.getElementById("div1");
var paragraphs = aDiv.getElementsByTagName("p");

By iterating through the list of table cells, you can set an event handler for each cell with a statement like this:

cells[i].onclick = function() { ... };

Replace the three dots in the braces with statements for the body of the function. In the body of the event-handler function you can use this to refer to the HTML element that generated the event.

Getting a list of elements of a certain type and then iterating through the list to install event handlers is a useful technique. Manually typing in HTML/JavaScript code for the event handlers would be tedious and error-prone.

You will probably want to test the event handlers by having the onclick handler display an alert, just to see if they are set up correctly.

Modify the contents and style of the cell the user clicked

When the user clicks on a table cell your onclick handler will be called. In the onclick handler, get the row and column of the cell that the user clicked on. You can use statements like this to get the coordinates:

var col = this.cellIndex
var row = this.parentNode.rowIndex;

These statements make use of properties defined for table cells and tablerows.

Once you have the coordinates of the table cell, use those coordinates to modify the contents of the cell. A statement like this can be used to access the cell:

var cell = gridTable.rows[row].cells[col];

In the preceding code, gridTable is a variable that refers to the HTML table element.

After executing the statement above, cell will refer to the same element that this refers to in the event handler, so you could use this to modify the cell without determining the coordinates. However, for other parts of your game you will probably need to be able to determine the coordinates of a cell and use coordinates to get a reference to a cell, so for this assignment be sure to use the coordinates as described here.

Once you have a reference to the table cell, you can use its innerHTML property to change its contents and you can use the style property to change the style. For this assignment it doesn't really matter how you change the contents or the style as long as they are easily noticed changes.

EXAMPLE: genSample2.html is an example of adding event handlers to HTML elements. The JavaScript code in the example doesn't use row and column indexes, but it uses some of the same concepts that you need to use for this part of the assignment.

Display a message that includes the table cell coordinates

In addition to modifying the clicked cell, display a message somewhere on the page that tells the coordinates of the modified cell. To display the message, use document.getElementById() and the innerHTML property. Displaying the coordinates in an alert dialog box does not satisfy this requirement.

Use JS and CSS to position and animate an HTML element

On your game grid page, use JavaScript and CSS to position and animate an HTML element. Your animation should include changing the position of the element, but you can also change colors, etc. Your animation should start when the page is loaded and last about 5 or 10 seconds.

You can see some sample animation code on the Notes page: sample animation code You should not copy my animation code to your assignment. Instead, use it as an example to write your own code. Make the animation on your page different than mine. For example, instead of moving from left to right, you can move an element from top to bottom. I will deduct a penalty if your animation is similar to my example.

Use HTML input elements and events in your game

Add HTML input elements to your game grid page that allow the user to set up, play, and/or reset the game. For example, in Battleship you could provide input elements that let the user place ships in the grid. In a word search puzzle you could provide input elements that let the user select the word list and add them to the grid.

Required elements You must use the following input elements:

Use additional kinds of input elements (check boxes, radio buttons, text area, etc.) if they are useful for your game.

Don't put input elements inside a form unless you want the contents of the input elements sent to a server. Since we are working with client-side applications in this class, you should not use forms (or submit buttons) for any assignments or for the project in this class.

Make sure that you display the results of user input so that I can see that you know how to get user input values from input elements.

You are not required to have all of the game logic code written at this point in the term, so you might not have completed the code that actually makes use of the user input that you set up in this assignment. If not, then you should use alerts or messages in a debugging div to show what values were entered. For example, when the user clicks on a button, there should be something on the page or in an alert that identifies which button was clicked. For a text field, the contents of the text field should be displayed (in an element other than the text field), and likewise for a select element.

Project Checkpoint: Progress on Game Logic

The assignments focus on the user interface for your project game. There is a lot of other code that is required to make your game functional that has little or nothing to do with the user interface and the assignments. I will refer to the code that works with the model and implements other game functionality, as the game logic. There will be a couple of weeks at the end of the term when you won't have an assignment and can focus on game logic, but you shouldn't wait until then to do all of the work on game logic. For the project check point you should look at what game logic code you will need and then implement some of it.

Make an HTML file named checkpoint.html that describes your progress on implementing the game logic for your project. List the main components of your project's game logic. Your software design should be helpful for doing that. (See the Project page and Assignment 1 for examples and more information about game functionality and game logic.)

For each of the main components of your game logic, tell whether it has been implemented yet or not. For game logic components that have been implemented, give instructions that tell how I can try out that part of your game.

To receive full credit for this checkpoint you should have roughly one-quarter (or more) of your game logic implemented. Be sure to continue working on your game logic while you are working on the assignments, so that you can finish as much as possible before crunch time at the end of the term.

Turn in

Put your checkpoint.html file in a zip file with the HTML, JavaScript, CSS, and image files for this assignment. Turn in the zip file as instructed on the main Assignment page.

Points
15 onclick handlers for all table cells
20 Modifies the contents and style of a cell that the user clicks
20 Displays a message in the document (not an alert) that includes the table cell coordinates
10 Uses required elements (text field, select, button)
15 Uses alerts or debugging div to show that input elements work
20 Uses JS and CSS to position and animate an HTML element
25 Includes a checkpoint.html file with progress report
125 TOTAL

Deductions:
-10 if animation is the same as the example (left to right)