Week 5 Instructions
2. Go to the tiles.js file in your text editor and , then declare the following three global variables:
- flipCount-used to track the number of tiles currently flipped over. Set its initial value to 0
- firstFlip- used to reference the second tile flipped over
- secondFlip- used to reference the second tile flipped over
3. Use the addEvent() function to run the setupTiles() function when the page is loaded.
4. Create the setupTiles() function. The purpose of this function is to create arrays of the 16 tile pieces and the corresponding tile images. Add the following commands to the function.
- Declare an array named tiles. Populate the array with all of the images in the current document that have a class name of tile and are enclosed within the <a> tag.
- Create an array of tile images of the same size as the tiles array
- Loop through the first half of the tileImages array. Within the first half of the array, create image objects from the image file tileimageindex.jpg , where index is the value of the counter variables.
- Loop through the second half of the tileImages array. Create a second set of the same image objects you created with the first loop. After running the two loops, the tileImages array should be populated with pairs of matching image objects.
- Sort the contents of the tileImages array using the randomSort() function supplied in the file. This randomizes the order of the image objects in the tile array for later use in constructing the concentration board.
5. Attach each image object from the tileImages array to a board tile in the tile array by adding the following commands to the setupTiles() function:
- Loop through the tiles array. For each tile in the array, create a custom property named image that points to the corresponding tile image object from the tileImages array.
- Add an onclick event handler to each item in the tiles array that runs the flipTile() function.
6. Create the flipTile() function. The purpose of this function is to flip over the selected tile from the board, displaying the time image attached to it. Add the following commands to the function:
- Insert an if condition that test whether the flipCount variable is equal to 0. If it is, set the src of the flipped tile (referenced using the this keyword) to the source of the custom image property, update the value of the firstFlip variable to point to the flipped tile, and increase the value of the flipCount variable by 1.
- Otherwise, if flipCount is equals 1, then do the following: (a) Change the source of the flipped tile to the source of the custom image property of the tile, (b) Set the reference of the secondFlip variable to the flipped tile. (c) Update the flipCount variable by 1. (d) Call the checkTiles() function.
- After the if condition, return the value false to halt the propagation of the click event.
7. Create the checkTiles() function. The purpose of this function is to test whether the two flipped tiles display the same image. Add the following commands to the function:
- Insert an if condition that test whether the source of the custom image property for the firstFlip variable is equal to the source of the custom image property for the secondFlip variable. If they are not equal, then run the flipBack() function after 0.8 seconds.
- Otherwise, if they are equal (the tiles show the same image), then (a) Set the flipCount variable to 0, (b) Set the opacity of firstFlip and secondFlip to 70%. (c) Change the onclick event handlers for firstFlip and secondFlip to an anonymous function that does nothing but return the value false. You change the onclick event handler function for these two solved tiles to prevent the user from attempting to flip them again.
8. Creat the flipBack() function. The purpose of this function is to flip back two tiles that do not match. Add the following commands to the function:
- Set the source of the firstFlip and secondFlip tiles to the tile.jpg image file.
- Change the value of flipCount back to 0
9. Program the actions of the Reload Tiles and Show Tiles buttons. Scroll back up to the setupTiles() function, and then add the following commands:
- The id of the Show Tiles button is showAll. When this button is clicked, run an anonymous function that loops through the tiles array, changing the source of each tile to the source of the tile’s custom image property, revealing the tile image attached to the tile.
- The id of the Reload Tiles button is reload. When this button is clicked, run an anonymous function that reloads the current Web page using the location.reload() property and method.
10. Save the files, and then load tiles.htm in your Web browser.
11. Play the concentration game and verify the following:
- When you click one of the 16 tiles on the board, a tile image is displayed.
- When you click two tiles that don’t match, both tiles are flipped back over after a short interval
- When you click two tiles that do match, both tiles are grayed out and cannot be flipped again.
- When you click the Show Tiles button , the solution to the board is displayed .
- When you click the Reload Tiles button, a new concentration board is generated.