Lab 5
Events and Animation


This week we take a break from your website to practice key animation techniques. The default plan is to create a game using JavaScript and jQuery, separate from your existing website. However, you may if you wish tie the game with your website or its theme.

The best games will receive extra credit, and quite possibly fame!


See the grading sheet. Most of your grade is from meeting the basic requirements, but a non-trivial part is based on creativity / difficulty. It's fine to re-use ideas (and code) from the sample game, but don't expect an A+ from a game that looks and works just like the sample. Note: originality is not required. Making up a new game is fine, but it is also fine to imitate the ideas of some existing game (the code should, of course, be your own or based on the sample games we did in class).

Required Steps before you starting working:

  1. Read the lab
  2. Decide on a general idea for your game.
  3. Describe the game in a few sentences to the instructor. What's the goal? what moves? how does the user interact (clicking, keystrokes?). Changes later are okay.


This is a two week lab. However, prior to the start of the second lab period you must get enough of your game working so that you have at least two objects that move, in a way that is consistent with your game plan. User interaction is highly recommended but not required at this point. Submission: copy all your files to a Lab05beta directory and email a link to the instructor. Be sure to then modify your main Lab05 directory after sending this email, not the beta version. Meeting this milestone on-time is worth about 10% of your final grade.


  1. Make a new Lab05 directory. No need to copy old files into it (unless you think some will help).
  2. Here is what you what you want to have when you are finished. Suggested plan of attack for getting there is below:
    1. A game that has user interaction: in a file called game.html
    2. A story
    3. A goal
    4. Some way to lose (note: this can be waived if necessary, talk to instructor)
    5. At least 3 moving objects are on the screen at the same time at some point in the game.
    6. At least two different "events" that cause interaction. These could be different kinds of clicks (e.g. in different areas), or different kinds of keystrokes (Note: having several keys that all "move" an object is only one kind of interaction. If some keys move, but another is used shoot/blast/score/grab/drop/modify/greet/hail/etc. then that is two different kinds of interaction).
    7. Score that is updated as the user performs successful events.
    8. Required: use jQuery and the ideas that we learned about this week. You can use code from the examples, but there should be substantial modification and original code written by you.
  3. "Nice to have" features that aren't required
    1. High scores recorded in your database
    2. Increasing difficulty and/or increasing capabilities for the user character
    3. Educational value
    4. Some kind of swath of destruction feature
    5. Horses/Hedgehogs/Minions
  4. Suggested plan of attack (see also helpful info at end)
    1. Study the example game to make sure you understand it.
    2. Implement part of your game.
    3. Test it.
    4. Repeat
    5. Test it some more. Early and often. Remember that JS performance may be an issue - don't wait till the end to discover 100 zombie defenders is too much.
  5. Add a link to your game from your default.htm page. Then add good, specific instructions. For this lab, it's okay to have the instructions part of game.html if that works better for your game.
  6. Extra credit: No specific requirements, but the best games will receive a nominal amount of extra credit. "Best" will be measured by the class favorite and the instructor's (family's??) favorite.
  7. Ensure your page works with Chrome. Having it work on IE is encouraged but not required.
  8. Ensure all your pages validate and that you have met all requirements.

Helpful stuff

  1. As always, the "Error Console" in Chrome is invaluable.
  2. Did I mention testing early?


  1. Milestone: send your instructor a link to your Lab05beta directory (see details above; due at start of 2nd lab period).
  2. All of your files for Lab05 should be in a folder called "it452/Lab05" (without the quotes) on the Web drive.
  3. Your main page for Lab05 should be called "game.html" (without the quotes) and placed inside the folder Lab05.
  4. All files must be complete and saved to your Web drive before you submit the hardcopy of your assignment. Do NOT modify your files after you have submitted your assignment.
  5. Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):
    1. A completed assignment coversheet / grading sheet.
    2. The first page of the output of the W3C validator, as run on the final version of your Lab05/game.html. This should show that your document correctly validated, but turn it in anyway if you can't get your page to validate.
    3. A printout of the source to your Lab05/game.html file. Print 4-pages per page, double-sided if possible.
    4. Printouts of external JavaScript files, if any.