globalTick（）内の各スプライトの遅延ティック（）JS

Question

setInterval（）を使いこなそうとしたが、私が望む結果を得ることができないので、 。

私は

class Arrow{ 
     constructor(dirCode){ 
      this.dirCode = dirCode; 
      this.speedX = 1 
      this.speedY = 1 

      switch(this.dirCode){ 
       // ... 
      } 

    tick(){ 
      ctx.fillStyle = "black" 
      ctx.fillRect(this.x, this.y, spriteSize, spriteSize) 

      switch(this.dirCode){ 
       case 0: 
        this.x += this.speedX 
        break 
       case 1: 
        this.x += this.speedX 
        this.y -= this.speedY 
        break 
       // ... 

アイブ氏は君たちに変数を惜しまこの場合、矢印オブジェクト、私のスプライトにこのglobalTick（）

function globalTick(){ 
    ctx.clearRect(0,0,800,800) 

    if(target){ 
     target.tick(); 
    } 

    // Move arrows 
    for(var i = 0; i < spriteList.length; i++){ 
     spriteList[i].tick() 
    } 


    window.requestAnimationFrame(globalTick); 
} 

document.onkeyup = function(e){ 
    // Change gamestate 
    if(e.which == 13){ 
     $("#state"+gameState).hide() 
     gameState ++ 

     if(gameState == 6){ 
      // Affect game variables 
      player = new Player(0); 
      target = new Target(targetX, targetY) 

      for(var i = 0; i < player.calculateNotes(); i++){ 
       timerID = setInterval(spawnArrows(), 3000) 
      } 
      clearInterval(timerID) 
    } 

    // ... 

spawnArrows = function(){ 
    // Rabdomize arrows (15 for now) 
    var dirCode = Math.floor((Math.random() * 8)); 
    spriteList.push(new Arrow(dirCode)) 
    //soundsSequence.push(soundsList[dirCode]) 
} 

は、その後、私はこのダニを（持っている）メソッドを持っています宣言

私が望むのは、新しいArrowを別のオブジェクト内に存在する設定時間だけArrayにプッシュするのを遅らせることです。この例では3秒と言います。それは、requestAnimationFrameによって60回程度呼び出されているglobalTick（）内で減速することも可能ですか？理想的には純粋なJSでは、JQueryが唯一の方法でない限り...

多くの感謝、これは十分に願っています！

Answer 1

ここには、setTimeoutキューを使用する解決策があります。

部分的に適用されるspawnArrow機能がキューにプッシュされます。 spawnQueue.shift()();は、最初の関数をキューから削除して呼び出します。

let notes = ["A", "B", "C", "D", "E"]; 
 
let spriteList = []; 
 
let spawnQueue = []; 
 
let delayTime = 500; 
 

 
function globalTick() { 
 
    spriteList.forEach(sprite => sprite.tick()); 
 
    requestAnimationFrame(globalTick); 
 
} 
 
globalTick(); 
 

 
$('button').click(onButtonClick); 
 

 
function onButtonClick() { 
 
    let kickOffQueue = spawnQueue.length <= 0; 
 

 
    notes.forEach(note => 
 
     spawnQueue.push(() => spawnArrow(note)) 
 
    ); 
 

 
    if (kickOffQueue) { 
 
     // here you can set the delay time of the first execution 
 
     consumeSpawnQueue(500); 
 
    } 
 
} 
 

 
function consumeSpawnQueue(nextDelayTime) { 
 
    if (spawnQueue.length > 0) { 
 
     setTimeout(() => { 
 
      spawnQueue.shift()(); 
 
      consumeSpawnQueue(delayTime); 
 
     }, nextDelayTime); 
 
    } 
 
} 
 

 
function spawnArrow(note) { 
 
    var dirCode = Math.floor((Math.random() * 8)); 
 
    spriteList.push(new Arrow(dirCode, note)); 
 
} 
 

 
class Arrow { 
 
    constructor(dirCode, note) { 
 
     this.dirCode = dirCode; 
 
     this.x = 0; 
 
     this.domEl = $(`<div>${note}${dirCode}</div>`).appendTo('body'); 
 
    } 
 

 
    tick() { 
 
     this.x += 1; 
 
     this.domEl.css({ 
 
      marginLeft: this.x 
 
     }); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>spawnArrows</button>

JSFiddle demo

注：のsetTimeoutは非常に時間がない正確である - それは唯一の最小遅延をgaurentees。あなたのglobalTickのゲームループで

const startTime = new Date(); 
const elapsedTime =() => (new Date() - startTime)/1000; 

：

if ((elapsedTime() - lastSpawnArrowTime) > delayTime) { 
    spawnQueue.shift()(); 
} 

そしてspawnArrow関数内、あなたが設定します：

あなたは時間精度が必要な場合は、代わりにこのように経過時間を計算する必要があります

lastSpawnArrowTime = elapsedTime()