Hiding Game

1	2	3	4

This project will give you practice with loops, conditional statements, using Document.writeln, and CSS.

The game goes through a sequence of days. On each day the user will hide in one of four possible hiding places, and one of the hiding places (selected randomly) will explode! The goal is to survive as many days in a row as possible without hiding in the location that explodes. It's moderately fun.

The project is probably easiest to understand by running this demonstration page. Your project should appear and function exactly like the demonstration page.

All of the following should be implemented using JavaScript embedded in your HTML webpage. You will need to make heavy use of Document.writeln.

Begin a table. Create a row that contains three headings: Day, Hiding Place, and Explosion.

The game begins on day 1. For each day, your program should loop through the steps below:

1. The following prompt appears:

   It is day 1. Where will you hide (1, 2, 3, or 4)?

   If the user enters anything other than 1, 2, 3, or 4, then they will see an alert box that says "That is not a valid choice", followed by the original prompt. This cycle will continue until the user enters a value in the range from 1 to 4.
2. Once the user has selected a valid hiding location (1, 2, 3, or 4), one of the hiding places will randomly explode. To determine a random location in the range from 1 to 4, you may use the following statement:

   var explosionLocation = Math.floor(Math.random() * 4) + 1;

3. The user should now see an alert box like the one below, which illustrates the case where hiding place 3 is the one where the explosion occurs:

   Hiding place 3 has exploded!

4. If the explosion has occurred in the same place where the user is hiding, then they should see an alert box with the message below, which illustrates the case where the user has died on day 8:

   You have died. You survived for a total of 7 days.

   On the other hand, if the explosion has occurred in a location that is not the same as the place where the user is hiding, then they should see an alert box like this:

   You have survived!

5. Next, add a row to your table that has three numbers. The first number is the current day. The second number is the user's hiding location. The third number is the location where the explosion occurred.
6. If the user has survived, then you should increment the day, and repeat all of the steps described up to this point, starting with step number 1.
   
   On the other hand, if the user has died, then you should do the following:
   1. Add a row to your table that spans all three columns, and looks like the one below, which illustrates the case where the user has died on day 6:

      Survived for 5 days

   2. Close the table.
   3. Prompt the user with this message:

      Do you want to play again (Y/N)?

   4. If the user enters "Y" or "y" then you should begin a new table, and start all over again with day 1.
      On the other hand, if the user enters anything other than "Y" or "y", the game should stop.

   ---

   Hints
   • Its probably easiest to implement this entire project in JavaScript, without any HTML before or after the script tags. You should be using Document.writeln to produce the tables.
   • Most of the loops in this project can be handled elegantly with do-while loops, rather than while loops. But the choice is yours.
   • Identifiers and/or classes can be used with Document.writeln, but you will find that you have to nest quotation marks. Don't forget that you must alternate single and double quotes. For example:

     Document.writeln("<p id='Bob'>Hello There.</p>");

   ---

   Additional Requirements
   • You must use an external CSS file.
   • You may not have any style rules at all in your HTML (not even the border attribute for tables).
   • Your style must look exactly like that shown in the demonstration page
   • Note that two entries in the table should have a red background-color.
   • You must never output the gramatically incorrect phrase "1 days"; instead the output should say "1 day", both in the last row of the table, and in the alert message that mentions days.
   • Both your HTML file and your CSS file must satisfy the corresponding validators. (Any extra warnings or errors will result in a penalty.)
     • HTML Validator
     • CSS Validator

   ---

   Submitting the Project

   You should create a zip file that includes both your HTML file and your CSS file. You will not receive credit for submitting a file that is not a real "zip" file. In particular, "rar" files or "7z" files will not be graded. Submit the zip file to the submit server, as usual. You may submit as many times as you like -- we will only grade the last submission. Late submissions received up to 24 hours beyond the deadline will be accepted, but will be penalized 20 points. No submissions will be accepted more than 24 hours past the deadline.