边框颜色更改仅第一次工作

本文介绍了边框颜色更改仅第一次工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图制作一个基于javascript的小游戏。

这里是 $ b

它几乎可以工作，除了几个问题： -

点击任何 TD ，如果图像在 TD ，单元格边框颜色应为绿色，否则如果您点击错误 TD ，边框颜色会变为红色。 br> 此功能仅在您首次启动游戏时工作。

直到第8级，边框颜色的变化是可见的，但是当你增加级别，用户不能体验他是否已经击中正确的单元格。我想要的东西，一旦你打到正确的单元格，颜色变化应该可见和稳定，直到图像出现在另一个单元格。

代码和建议的任何改进都是显着的。

解决方案

工作DEMO

这将会执行

<$ c

解除绑定事件$ c> $（'td'）。unbind（'click'）;

将点击事件绑定到 startGame（） function

$（'td'）。bind（'click'）;

取消绑定 stopGame（） function

$（'td'）。unbind（'click'）;

您的代码有问题： -

你在 startGame（）函数中调用点击事件，因此第一次有一个 $（'td'第二次调用 startGame（）函数时有两个<$ c $

code code code code> $（'td'）。click（）函数创建一个混乱

/ strong>

DEMO

在函数 callStart（）中，下面的代码在这个函数的结尾。

$（'td'）。removeClass（insetBorderMiss）; $（'td'）。removeClass（insetBorderCatch）;

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:-

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.

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.

解决方案

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");