添加第二個被點擊圖標

Question

在我的數字遊戲的孩子到定時器有30秒的即拍即realate給定的問題數量的圖標，如「偶數」。我最近添加了兩個時鐘圖標作爲獎勵。當他們拍攝藍色的時候會增加3秒，而拍攝紅色的會減少3秒。

目前的時鐘被假定爲錯誤的，但我因爲下面的if語句的。有沒有一種方法可以將時鐘合併到此點擊功能中，還是必須啓動一個新的功能？另外我如何添加並從計時器中獲取秒數？

$(".character").click(function() { 
    if ($(this).hasClass("wrong")) { 
     $(this).effect("bounce", { 
      times: 2, 
      direction: 'left' 
     }, 300, function() { 
      $(this).slideUp("fast") 
     }); 
     miss++; 
     attempted++; 
     $("#miss").html("Wrong: " + miss); 
    } else { 
     $(this).effect("explode", 300); 
     hit++; 
     attempted++; 
     $("#hit").html("Right: " + hit); 
    } 
}); 
}); 

這裏的圖標

列表

<ul id="container"> 
    <li><div id="char1" class="character right" vaule="1"></div></li> 
    <li><div id="char2" class="character right" vaule="2"></div></li> 
    <li><div id="char3" class="character right" vaule="3"></div></li> 
    <li><div id="char4" class="character right" vaule="4"></div></li> 
    <li><div id="char5" class="character right" vaule="5"></div></li> 
    <li><div id="char6" class="character right" vaule="6"></div></li> 
    <li><div id="char7" class="character right" vaule="7"></div></li> 
    <li><div id="char8" class="character right" vaule="8"></div></li> 
    <li><div id="char9" class="character right" vaule="9"></div></li> 
    <li><div id="char10" class="character right" vaule="0"></div></li> 
    <li><div id="char11" class="character clock up"></div></li> 
    <li><div id="char12" class="character clock down"></div></li> 
</ul> 

小提琴：http://jsfiddle.net/cFKHq/13/

Answer 1

我玩過你的小提琴（分叉它：http://jsfiddle.net/pUwKb/1/），我想我已經成功了。我改變了，如果循環到下面，它會改變全局計數變量，如果其中一個時鐘被點擊。如果沒有找到時鐘，它只會去檢查對或錯。

$(".character").click(function() { 
     if ($(this).hasClass("clock")) { 
      if ($(this).hasClass("up")) { 
       $(this).effect("explode", 300); 
       count += 3; 
      } else if ($(this).hasClass("down")) { 
       $(this).effect("bounce", { 
        times: 2, 
        direction: 'left' 
       }, 300, function() { 
        $(this).slideUp("fast") 
       }); 
       count -= 3; 
      } 
      $('#timer').text(count); 
     } else { 
      if ($(this).hasClass("wrong")) { 
       $(this).effect("bounce", { 
        times: 2, 
        direction: 'left' 
       }, 300, function() { 
        $(this).slideUp("fast") 
       }); 
       miss++; 
       attempted++; 
       $("#miss").html("Wrong: " + miss); 
      } else { 
       $(this).effect("explode", 300); 
       hit++; 
       attempted++; 
       $("#hit").html("Right: " + hit); 
      } 
     } 
    }); 

Answer 2

你需要創建一個計時器事件是獨立動畫的。 setInterval將基於指定的時間量自行調用，在這種情況下爲1000ms。

var timeLeft = 30; 

var timer = setInterval(function() { 
    timeLeft--; 
    if(timeLeft<1) { 
     clearTimeout(timer)   
     alert("finished"); 
     return;   
    } 
    $('#time').html(timeLeft); 
},1000) 

function adjTime(amt) { 
    timeLeft = timeLeft + amt 
    if(timeLeft<1) { 
     clearTimeout(timer)   
     alert("finished"); 
     return; 
    } 
    $('#time').html(timeLeft); 
} 

測試HTML：

<div id="time"></div> 
<input type="button" onclick="adjTime(3)" value="Add 3 sec" /> 
<input type="button" onclick="adjTime(-3)" value="Subtract 3 sec" /> 

Answer 3

你可以做定時器計數作爲一個全球性的。

http://jsfiddle.net/mdc5X/

相反數，我宣佈它作爲

var game = { 
    count: 30, 
} 

和改變數目的每一個實例game.count

然後，你可以簡單地做

game.count += 5 // to add time 
game.count -+ 5 // to remove time 

當然，這是不安全的（任何人用控制檯可以簡化請輸入game.count = 1000），但對於兒童遊戲應該沒問題。

這樣做將與私有成員的正確方法。你可以在這裏閱讀更多關於它的信息：（http://www.crockford.com/javascript/private.html）