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 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秒钟进行点击，然后继续

4 个答案: