For this assignment, you will create a simple game with JavaScript (and jQuery and Raphaël).

The Game

If I've learned anything from the kinds of games people play on their phones, it's that everybody loves clicking little shapes to make them disappear. Let's do that.

We will draw a game area (a Raphaël paper object) let the user choose their difficulty, and which shape they want to appear. When they start the game, several shapes appear randomly on the board and move in random directions.

As they click the shapes, they will disappear (be “zapped”). The goal is to zap as many as possible.

Video: Assignment 4 demo

Requirements

For this assignment, you must use Raphaël to create a game area. When the user selects their options for the game and clicks a button, they should see some shapes appear, and be able to click them to zap them.

Requirements for the game:

• A choice of “difficulty” as a text input. Higher numbers are harder. Style the input (CSS width property) so it's a reasonable size.
• The way the game becomes “difficult” is up to you, but some options: more shapes; smaller shapes; faster shapes; less time to zap them.
• A selector where the player can choose the shape they want added to the game, with at least three options.
• At least one of the shapes must be drawn with as a .path (not one of the built-in shapes Raphaël will draw for you).
• The shapes appear at random locations and move in random directions (i.e. towards a random point).
• Count the score: the number of shapes “zapped” to make them disappear, and the number that “escape”.
• Make it look nice. Make it fun to play.

See some Assignment 4 hints for some tips on the required behaviour.

Suggested Plan

Break your game's behaviour down into chunks, instead of trying to tackle the whole thing at once. Work on one chunk at a time, and make sure it's working before you move on.

A suggestion:

1. Create the game board, and get (several of) one kind of shape drawing when the button is clicked.
2. Add other options of shape.
3. Animate the shapes so they move when they are created.
4. Make the shapes disappear when the animation is over.
5. Make the shapes disappear when they are clicked.
6. Count the score.
7. Fiddle with the game difficulty so it's fun to play.

Submitting

Upload all of your files (HTML, CSS, JS) to an assignment4 folder in your public_html. Find your site on the web server and make sure everything is still working

Submit the URL of your HTML page to the CourSys activity Assignment 4. We will find the rest of your story by navigating from there.