COSC 231   WINTER 2012   Project #3   Making a Game Board with HTML, CSS and Javascript

Distributed: Officially: 14 February 2012, Unofficially: 4 February     Due: 6 March 2012

Create a menu driven system. Using a menu of five items, build a game board by clicking on the menu choice, then use mouse event(s) (e.g., onClick) to set any grid image to be the same picture as the menu choice.

Find five different pictures to serve as your menu items: grass, wall, water, monster, hero) Lay out the menu choices samples as a row across the top of the image. Menu items should be the same size. One of those menu choices will be the default that you will use to first draw the grid.

Put a grid of 20 X 20 images, using a default image, beneath the menu.

Select any image from the menu by a single click. The chosen menu item should be highlighted somehow (increase the border width, increase the size, change the border color, ...).

Using the mouse, select an image in the grid, that will then change to match the selected menu item.

See the demo by clicking here.

There are some obvious things that can be done to improve the usability of the page. You will get extra credit for them if you list (in the header) your enhancements and demo them.

Publish and demo

• Upload your working webpage to pp3.html.
• Make a link to pp3.html from your index page.
• Demonstrate your pp3.html and give a code walk through.

Your source code must include your name, the date, COSC 231, and PP3 at the beginning of the file as comments.

Grading

• 10% - Documentation: code documentation, header information (name, semester, pp3, COSC 231)
• 80% - Satisfies specs without errors
• 10% - Code readability (see Style Specification )

Turn in hard copy of source file(s) and demo by the due date to avoid late penalty.