0

jqueryとアニメーションを学ぶためだけに、javascriptで簡単なゲームに取り組んでいます。ゲームは非常にシンプルで、弾むボールを2、3回打つだけです。

$(document).ready(function() { 
        $('#stage').bind('click',function(e){ 
        $("#bomb").show(); 
        var x = e.clientX - this.offsetLeft -35 ;
        var y = e.clientY - this.offsetTop -35 ;
        $("#bomb").animate({left:x,top:y}, 200, function(){
        $("#bomb").hide(); 
        $("#bomb").css({ top: "365px",left:"240px"});
        $("#bomb").show(); 
                         });    
        }); 
                $("#box1").click(function() {hit("#box1");})
                $("#box2").click(function() {hit("#box2");})
                $("#box3").click(function() {hit("#box3");})


        });

10 秒後に実行を停止したいのですが、これを実現する方法がわかりませんでした。単純な setTimeout を作成しました。クリックすると (バインドされたメソッドを起動すると)、カウンターが停止します...アドバイス？カウンターのコードは次のとおりです。

var counter=setInterval(timer, 10000);
         function timer()
        { count=count-1;
        if (count < timeout)
    {   clearInterval(counter);
        imageUrl="img/BGgameover.gif"; 
        $('#stage').css('background-image', 'url(' + imageUrl + ')'); 
        $('#bomb').remove();  
        $('#stage').removeClass('running');
        return;
                        }
        document.getElementById("timer").innerHTML=count;
            }
4

2 に答える 2

3

コードを実行して 10 秒ごとに更新するだけなので、カウンターが停止します。

setInterval10000 ミリ秒の遅延で使用しているため、timer関数は 10 秒ごとに呼び出されます。代わりに 1 秒間隔を使用する必要があると思います。

次のコードは 1 秒ごとに実行されるため、「タイマー」div は残りの秒数で更新され、次にcountが少なくなるとtimeout、ゲーム オーバー コードが実行されます。

var counter = setInterval(timer, 1000);

// Make sure "count" and "timeout" are sane values. What are they defined to initially?

function timer() { 
  count = count - 1;

  if (count < timeout) {   
    clearInterval(counter);
    imageUrl = "img/BGgameover.gif"; 

    $('#stage').css('background-image', 'url(' + imageUrl + ')'); 
    $('#bomb').remove();
    $('#stage').removeClass('running');
    return;
  }

  document.getElementById("timer").innerHTML = count;
}

補足として、setInterval の使用は少し危険な場合があります。requestAnimationFrame代わりに次の使用を検討することをお勧めします。

于 2013-07-29T11:22:09.283 に答える