Lab 5

Events and Animation

 

 

Introduction

 

This week we take a break from your website to practice key animation techniques. The default plan is to create a game using YUI and JavaScript, 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!

 

Grading

 

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.

 

Milestones

 

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.

 

Procedure

 

  1. Make a new Lab05 directory.  No need to copy old files into it.

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 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.
    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.
  1. “Nice to have” features that aren’t required
    1. Score
    2. High scores recorded in your database
    3. Increasing difficulty and/or increasing capabilities for the user character
    4. Educational value
    5. Some kind of swath of destruction feature
    6. Zombies
  2. 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.
  3. 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 Firefox. Having it work on IE is encouraged but not required.

8.      Ensure all your pages validate and that you have met all requirements.

     

NOTE: all HTML files must validate as XHTML without errors for full credit. 

Helpful stuff

  1. As always, the “Error Console” in Firefox is invaluable.
  2. Did I mention testing early?

 

Deliverables

1)      All of your files for Lab05 should be in a folder called "Lab05" (without the quotes) on the Web drive.

2)      Your main page for Lab05 should be called "game.html" (without the quotes) and placed inside the folder Lab05.

3)      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.

4)      Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):

a)      A completed assignment coversheet.  Your comments will help us improve the course.

b)      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. 

c)      A printout of the source to your Lab05/game.html file (not the rendered page that you normally see with Internet Explorer/Firefox).   Truncated lines are not acceptable – use Crimson Editor vice Notepad if needed for printing.  You could also paste into Microsoft Word etc. if needed.

d)      Printouts of external JavaScript files, if any.