This page has some hints for Assignment4.

Drawing

You will need a for to draw several shapes, and an if (inside the for) to draw the shape the user requested.

It may be easier to draw all of your shapes in the same place and then translate them to a random location. I drew all of mine around 0,0, generated random x and y values, and applied a transform to get it there:

if ( ??? ) {
  shape = ??? /* draw shape 1 near (0,0) */
}
if ( ??? ) {
  shape = ??? /* draw shape 2 near (0,0) */
}
if ( ??? ) {
  shape = ??? /* draw shape 3 near (0,0) */
}
x = ???
y = ???
shape_attr = {
  'transform': 't' + x + ',' + y,
  'fill': ...
  ...
}
shape.attr(shape_attr)

Make sure you give the shapes a 'fill' so the player can click the middle, not just the outlines.

The .path() shape needs to be closed so it will look nice filled: end your path string with Z.

Keeping Score

Keeping the number zapped and missed is a little tricky. The strategy needs to be:

• When the shape is created, give it a .click() handler so we can zap it when the user clicks.
• When it's created, start an animation that determines the time during which it can be clicked: at the end of the animation, we'll declare it missed.
• In the shape's click handler, remove it from the SVG and count it as zapped.
• When the animation is over, remove the shape from the SVG and count it as missed.

To do this, we need to use more arguments on .animate():

shape.animate(attributes, time, 'linear', callback)

We have see the first two arguments: new attributes, and how long the animation should take. We'll ignore the third argument and leave it as 'linear' (the default).

When the animation is over, Raphaël will run the function callback(). The callback argument gives us a way to run some logic at the end of the animation. For us, that's when the user has “missed”.

The initial setup for each shape will be:

shape.click(zap)
shape.animate(..., ..., 'linear', miss)

Then in each of the miss and zap functions:

• Remove the shape from the image.
• Add one to a variable keeping track of the total zaps/misses.
• Update the display of zaps and misses in the HTML.