Programming Project 2:
Virtual Pet Simulation

You may work individually or in groups of 2 people to finish this project. We expect that the programming will be your group's effort and not the effort of other persons. If you have questions or need assistance with your program, the instructor and the TAs are very willing to help and are available during their office hours.

Check out the page on programming tips to help you. Also, look at the page on PP 2 grading criteria (and Lab 3 grading criteria) to see the breakdown of the points given for this project.

When you complete your project, create a link to it from your course web page, and copy it to the web server. Make sure that the project works correctly after you have published it.

Polish Existing Work

Good programs include good indentation, good variable names, and comments that help the author (or someone else) understand who developed the program and what is going on. (See the grading criteria to see how comments and program style are evaluated.)

Virtual Pet Simulation Enhancements

For this project you will be changing the picture of the pet depending on its state. You will also add some communication to the owner and visually enhance the page.

  1. Find a picture (or create one) that represents your pet in each of its states. You will need to document on your page where each picture came from so make sure that you are using these pictures legally. The picture should come from a web site that states that the pictures are free for non-commercial use. The image search services for both Yahoo and Google have options for filtering images based on copyright under their "Advanced Search" options. You will be penalized if you incorrectly use any pictures.
  2. To change the picture that is shown of the pet, the first change in your web page is to add an id to the img tag that displays your pet. Then you will need to change the display function to add the following command inside each if action either before or after changing the value of the text field.
    where petpic is the id of your img tag and newpic.gif is the name of the picture file. Each state must have a different picture so make sure that each state is identified in this function.
  3. Add another button in an appropriate place on the form to allow the owner to pause and resume the virtual pet. You will need a global boolean (true or false) variable that keeps track of whether the pet is currently paused. It should initially be set to false. The text on the button should initially say "Pause". If the button is clicked when the simulation is not already paused, then the value of the variable should be changed to true and the text on the button should be changed to "Resume". If the button is clicked while the pet is paused, then the variable should be changed to false and the text on the button should be changed back to "Pause". You will also have to add a check inside the update function that only allows the code in the function to be executed if the pet is not paused. You will also need to disable each of your buttons to prevent users from interacting with your pet when the pet is paused, and then turn them back on when your pet resumes. Buttons have a disabled property that can be set to true or false, as in
    where myBtn is the id of a button.
  4. Once the virtual pet simulation is functioning properly, hide the state and counter text fields by changing the type attribute of those text fields to "hidden".
  5. Add graphics, labels, and/or text to the page to improve the user interface. Add text to describe what to do and align the page and buttons in an easy-to-read format.
  6. Double-check that you have included all appropriate comments Make sure that you have used clear variable and function names, and that your indentation helps to clarify your program's logic.
  7. Recopy your state diagram so that it matches your current virtual pet simulation. Turn in the state diagram with the URL of your project and your name(s) listed on it.