如何在線上添加球並在HTML5中每次點擊移動球？

Question

我正在嘗試創建這個移動的球。所以每次點擊它都應該在右邊線的末尾添加一個球，並且在動畫仍然運行時球會移動到左邊直到它消失。所以，如果我點擊5次按鈕，我應該同時移動5個球，但是第一個會先移動，然後跟隨其餘的球。距離應該取決於點擊按鈕的時間。

這是我到目前爲止得到的。

// RequestAnimFrame: a browser API for getting smooth animations 
window.requestAnimFrame = (function() { 
    return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame  || 
     window.msRequestAnimationFrame  || 
     function(callback) { 
      return window.setTimeout(callback, 1000/60); 
     }; 
})(); 

var loop = 400; 
var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 

function drawALine() { 
    context.beginPath(); 
    context.moveTo(10, 10); 
    context.lineTo(400, 10); 
    context.stroke(); 
} 

function drawABall(positionX) { 
    context.beginPath(); 
    context.arc(positionX, 10, 5, 0, 2 * Math.PI, false); 
    context.fillStyle = 'green'; 
    context.fill(); 
    context.lineWidth = 5; 
    context.strokeStyle = '#003300'; 
    context.stroke(); 
} 

function clearScreen() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
} 

function animloop() { 
    loop = loop - 1; 
    init = requestAnimFrame(animloop); 

    clearScreen(); 
    drawALine(); 
    drawABall(loop); 
} 

jQuery('#addBall').click(function() { 
    animloop(); 
    drawABall(0); 
}); 

http://jsfiddle.net/noppanit/z5VwL/6/

Answer 1

你可以讓球

var balls = []; 

，並在列表每次點擊你可以在新的Ball對象添加到列表：

jQuery('#addBall').click(function() { 
    balls.push(new Ball()); 
}); 

的Ball對象看起來像這樣：

function Ball() { 
    this.pos = 400; 
    this.render = function() { 
     this.pos -= 1;  

     context.beginPath(); 
     context.arc(this.pos, 10, 5, 0, 2 * Math.PI, false); 
     context.fillStyle = 'green'; 
     context.fill(); 
     context.lineWidth = 5; 
     context.strokeStyle = '#003300'; 
     context.stroke(); 
    }; 
} 

所以，現在你animLoop功能如下：

function animloop() { 
    requestAnimFrame(animloop); 

    clearScreen(); 
    drawALine(); 
    for(var i = 0; i < balls.length; i++) { 
     balls[i].render(); 
    } 
} 

我已經做了一個jsFiddle這一點。