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 a.) use Flash instead and/or tie the game with your website or its theme.

 

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

 

Pre-Lab Homework (due by 0800 on day of lab, via email)

 

  1. Read the lab
  2. Decide on a general idea for your game.
  3. E-mail a few sentence description to the instructor. What’s the goal?  what moves?  how does the user interact (clicking, keystrokes?). Indicate if you intend to use JS or FLASH (changes later are acceptable).

 

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 10% of your final grade.

 

Milestones

 

  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 attach for getting there is below:

    1. A game that has user interaction
    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
  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 zombies defenders is too much.

5.      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 favorite.

6.      Ensure your page works with Firefox. Having it work on IE is encouraged but not required.

7.      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.  The penalty for a file that does not validate is 10%.

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 "index.html" (without the quotes) and placed inside the folder Lab01.

3)      Your instructor will assume that your web pages are viewable at http://www.mXXXXXX.it452.cs.usna.edu/Lab05/index.html where XXXXXX is your alpha number. You should check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!

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):

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 Lab03/index.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/index.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.