使用javascript / jQuery，等待3秒鍾點擊，然后繼續

Question

我一直在嘗試找出如何在暫停用戶點擊的同時運行無限循環，然后允許爆發。

循環開始時，將向用戶顯示圖像，並且必須從顯示的4個圖像中選擇一個。 如果他們在5秒鍾內成功單擊了比賽，則會為他們顯示另一個圖像，然后繼續進行游戲。 如果他們選擇了錯誤的圖像或經過了5秒鍾，則游戲結束。

我已經解決了所有功能，但在等待點擊或時間到期時會暫停。

理想情況下，我還希望每次迭代的時間都可以調整。 假設從5秒開始，然后稍微縮短每個循環的時間（10ms）。

我相信它必須可以使用setTimeout（）或setInterval（）來解決，但無法將其包裹住。

這是我要完成的基本概念。

$('#playnow').on('click',function(){
    var speed = 5000;
    var speed_reduce = 10;
    var game_running = true;

    /* create array of images */
    var imgs = ['puppy.png','kitten.png','bunny.png','goldfish.png'];

    var runnow = setInterval(
        function(){

            //get random image from loaded theme
            rand_img = imgs[Math.floor(Math.random() * imgs.length) ];

            //display chosen image
            $('#goal_image').html('<img src="'+theme_dir+rand_img+'" />');

            // wait up to 5 seconds for user to click or time to expire
            if(*clicked and matched*){
                //get new random image and reset timer (less 10ms)
            }
            if(*time expired*){
                //bail out and game ends
            }   

            /* reduce time */
            speed -= speed_reduce;
        },
    speed);

});

Answer 1

好吧，首先，當它們單擊或失敗時，您需要clearInterval()才能停止當前間隔。 然后，您可以使用新的速度重新啟動間隔。 間隔似乎在起作用。

每5秒鍾顯示一次新圖片。 因此，您需要圖片的onclick事件，以清除間隔並開始新的間隔。 因此，您可能要使用setTimeout而不是setInterval，因為它一次僅是一次迭代。

我想可以使用setInterval，但是並沒有真正的好處。 這種方式還使得每次降低速度相對容易。

Answer 2

我想您會想要這樣的東西：

var speed = 5000, // the initial time
    currentimage,
    timer,
    gamerunning;
function newimage(){
    var imgs = ['puppy.png','kitten.png','bunny.png','goldfish.png'];
    currentimage=Math.floor(Math.random() * imgs.length);
    $('#goal_image').html('<img src="'+theme_dir+imgs[currentimage]+'" />');
    timer = setTimeout(speed, lost)
}
function answer(id){
    if(!gamerunning){return}
    clearTimeout(timer)
    if(id==currentimage){
        speed -= 10; // time decrease every time.
        newimage();
    }else{
        lost()
    }
}
function lost(){
    gamerunning=0;
    speed=5000;
    // what to do when lost.
}
$("#puppy").on("click",function(){answer(0)}); // here #puppy is the id of the answer image, and 0 the index in the imgs array.
$("#kitten").on("click",function(){answer(1)});
$("#bunny").on("click",function(){answer(2)});
$("#fish").on("click",function(){answer(3)});
$("#gamestartbutton").on("click",function(){gamerunning=1})

Answer 3

解決此問題的一種方法是使用setTimeout（）和clearTimeout（）而不是setInterval。 另外，您需要一些事件來成功單擊按鈕（我假裝您有一個特殊的“ #successfulmatch”按鈕）：

 var speed = 5000; var speed_reduce = 10; var game_running = true; var imgs = ['puppy.png','kitten.png','bunny.png','goldfish.png']; var myTimeout; function runNow(speed){ rand_img = imgs[Math.floor(Math.random() * imgs.length) ]; $('#goal_image').html('<img src="'+theme_dir+rand_img+'" />'); // Keep track of the timeout so we can cancel it later if the user clicks fast enough. myTimeout = window.setTimeout(function(){ game_running = false; gameEnds(); },speed); } $('#successfulmatch').on('click',function(){ if(game_running){ // Cancel the timeout because the user was fast enough window.clearTimeout(myTimeout); // Give the user less time than before runNow(speed - speed_reduce); } else{ // Throw an error: you forgot to hide the clickable buttons when the game ended. } } $('#playnow').on('click',function(){ runNow(speed); } 

Answer 4

看起來您正在混用檢查“用戶是否單擊了圖像？是否正確？”的邏輯。 與檢查“時間已過期？”

您可以偵聽圖像上的onclick事件並為游戲結束設置超時事件，因此用戶必須取消該計時器，才能取消即將發生的游戲結束，如果單擊了正確的圖像，請單擊圖像，否則請重置計時器。 ，您可以取消超時事件，然后再使用cancelTimeout（）運行它，請參閱W3C以獲得參考。

這是一個快速的原型：

 $('#playnow').on('click', function() { var speed = 5000; var speed_reduce = 10; var game_running = true; /* create array of images */ var imgs = ['puppy.png', 'kitten.png', 'bunny.png', 'goldfish.png']; // function that ends the game if it's called function gameover() { alert("GAME OVER"); game_running = false; } // in order to use clearTimeout() you must store the timer in a global variable // setting a timeout that will end the game if it's not cleared before window.timer = setTimeout(gameover, speed); // function that is called whenever the user clicks on a image function onclickimage(event) { if (!game_running) return; if ( /*clicked right img*/ ) { // get random image from loaded theme var rand_img = imgs[Math.floor(Math.random() * imgs.length)]; // display chosen image $('#goal_image').html('<img src="' + theme_dir + rand_img + '" />'); // delete timer, user now has one more opportunity clearTimeout(timer); // speed is less 10ms speed -= speed_reduce; // launch timer again window.gametimer = setTimeout(loop, speed); } else { // if click did not match correct image gameover(); } } });