So it's finally time to write the square_clicked function.

As usual, ask yourself what has to happen when the player clicks one of the grid squares.

square_clicked in clicks.js
function square_clicked(image) {
  if (g_shape=='') {
   alert('please choose a shape');
  } else {
    var v=g_shape.getAttribute('v');
    var answer=image.getAttribute('a');
    if (v==answer || v==8) {
      image.src=g_shape.src;      
    } else {
      image.src='images/wrong/'+v+'.png';
    }
    image.setAttribute('v',v);
  }
}

One you've finished checking it all works as expected, remove test(); and have a go at playing the game for real!

Ok! So the game works! But now it's time for the most important part of game design - making it as player-friendly as possible.

In the next section we'll look at allowing the player to:

  1. fill in empties in a row or column with sea with a single click;
  2. see their progress so far;
  3. know when the game has finished.