如果條件沒有按預期工作

Question

我這裏得到這個代碼：

 

 
     var player = { 
 
      ATK: 30 
 
     } 
 
     function start(place) { 
 
     \t if (place == 'goldMine') { 
 
     \t \t canvas = document.getElementById('canvas'); 
 
     \t \t ctx = canvas.getContext('2d'); 
 
     \t \t var player = { 
 
     \t \t \t x: 0, 
 
     \t \t \t y: 197.5 
 
     \t \t }; 
 
     \t \t var slope = { 
 
     \t \t \t x: 159, 
 
     \t \t \t y: 198.5, 
 
     \t \t \t up: false 
 
     \t \t }; 
 
     \t \t var gold = { 
 
     \t \t \t x: 240, 
 
     \t \t \t y: 188, 
 
     \t \t \t mined: false, 
 
        health: 20, 
 
     \t \t \t x1: 200, 
 
     \t \t \t y1: 188, 
 
     \t \t \t mined1: false 
 
     \t \t }; 
 
     \t \t ctx.font = '15px Monospace'; 
 
     \t \t var move = setInterval(function(){player.x += 7;},50) 
 
     \t \t var draw = setInterval(function() { 
 
     \t \t \t ctx.clearRect(0, 0, canvas.width, canvas.height) 
 
     \t \t \t ctx.fillText('\\o/',player.x,player.y); 
 
     \t \t \t ctx.fillText("__________________",0,195.5); 
 
     \t \t \t ctx.fillText("/",slope.x,slope.y); 
 
     \t \t \t ctx.fillText("______________________________________________________",165.5,184.5); 
 
     \t \t \t ctx.fillText("/0\\",gold.x,gold.y); 
 
     \t \t \t ctx.fillText("/0\\",gold.x1,gold.y1); 
 
     \t \t \t if (player.x >= slope.x - 23 && !slope.up) { 
 
     \t \t \t \t player.y -= 10; 
 
     \t \t \t \t slope.up = true; 
 
     \t \t \t } 
 
      
 
     \t \t \t if (player.x >= gold.x - 23 && gold.mined == false) { 
 
     \t \t \t \t clearInterval(move) 
 
console.log(gold.health) 
 
         dam = setInterval(function(){gold.health -= player.ATK}, 1000) 
 
console.log(gold.health) 
 
     \t \t \t } 
 
     \t \t \t if (gold.health <= 0) { 
 
     \t \t \t \t \t gold.mined = true; gold.y = 210; move = setInterval(function(){player.x += 7;},50) 
 
     \t \t \t } 
 
     \t \t \t if (player.x >= gold.x1 - 23.99 && gold.mined == false) { 
 
     \t \t \t \t gold.y1 = 250; 
 
     \t \t \t \t gold.mined1 = true; 
 
     \t \t \t } 
 
     \t \t }, 50) 
 
     \t } 
 
     } 
 
     start('goldMine')

<canvas id='canvas' width='985' height='200'></canvas>

當 gold.health是 player.ATK減，則返回20則不確定。我期望的是它應該每1000ms減去 gold.health player.ATK。但爲什麼它返回undefined？我可以用JavaScript解決這個問題嗎？

Answer 1

不幸的是，你正在使用計時器錯誤的方式，基本上不使用setInterval。查找requestAnmationFrame（rAF）並研究示例。

你的代碼問題

JavaScript是阻塞，一些代碼運行時指，在同一頁上（背景下的Javascript），沒有其他的JavaScript可以運行，這包括事件。定時器是事件，因此當你在一個函數內時不會觸發。

你有這樣的事情

var myval; 
function doSomething(){ 
    myval = 10 
    console.log(myVal); // outputs 10 
    setInterval(function(){ 
      myval -= 1; 
    },1); 
    console.log(myVal); // outputs 10 because the interval function 
         // will never fire between to two console calls. 

    // even if I keep the code running for 2 seconds 
    var waitTill = performance.now() + 2000; 
    while(performance.now() < waitTill); // wait two seconds 
              // BTW don't ever do this. 
    // two second and the interval function still has not fired. 
    console.log(myVal); // still outputs 10 
    // more code 
    ... blah blah 
    // and exit 
} 
// only when the code has exited can the timer function fire 
// If the interval is short you and you had the 2 second wait 
// you would get many interval firing one after the other (or the browser crashes) 

隨着遊戲中，你儘量只使用一個事件定時器。英國皇家空軍觸發一個事件，每1/60秒（如果沒有Javascript代碼阻止它即是）

function mainLoop(time){ // the time is set by rAF 
    // inside this function do all you need to do with your game 

    requestAnimationFrame(mainLoop); 
} 
requestAnimationFrame(mainLoop); 

如果你想要的東西，以每隔一定的時間發生通過跟蹤時間做它在英國皇家空軍功能。

var nextDamage = -1; 
function mainLoop(time){ 
    if(startDamage){ // this starts the regular event 
      nextDamage = time + 1000; 
      startDamage = false; // clear the flag so you dont keep resetting the time. 

    // Every time this loop function is run check 
    // if time is greater than nextDamage 
    }else if(nextDamage !== -1 && time >= nextDamage){ 
     // do the damage 
     damage -= 10; 
     nextDamage += 2000; // set the next damage time. 
    } 


    To stop the damage happening just do 
    if(stopDamage){ 
     nextDamage = -1; 
    } 

    requestAnimationFrame(mainLoop); 
} 
requestAnimationFrame(mainLoop);