border color change is working only for first time

问题

I am trying to make a javascript based small game.

Here is the Fiddle for the GAME

It is almost working except a few issues:-

1. On click of any TD, if the image is in that TD, cell border color should be green otherwise if you have clicked on wrong TD, border color turns to red.
   This functionality is working only first time you start the game. from next time it is always showing red border color.

2. Till level 8, the changing of border color is visible, but as you increase the level, user cannot experience whether he has hit the correct cell or not. I want something like as soon as you have hit the correct cell, the color change should be visible and stable until image appears into another cell.

Any improvement in code and suggestion are appreciable.

回答1:

When you start the game for the second time, you call startGame().

In startGame() you have a $('td').click(), that will fire for the second time, so on each click, it will actual click twice (one catch, one miss).

回答2:

Working DEMO

This will do the trick

unbind the click event in the starting

$('td').unbind('click');

bind the click event on the startGame() function

$('td').bind('click');

unbind the click event on the stopGame() function

$('td').unbind('click');

Problem with your code :-

you are calling click event in the startGame() function so for the first time you have one $('td').click() function

for the second time you call startGame() function there two $('td').click() function and so one which creates the mess

Suggestion for second point

DEMO

In function callStart() you have placed the below on the top instead place the below code at the end of the this function.

$('td').removeClass("insetBorderMiss");
$('td').removeClass("insetBorderCatch");

来源：https://stackoverflow.com/questions/18270833/border-color-change-is-working-only-for-first-time