Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

The goal of this assignment is to give you some experience working with JavaScript to make a Web page interactive. This assignment will involve creating

The goal of this assignment is to give you some experience working with JavaScript to make a Web page interactive. This assignment will involve creating the game Concentration (aka Memory) where the user will match pictures and earn a score.

Requirements:

1. Create the Game.html HTML page that implements the game using JavaScript.

a. The page must contain a 4 x 5 grid of images. i. The images displayed on the screen must correspond to images stored in a JavaScript array.

ii. Display a common image for all of the images on the screen to hide the real image associated with it.

b. Use JavaScript to implement the game and the interactive behavior of the page.

i. When the game starts, you need to use JavaScript to randomly populate an Array with images (URLs to images stored in an images folder will work) that will be used to secretly associate an image on the page with the actual hidden image.

ii. The page needs to allow the user to select two images at a time, display the secret images associated with the ones that were clicked, and determine the result. When the two images the user selected are a match, then game increases the user's score; otherwise, a non-match should decrease the user's score.

iii. The game ends when all images have been turned over.

c. Display a message when the game ends that contains the user's score and allow them to play the game again.

2. Implement one of the following advanced concepts that requires a little research.

a. Remember the user's score between sessions (the next time they come back to your web page), so that they can beat their highest score. The game should display the user's highest score at all times and alert them when they beat it.

b. Implement a timer, so the user gets more points for finishing the game faster.

c. Dynamically load the images on the page instead of statically writing them in the HTML of the page.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Essentials of Database Management

Authors: Jeffrey A. Hoffer, Heikki Topi, Ramesh Venkataraman

1st edition

133405680, 9780133547702 , 978-0133405682

More Books

Students also viewed these Databases questions