Creating Clickable grid squares

Question

I would like some help regarding a "battleship" sort of game that I am creating. I have a 7x7 grid of white squares and I have put it under the click code so that when I click on the squares, a picture appears. I have done that using if statements eg. if(mx>xxx && mx<xxx && my>xxx &my<xxx) etc. The main problem is occurring here:

I am trying to add other white squares to go on top of the grid so that when I click on those, my score variable which is recorded on the canvas goes up. So when I click on one square that has RANDOMLY been placed on top of the other grid squares, the score will go up by 10 points or however much its worth. As soon as I click on it, the score will go up and then my battleship will appear, as if it had been clicked on. I am wondering how to do this with 4 different battleships which use use on one square from the grid to appear in.

Also, I am wondering how to end the game once my "ducks" -- which i have subbed in for the battleships -- are all found...

Heres my idea:

while(ducks == not found){

    REDO GAME   
}

if(ducks == found){

    display(“Congratulations”,100,100,100,100)
    ctx.drawImage(rain, 0,0,0,0)
}

Please help! Thank you in advance!

Answer 1

I suggest to create a separate variable game_state holding the current game state.

This game_state can be for example an integer with three values:

0 - setting up; 1 - in play; 2 - finished

Or anything you find usable. Later you can look up & change integer to enum.

Check for the win condition at the end of processing a click. If the condition is satisfied, change the state to 'finished', present the win message.

You can check for state 'in play' & skip processing any clicks until state of the game has changed again to 'in play', which can be done for example via some other button with 'New Game'.

Hope that helps.