警报暂停代码

Question

我期待在计算foodCaught和foodWasted时创建一个警报，由于某种原因，每次将它整合到脚本中时，我的警报似乎都会中断。另外，如何创建一个可视定时器，一旦它达到我的警报运行并输出foodCaught和foodWasted值？请帮忙！

$(document).ready(function(){ 
    var cnv = $("#myCanvas")[0]; 
    var ctx = cnv.getContext("2d"); 
    var catcherX = ctx.canvas.width/2; 
    var catcherY = ctx.canvas.height - 100; // set the initial location of the catcher's y position 
    var numFoods = 5; 
    var catcherSpeed = 30; 
    var foodCaught = 0; 
    var foodWasted = 0; 

    function Food(){ // the name of the constructor usually begins with a captial letter 
     this.radius = 30; 

     this.x = Math.floor(Math.random()*ctx.canvas.width); 
     this.y = 0 - this.radius; 
     this.speed = 1+ Math.floor(Math.random()*5); 
     var imageToUse = new Image(); 
     this.width = 50; // default values 
     this.height = 50; // default values 

     var randomNum = Math.floor(Math.random()*2); // create a random number to choose the image 
     if(randomNum == 0){ 

      imageToUse.src = "corn.png"; 
      this.width = 27; // width of corn.png 
      this.height = 100; // height of corn.png 

     } else if(randomNum == 1){ 
      imageToUse.src = "straw.png" 
      this.width = 83; // width of straw.png 
      this.height = 100; // height of straw.png 
     } 

     this.moveFood = function(){ 
      if(this.y > ctx.canvas.height){ 
       this.x = Math.floor(Math.random()*ctx.canvas.width); 
       this.y = 0; 
       footWasted += 1; 
      }   
      this.y += this.speed; // add speed to location 
     } 

     this.drawFood = function() { 
      ctx.drawImage(imageToUse, this.x, this.y); 
     } 

     this.intersectFood = function(targetX, targetY, targetR) { 

      if(this.x + this.width > targetX && this.x < targetX + targetR && this.y + this.height > targetY && this.y < targetY + targetR){ 
       foodCaught += 1; 
       return true; 
      } 
      /* 

      var distanceX = this.x - targetX; 
      var distanceY = this.y - targetY; 
      var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY); 

      if(distance < targetR + this.radius){ 
       return true; 
      } 
      */ 

     } 

    } //Food function 

    // create an Array of Foods 
    var FoodArray = new Array(); 
    for(var i=0; i<numFoods; i++) { 
     FoodArray[i] = new Food(); 
    } 

    // get mouse Postion 
    $(document).keydown(function(e){ // attach the event to the entire document 
     switch(e.keyCode){ 
      case 37: // left 
       catcherX-= catcherSpeed; 
       break; 
      case 39: // right 
       catcherX+= catcherSpeed; 
       break; 
     } 
    }); 


    setInterval(gameLoop,10); // call draw every 10 milliseconds 

    function gameLoop(){ 
     ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height); //clears previous circles 
     for(var i=0; i < FoodArray.length; i++) { 
      FoodArray[i].moveFood(); 
      FoodArray[i].drawFood(); 
      if(FoodArray[i].intersectFood(catcherX, catcherY, 15)){ 
       FoodArray.splice(i,1); 
       console.log(i); 
      } 
     } 

     // draw catcher 
     ctx.beginPath(); 
     ctx.fillStyle="#119933"; 
     ctx.arc(catcherX,catcherY,15,0,Math.PI*2,true); 
     ctx.closePath(); 
     ctx.fill(); 

    } 
}); 

Answer 1

如果你想在游戏中持续1分钟，火在比赛结束时的提醒，它应该是这个样子说：

$(document).ready(function(){ 
    var cnv = $("#myCanvas")[0]; 
    var ctx = cnv.getContext("2d"); 
    var catcherX = ctx.canvas.width/2; 
    var catcherY = ctx.canvas.height - 100; // set the initial location of the catcher's y position 
    var numFoods = 5; 
    var catcherSpeed = 30; 
    var foodCaught = 0; 
    var foodWasted = 0; 
    var gameInProgress = true; //game state 

    function Food(){ // the name of the constructor usually begins with a captial letter 
     this.radius = 30; 

     this.x = Math.floor(Math.random()*ctx.canvas.width); 
     this.y = 0 - this.radius; 
     this.speed = 1+ Math.floor(Math.random()*5); 
     var imageToUse = new Image(); 
     this.width = 50; // default values 
     this.height = 50; // default values 

     var randomNum = Math.floor(Math.random()*2); // create a random number to choose the image 
     if(randomNum == 0){ 

      imageToUse.src = "corn.png"; 
      this.width = 27; // width of corn.png 
      this.height = 100; // height of corn.png 

     } else if(randomNum == 1){ 
      imageToUse.src = "straw.png" 
      this.width = 83; // width of straw.png 
      this.height = 100; // height of straw.png 
     } 

     this.moveFood = function(){ 
      if(this.y > ctx.canvas.height){ 
       this.x = Math.floor(Math.random()*ctx.canvas.width); 
       this.y = 0; 
       footWasted += 1; 
      }   
      this.y += this.speed; // add speed to location 
     } 

     this.drawFood = function() { 
      ctx.drawImage(imageToUse, this.x, this.y); 
     } 

     this.intersectFood = function(targetX, targetY, targetR) { 

      if(this.x + this.width > targetX && this.x < targetX + targetR && this.y + this.height > targetY && this.y < targetY + targetR){ 
       foodCaught += 1; 
       return true; 
      } 
      /* 

      var distanceX = this.x - targetX; 
      var distanceY = this.y - targetY; 
      var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY); 

      if(distance < targetR + this.radius){ 
       return true; 
      } 
      */ 

     } 

    } //Food function 

    // create an Array of Foods 
    var FoodArray = new Array(); 
    for(var i=0; i<numFoods; i++) { 
     FoodArray[i] = new Food(); 
    } 

    // get mouse Postion 
    $(document).keydown(function(e){ // attach the event to the entire document 
     switch(e.keyCode){ 
      case 37: // left 
       catcherX-= catcherSpeed; 
       break; 
      case 39: // right 
       catcherX+= catcherSpeed; 
       break; 
     } 
    }); 


    var gameInterval = setInterval(gameLoop,10); // call draw every 10 milliseconds 

    function gameLoop(){ 
     if(!gameInProgress) 
      clearInterval(gameInterval); //end game 
     ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height); //clears previous circles 
     for(var i=0; i < FoodArray.length; i++) { 
      FoodArray[i].moveFood(); 
      FoodArray[i].drawFood(); 
      if(FoodArray[i].intersectFood(catcherX, catcherY, 15)){ 
       FoodArray.splice(i,1); 
       console.log(i); 
      } 
     } 

     // draw catcher 
     ctx.beginPath(); 
     ctx.fillStyle="#119933"; 
     ctx.arc(catcherX,catcherY,15,0,Math.PI*2,true); 
     ctx.closePath(); 
     ctx.fill(); 

    } 

    setTimeout(endGame, 60*1000); //end game after 1 minute 

    function endGame(){ 
     gameInProgress = false; 
     alert("Food caught: "+foodCaught+"\nFood wasted: "+foodWasted); 
    } 
}); 

如果你想显示计时器在游戏中，你应该做这样的：

function timer(time){ //timer definition 
 
    var timeLeft = time; 
 
    var timerInterval = undefined; 
 
    var updateFunction = undefined; 
 
    
 
    var decrement = function(){ //function that decreses timeLeft value, calls update function and checks if it's over 
 
    timeLeft--; 
 
    updateFunction(timeLeft); 
 
    if(timeLeft == 0) 
 
     clearInterval(timerInterval); 
 
    } 
 
    
 
    return { //object returned for the caller to use 
 
    start: function(updateFunc){ //start function, that takes update function as a parameter 
 
     updateFunction = updateFunc; 
 
     updateFunction(timeLeft); //update the value with initial timeLeft value 
 
     timerInterval = setInterval(decrement, 1000); //interval that decreses timeLeft by one every second 
 
    } 
 
    } 
 
} 
 

 
//document.ready 
 
$(function(){ 
 
    timer(10).start(function(time){ 
 
     $("#timer").text(time); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="timer"></div>