Creating A Game In JavaScript

If you want to, you can work with a SINGLE PARTNER for this homework assignment.  You may also do the assignment on your own, if you wish. If you work with a partner, then you will both get the same grade for this assignment, and for the revision to the assignment (if you two choose to submit a revision).

Create a Nifty Game

For this assignment, your goal will be to create a visually interesting, engaging game of some sort, using JavaScript.  You are welcome (and encouraged) to find a game on your own ; a 'Battleship' style game is specified below, in case you don't have any other ideas.  You will be presenting your game to your peers on the final day of class, so please make your game cool!

Alternative Proposal:
If you choose to go with a non-battleship game (and you are encouraged to go with a non-battleship game :)  ), you need to submit a quick, 1 page proposal detailing what you're planning on doing.  It should either contain a reference to something that clearly describes the game, or it should clearly (but briefly) describe the game itself.  You should also sketch our your basic plan for implementing the game, much like has been done below, for the BattleShip example.  While you're free to change the details of your game, a fraction of your grade will be dependent on you delivering the game you proposed.  This grading critieria is mainly here to prevent people from changing their game at the very last minute, and accidentally choosing something unacceptable ("Me & 3 buddies are going to do Tic-Tac-Toe." :)  )
 

The following was added on 2/16/2007, and is optional for 2007 Winter term, but a Really Really Good Idea To Think About :)

You should also include a list of topics that you'll need to learn in order to implement this, as well as a short 'backup' plan for each area, so that if you can't get the new material to work, you've got a backup plan to fall back on.  For example, you may wish to have your game respond to keyboard input, which we haven't yet covered, so you should list 'writing code that reacts to keyboard input' as something you'll learn.  In case you don't get that to work, you might list as your back up plan 'Use the event handlers of the HTML button to react to user input'  So if you can't get the keyboard thing to work, the player can still click on buttons.

Citations

If you make use of any materials (from the Internet, books, friends, etc), you should credit them in your main .HTML page.  For websites, make sure to include the URL of the page (and the date you got the materials from the page), for books, include the title, author, and ISBN number, and for friends/coworkers/etc, include their names (first and last).  IN ALL CASES, you should clearly, concisely, summarize what you obtained, and how you made use of it.

"BattleShip" clone

There's a board game that's available called "Battleship", in which you & your opponent attempt to sink each other's ships by shooting at locations on the other person's board.  The board is hidden from your opponent, thus making the game challenging, fun, and yet kinda random.  An example of a 'board' is shown below, where the shaded-in ovals represent ships.

For this homework assignment, you should use some sort of graphical user input (GUI) to allow 2 players to play the game. I'd suggest creating a TABLE element on the web page, and putting an image into each square of the table.   You can allow each of the players to place their pieces by either prompting them for the (x,y) location (and direction) of each of the ships, or maybe through some sort of form-based input scheme.  Once the game is running, you should announce which player's turn it is (either via the alert command, or (better yet) by using the DOM to change something on the page), and then you should go through & set each of the squares in the table to the appropriate image.  You should then allow the user to fire at a square by clicking on a square.

There are a variety of interesting problems to solve here - you may want to keep two tables, and use one table to display the current player's ships (as well as the locations where the opponent has shot in the past), and then use the other player to display the opponent's ships (as well as the locations where the current player has shot in the past (both successfully, and misses)).

You may want to keep track of this data using two multidimensional JavaScript arrays (one per player).  The arrays might be filled with numbers, in order to match the above picture.  You can use the number "1" to represent a square that has nothing in it (like (0,0)).  Use the number 2 to indicate that the space is occupied by a ship, but has not yet been shot (such as (3, 0), or (3,1) at the start of the game).  Use the number 3 to indicate a space that is occupied by a ship, and has been shot by the opponent.  Similarly, use the number 4 to indicate a space that is occupied not by a ship, and has been shot by the opponent. 

Restrictions and Requirements:

• Your .HTML file must work correctly in either Microsoft Internet Explorer (version 6 or higher) or Mozilla FireFox (Version 1.5 or higher), or both.  You should clearly document which one(s) you've tested it on

What to hand in:

1. All files that relate to your game.  Please organize your files so that a single directory (with optional subdirectories) completely contains your game (i.e., so that your game can be easily copied to, say, a web server)

How To Hand In Your Homework:

This will be handed in via the Vault system.  If you need help, we can cover this again in class, on the date that this assignment is due.