使用 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

看起来您正在混合检查 "has the user clicked the image? was it correct?" 和检查 "has time expired?"

的逻辑

您可以监听图片上的 onclick 事件并设置游戏结束的超时事件所以用户必须通过单击图像来取消该计时器，以取消即将结束的游戏如果单击正确的图像，计时器将重置如果没有，游戏就结束了您可以在使用 cancelTimeout() 运行之前取消超时事件请参阅 W3C here 以供参考。

这是一个快速原型：

$('#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();
    }
  }

});

使用 javascript/jQuery，等待 3 秒点击，然后继续

Using javascript/jQuery, wait 3 seconds for click, then proceed

javascript

jquery

settimeout

delayed-execution

setinterval