Java script
crittav7
CIS4004_Assignment3_Concentration.docUniversity of Central Florida
CIS 4004 Web Based Information Technology
Page 2 of 2
Assignment 3
Due, Sunday, November 1, 2020 for 100% credit
Monday, November 2, 2020 for 90% credit
Tuesday, November 3, 2020 for 80% credit
Wednesday, November 4, 2020 for 70% credit
Assignment scope
This assignment is focused on writing JavaScript and will create an electronic version of a card game Concentration.
Concentration
Concentration is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.
Resources
Three files have been provided as templates for this assignment
1. Assignment3_Concentration_Template.html
2. Assignment3_Concentration_Template.css
3. Assignment3_Concentration_Template.js
Assignment submission
Create a single folder for all three files, the .html, .css and .js. Compress the folder and submit the compressed file (e.g. .zip)
Tasks
|
Activity |
|
|
.html |
1. In the <head> link in the external .css file 2. In the <head> link in the external .js file 3. In the <body> a. Create a <div> with id attribute equal to "memory_board" b. In the <script> tag call JavaScript function newBoard |
|
.css |
1. Modify the provided style settings to be different from what is in the template |
|
.js |
1. Declare the following global variables a. Array memory_array that contains 24 items, 12 pairs (e.g. A, A, B, B, C, C, etc... or !, !, @, @, #, #, etc…), there are no strict requirements regarding the data in the array b. Array memory_values with no data; this array stores the character for the two tiles flipped to compare them c. Array memory_tile_ids with no data; this array stores the array position for the two tiles flipped d. A variable for keeping tracking of how many tiles are flipped |
|
|
2. Add an anonymous function to the Array object called memory_tile_shuffle to do the following a. Create a variable set equal to the length of the Array object (i.e. length) b. Create a variable to store a random number (i.e. rand) c. Create a variable for swapping character positions in array memory_array to shuffle them (i.e. temp) d. Write a while loop to loop while the value of --length (using predecrement) is greater than 0 i. Randomly select an array element to swap by setting variable rand equal to function call Math.floor (i.e. to eliminate the decimal portion of the random number), pass as an argument function call Math.random, to generate a random number scaled based on the length of the array then scale by +1 ii. Set variable temp equal to array memory_array index rand iii. Set memory_array index rand equal to memory_array index length iv. Set memory_array index length equal to variable temp |
|
|
3. Write function memoryFlipTile to do the following a. Parameter list includes i. Variable tile ii. Variable val b. Check if the innerHTML of object tile is equal to "" and the length of array memory_values is less than 2, if true, do the following i. Modify the style settings for the background of the tile object ii. Update object tile innerHTML equal to the val parameter iii. Check if the length of array memory_values equals 0 (i.e. there are no tiles flipped yet); if true 1. Call function push on array memory_values passing parameter val as an argument 2. Call function push on array memory_tile_ids passing tile.id as an argument iv. Else if, check if the length of array memory_values equals 1 (i.e. there is one tile flipped); if true 1. Call function push on array memory_values passing parameter val as an argument 2. Call function push on array memory_tile_ids passing tile.id as an argument 3. Check if memory_values index 0 equals memory_values index 1; if true a. Update the value of variable tiles_flipped to be increased by 2 of its current value b. Clear array memory_values c. Clear array memory_tile_ids d. Check if the whole board is cleared by comparing the value of tiles_flipped is equal to the length of array memory_array; if true i. Using an alert dialog box inform the user that the board has been cleared and a new board is being generated ii. Update object document with id memory_board innerHTML to be equal to "" iii. Call function newBoard 4. Else a. Write function flip2Back to flip the turned over tiles to no longer be visible, it should do the following i. Empty parameter list ii. Declare variable tile_1 set equal to object document, element with id array memory_tile_ids, index 0 iii. Declare variable tile_2 set equal to object document, element with id array memory_tile_ids, index 1 iv. Update the style setting background for tile_1 and tile_2 to color of choice v. Update the innerHTML for tile_1 and tile_2 to "" vi. Clear array memory_values vii. Clear array memory_tile_ids b. Call function setTimeout passing arguments function flip2Back and the value 700 (i.e. decreasing this values makes the tiles flip back faster; increasing this values makes the tiles flip back slower) |
|
|
4. Write function newBoard to do the following a. Reset variable for tiles flipped to equal 0 b. Create a variable that will store the HTML generated in this function set equal to an empty string (i.e. output) c. Call anonymous function memory_tile_shuffle for array memory_array d. Write a for loop from index 0 to the length of memory_array i. Concatenate to the string variable, output, the following 1. '<div id="tile_' 2. concatenate the looping variable 3. concatenate '" onclick="memoryFlipTile(this,\'' 4. concatenate memory_array with index of the looping variable 5. concatenate '\')"></div>' e. Update the document object, element id called memory_board, innerHTML so it is equal to the output variable |
|
Test Cases |
|
|
Test Case 1 |
Rendered HTML page looks similar to Figure 1 |
|
Test Case 2 |
Player clicks on one tile, HTML page looks similar to Figure 2 |
|
Test Case 3 |
Player clicks on second tile, HTML page looks similar to Figure 3 |
|
Test Case 4 |
The tiles do not match, HTML page looks similar to Figure 1 |
|
Test Case 5 |
The tiles match, HTML page looks similar to Figure 4 |
|
Test Case 6 |
All tiles flipped, HTML page looks similar to Figure 5 then Figure 1 |
Figure 1 HTML Page
Figure 2 Player clicks one tile
Figure 3 Player clicks second tile
Figure 4 Flipped tiles match
Figure 5 Board cleared
