如何管理多個球動畫？

我製作了一個應該讓幾個球沿着路徑移動的程序。到目前爲止，我只能使一個球成功地穿過球場，因爲每當我添加另一個球（來自球的陣列）時，它就開始閃爍並且消失。我希望在解決這個問題方面提供任何幫助。如何管理多個球動畫？

<!DOCTYPE html> 
<html> 

<head> 
<style> 
    * { 
    padding: 0; 
    margin: 0; 
    } 

    canvas { 
    background: #eee; 
    display: block; 
    margin: 0 auto; 
    } 
</style> 
</head> 

<body> 
<canvas id="Circuit" width="500" height="320"></canvas> 

<script> 
    var dad = []; 
    var canvas = document.getElementById("Circuit"); 
    var ctx = canvas.getContext("2d"); 
    var bool = false; 
    var dx1 = 2; 
    var dx2 = -2; 
    var dy1 = 0; 
    var dy2 = 2; 

    var memes = [{ 
    x: 0, 
    y: 100, 

    }, { 
    x: 0, 
    y: 100, 

    }, { 
    x: 0, 
    y: 100, 

    }, { 
    x: 0, 
    y: 100, 

    }]; 

    function drawCircle(index) { 
    ctx.beginPath(); 
    ctx.arc(memes[index].x, memes[index].y, 10, 0, Math.PI * 2); 
    ctx.fillStyle = "#0095DD"; 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    function draw(index) { 
    if (index == 0) { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    } 
    if (memes[index].x < 490 && memes[index].y < 291 && !bool) { 
    drawCircle(index); 
    memes[index].x += dx1; 
    memes[index].y += dy1; 
    } 
    else if (memes[index].x == 490) { 
    drawCircle(index); 
    memes[index].x += 1; 
    } 
    else if (memes[index].x > 490 && memes[index].y < 291) { 
    drawCircle(index); 
    memes[index].y += dy2; 
    } 
    else if (memes[index].y == 291) { 
    drawCircle(index); 
    memes[index].y += 1; 
    } 
    else if (memes[index].y > 291 && memes[index].x > 2) { 
    drawCircle(index); 
    bool = true; 
    memes[index].x -= 2; 
    } 
    else if (memes[index].x == 2 && memes[index].y > 291) { 
    drawCircle(index); 
    memes[index].x -= 1; 
    } 
    else if (memes[index].x < 2) { 
    drawCircle(index); 
    memes[index].y -= dy2; 
    if (memes[index].y < 100) { 
    clearInterval(dad[index]); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    } 
    } 
    ctx.strokeStyle = "red"; 
    ctx.strokeRect(2, 101, 490, 190); 

    ctx.strokeStyle = "blue"; 
    ctx.strokeRect(2, 82, 40, 40); 
    } 


    setTimeout(function() { 
    setTimeout(function() { 
    dad[1] = setInterval(function() { 
    draw(1); 
    }, 20); 
    }, 1000); 
    dad[0] = setInterval(function() { 
    draw(0); 
    }, 20); 
    }, 1000); 
</script> 

</body> 

</html>

來源

2016-12-16 Honors Level Maker

我玩弄這個轉換使用'的requestAnimationFrame'代替'setInterval'。答案並不多，但你可能會受到啓發。 https://jsbin.com/suwinanipo/1/edit?html,output – Malk

非常感謝你！你介意給出一個關於你改變了什麼的快速解釋嗎？> –

我將它切換爲使用單個計時器作爲事件循環。 – Malk

閃爍當第二球試圖使框架發生。你有兩個精靈（動畫的東西）清理和繪製框架。您還擁有多個定時器，並且在動畫時通常需要一個處理精靈移動和繪製幀的函數nextFrame函數。

精靈數組是需要移動和繪製的東西的列表。我爲模糊精靈添加了一些屬性，以便您可以看到它們的狀態需要像「bool」值那樣處於內部。沒有這個，你最終會影響其他的球。你需要弄清楚如何在不再使用精靈的時候移除精靈。

var dad = []; 
 
    var canvas = document.getElementById("Circuit"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var bool = false; 
 
    var dx1 = 2; 
 
    var dx2 = -2; 
 
    var dy1 = 0; 
 
    var dy2 = 2; 
 

 
    var memes = [{ 
 
    x: 0, 
 
    y: 100, 
 
    color: "#0095DD", 
 
    draw: drawMeme, 
 
    move: moveMeme, 
 
    vx: 1.2, 
 
    vy: 1.5, 
 
    }, { 
 
    x: 0, 
 
    y: 100, 
 
    vx: 1.5, 
 
    vy: 1, 
 
    color: "#DD9500", 
 
    draw: drawMeme, 
 
    move: moveMeme 
 
    }, { 
 
    x: 0, 
 
    y: 100, 
 
    vx: 2, 
 
    vy: 1, 
 
    color: "#FF0000", 
 
    draw: drawMeme, 
 
    move: moveMeme 
 
    }, { 
 
    x: 0, 
 
    y: 100, 
 
    vx: 3, 
 
    vy: 2, 
 
    color: "#009999", 
 
    draw: drawMeme, 
 
    move: moveMeme 
 
    }]; 
 

 
    function drawMeme(meme) { 
 
    ctx.beginPath(); 
 
    ctx.arc(meme.x, meme.y, 10, 0, Math.PI * 2); 
 
    ctx.fillStyle = meme.color; 
 
    ctx.fill(); 
 
    ctx.closePath(); 
 
    } 
 

 
    var sprites = []; 
 

 
    function nextFrame() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    var len = sprites.length; 
 
    for (var i = 0; i < len; i++) { 
 
     var sprite = sprites[i]; 
 
     sprite.move(sprite); 
 
     sprite.draw(sprite); 
 
    } 
 
    ctx.strokeStyle = "red"; 
 
    ctx.strokeRect(2, 101, 490, 190); 
 
    ctx.strokeStyle = "blue"; 
 
    ctx.strokeRect(2, 82, 40, 40); 
 
    requestAnimationFrame(nextFrame); 
 
    } 
 

 
    function moveMeme(meme) { 
 

 
    if (meme.x < 490 && meme.y < 291 && !meme.bool) { 
 
    meme.x += dx1 * meme.vx; 
 
    meme.y += dy1 * meme.vy; 
 
    } 
 
    else if (meme.x == 490) { 
 
    meme.x += 1 * meme.vx; 
 
    } 
 
    else if (meme.x > 490 && meme.y < 291) { 
 
    meme.y += dy2 * meme.vy; 
 
    } 
 
    else if (meme.y == 291) { 
 
    meme.y += 1 * meme.vy; 
 
    } 
 
    else if (meme.y > 291 && meme.x > 2) { 
 
    meme.bool = true; 
 
    meme.x -= 2 * meme.vx; 
 
    } 
 
    else if (meme.x == 2 && meme.y > 291) { 
 
    meme.x -= 1 * meme.vx; 
 
    } 
 
    else if (meme.x < 2) { 
 
    meme.y -= dy2 * meme.vy; 
 
    if (meme.y < 100) { 
 
    // stop drawing this sprite 
 
    meme.draw = function(){}; 
 
    meme.delete = 1; // for a cleanup function 
 
    } 
 
    } 
 

 
    } 
 

 
    nextFrame(); 
 

 
    function startMeme(index) { 
 
    var meme = memes[index]; 
 
    sprites.push(meme); 
 
    } 
 

 
    setTimeout(function() { 
 
    
 
    setTimeout(function() { 
 
     startMeme(1); 
 
    }, 1000); 
 
    
 
    startMeme(0); 
 
    startMeme(2); 
 
    startMeme(3); 
 
    }, 1000);

<canvas id="Circuit" width="500" height="320"></canvas>

來源

2016-12-20 23:45:57 wolfhammer

謝謝你，這是一個非常有用的解決方案。我非常感謝。 –

如何管理多個球動畫？

回答

相關問題