2014-12-07 78 views
-2

我正在創建一個互動遊戲,並且對編程非常新穎。我想知道如何增加一個變量然後把它放到一個警告框中。我想找到foodCaught和food的計算方法,並在遊戲結束時將它顯示在一個警戒框中。另外我該如何做到這一點,所以它是在一個計時器上,並在這個計時器的結束時,與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; 
      } 
      */ 
     } 
    } 
    // 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 interval = setInterval(gameLoop,10); // call draw every 10 milliseconds 
    var counter = 0; 

    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(); 
+1

使用在javascript取向而不的基本變量存儲和警報知識對象A新手。這很諷刺。 – 2014-12-07 05:49:19

+0

*「我正在創建」* - 我發現不可能相信您編寫了上述代碼,但需要幫助增加一個變量。顯示的代碼已經有很多增量變量的例子。它也有一個計時器,但爲了提醒你需要'setTimeout'而不是'setInterval'。 – nnnnnn 2014-12-07 05:54:20

+0

請在下面找到我的答案,並將其標記爲接受,如果它解決您的問題。 – 2014-12-07 12:10:51

回答

1

更新回答你的遊戲已經結束

後,執行:

alert("foodCaught = " + foodCaught + "<br>foodWasted = " + foodWasted); 

只要確保這個alert是withing foodCaughtfoodWasted變量的作用域。

編輯:

你的遊戲實際上是永無止境的。 setInterval,你每10毫秒一直呼叫gameLoop(),無限!

爲了保持foodCaughtfoodWasted變量的軌道,在gameLoop()函數的末尾添加console.log()聲明如下圖所示的代碼:

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(); 

    console.log("foodCaught = " + foodCaught + "\nfoodWasted = " + foodWasted); 

} 

有了這個,你將得到的foodCaughtfoodWasted值變量每次調用gameLoop函數。

如果您不知道如何使用控制檯,請檢查this post

EDIT2:

我對結束這場遊戲的想法。在下面的更新代碼中,我使用setTimeout()將遊戲設置爲運行10秒(僅作爲示例,以便您可以快速更改)。您已將其更改爲任何您想要的時間。在setTimeout()中,我也提醒你需要的值。

這裏是更新的Javascript/jQuery代碼:

$(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; 
       foodWasted += 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; 
      } 
      */ 

     } 


    } 

    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); 
      } 
     } 

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

    } 

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

    }); 


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

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

    setTimeout(function(){ 
     clearInterval(interval);   
     alert("Time UP!\n\nfoodCaught = " + foodCaught + "\nfoodWasted = " + foodWasted); 
    }, 10000); 

}); 
+0

請勿將其放入文檔中。警報應該在遊戲結束時顯示,而不是在頁面加載後五秒鐘。 – nnnnnn 2014-12-07 05:52:04

+0

@nnnnnn謝謝,但變量'foodCaught'和'foodWasted'在'$(document).ready()'中。 – 2014-12-07 05:59:17

+0

@Helen回答更新。理想情況下,如果你將這個'alert'放在這些變量的範圍內,你的代碼就不會中斷。我不知道你的遊戲在哪裏完全結束,所以請在適當的地方添加'alert'。或者你可以在jsFiddle演示中重現你的問題,如果你願意,我可以進一步幫助你。 – 2014-12-07 06:21:44