粒子は加速しませんか？

Question

私は、JavaScriptとHTML5 Canvasを使って加速する粒子を作ろうとしていますが、加速することはできません。一定速度で動きます。なぜ誰が知っていますか？

document.addEventListener("DOMContentLoaded", init); 
function init() { 
    canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 
    angle = Math.random() * (2 * Math.PI); 

    pArray = []; 
    for (i = 0; i<25; i++) { 
     angle = Math.random() * (2*Math.PI); 
     pArray[i] = new Particle(Math.cos(angle), Math.sin(angle)); 
    } 
    setInterval(loop, 50); 
} 
function loop() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    for (x = 0; x < pArray.length; x++) { 
     pArray[x].draw(); 
    } 
} 
function Particle(xVel, yVel) { 
    this.xVel = xVel; 
    this.yVel = yVel; 
    this.x = canvas.width/2; 
    this.y = canvas.height/2; 

    this.draw = function() { 
     this.x += xVel; 
     this.y -= yVel; 
     this.yVel += 1; 

     ctx.beginPath(); 
     ctx.arc(this.x, this.y, 1, 0, Math.PI * 2); 
     ctx.fillStyle = "rgb(0, 255, 0)"; 
     ctx.fill(); 
    } 
} 

Answer 1

あなたの描画機能は、コンストラクタに渡されたyVelを使用しています。 this.y += this.yVel;

Answer 2

あなたの描画機能が、パーティクルインスタンスからではなくコンストラクタからxVelとyVelを使用しているようです。 this.y += yVelをthis.y += this.yVelに変更してみてください。

Answer 3

てみてください 次のようなボールをスピードアップ、名前の速度で、余分な変数を作成し、することができます

ここ

function Particle(xVel, yVel) { 
    this.xVel = xVel; 
    this.yVel = yVel; 
    this.speed = 1; 
    this.x = canvas.width/2; 
    this.y = canvas.height/2; 

    this.draw = function() { 
     this.x += this.speed * this.xVel; 
     this.y += this.speed * this.yVel; 
     this.speed++; 

     ctx.beginPath(); 
     ctx.arc(this.x, this.y, 1, 0, Math.PI * 2); 
     ctx.fillStyle = "rgb(0, 255, 0)"; 
     ctx.fill(); 
    } 
} 

はjsfiddle https://jsfiddle.net/3nnm2omm/