如果条件不按预期工作

Question

我在这里得到了这段代码：

 

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

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

当gold.health减去player.ATK时，它返回20然后未定义。我期望它应该每1000毫秒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)

对于游戏，您尝试仅使用一个事件计时器。 rAF每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);

如果您希望定期发生某些事情，请通过跟踪时间在rAF函数中进行。

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