아이콘을 클릭 할 때 초침 추가

Question

내 숫자 게임에서 어린이는 30 초 동안 "짝수"와 같이 주어진 질문에 맞게 숫자 아이콘을 찍습니다. 나는 최근 두 개의 시계 아이콘을 보너스로 추가했다. 그들이 파란색을 쏘면 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/)로 주변에 놀고 나는 그것을 일했다는 것을 생각한다. 그 if 루프를 다음과 같이 변경하고 시계 중 하나가 클릭되면 전역 카운트 변수를 변경합니다. 시계가 발견되지 않으면 옳은지 또는 잘못된지 만 확인합니다.

$(".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/

, 난 당신이 단순히

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

을 할 수

var game = { 
    count: 30, 
} 

로 선언 한 후

을 game.count 할 수의 모든 인스턴스를 수정

물론, 이것은 안전하지 않습니다 (콘솔을 가진 사람이라면 누구나 간단하게 할 수 있습니다. ly type game.count = 1000), 어린이 게임에서는 괜찮을 것입니다.

이 작업을 수행하는 올바른 방법은 개인 회원이 수행하는 것입니다. 당신은 그것에 관하여 더 많은 것을 여기에서 읽을 수있다 : (http://www.crockford.com/javascript/private.html)