複数のボールアニメーションを管理するにはどうすればよいですか？

私はいくつかのボールをパスに沿って移動させるプログラムを作っています。これまでは、ボールの配列から別のボールを追加するたびに、ちらつきが始まり、痙攣的に消えるため、1つのボールがコースをうまく通過できるようになりました。私はこの問題を解決するための援助に感謝します。複数のボールアニメーションを管理するにはどうすればよいですか？

JS bin

<!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

私の代わりにsetInterval' 'の' requestAnimationFrame'を使用するには、この変換遊んでました。答えはあまりありませんが、あなたはインスピレーションを得るかもしれません。 https://jsbin.com/suwinanipo/1/edit?html,output – Malk

ありがとうございました！ > –

イベントループとして単一のタイマーを使用するように切り替えました。 – Malk

第2ボールは枠をレンダリングしようとしたときにちらつきが発生します。フレームをクリアして描画する2つのスプライト（アニメーションのもの）があります。また、複数のタイマーがあり、アニメーション化するときには通常、nextFrame関数がスプライトの動きを処理し、フレームを描画します。

スプライト配列は、移動および描画が必要なもののリストです。私はいくつかのプロパティをmemeスプライトに追加したので、の状態は "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

ありがとう、これは非常に有用な解決策でした。私は大いに感謝します。 –

複数のボールアニメーションを管理するにはどうすればよいですか？

答えて

関連する問題