如何管理多个球动画？

我制作了一个应该让几个球沿着路径移动的程序。到目前为止，我只能使一个球成功地穿过球场，因为每当我添加另一个球（来自球的阵列）时，它就开始闪烁并且消失。我希望在解决这个问题方面提供任何帮助。如何管理多个球动画？

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

谢谢你，这是一个非常有用的解决方案。我非常感谢。 –

如何管理多个球动画？

回答

相关问题