Create a Web page called "game.html" and add a layer to it, which will be treated as an object, with an image for its contents. Add another image which will start the game when clicked on. When the game starts, the layer, including the image, will move randomly in any direction but not more than 10 pixels. The layer will not leave the visible screen space. You may assume an 800x600 resolution setting.
Add a timer, or loop, to determine how long the game will run. This should be set to 30 seconds. You will need to experiment to determine how many times a loop must repeat to make it last 30 seconds. One of the ways to accomplish this is by using the command "setTimeout()" which executes a code some time in the future. As an example, the following command will call the function "FlyLogo" exactly 50 milliseconds after this line is executed:
The game should proceed as follows:
a. The score starts at 0. Each time the user clicks the image, one point is added to the score. This score is constantly displayed either on the status bar or somewhere in the background.
b. On every click, the layer also moves randomly, by not more than 10 pixels, to another part of the screen.
c. The game continues until the time runs out. Optionally, a dialog box appears telling the user his or her final score. The user now has the option to restart the game by clicking the "Start" image again.
Please find attached the game.html file and two images (imageGame.jpg and imageHit.jpg). I recommend that you find some images on the Internet or ...
This solution provides a tutorial on the given Web Design project.