条件は、私がここにこのコードを持っ

Question

期待通りに動作しない場合：gold.healthはplayer.ATKによって減算される

は

 

 
     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>

、それは、未定義の20を返します。私が期待したのは、を player.ATKで1000msごとに引くべきです。しかし、なぜそれは未定義に戻るのでしょうか？私はちょうど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) 

のようなものを持っています。 （ないJavascriptのコードがあること、それをブロックしていない場合）は、一定の間隔で発生するために何かをしたい場合はRAFは一回1 /第60秒

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