холст пинг-понг блестки

Question

Im пытается добавить искры к моей основной игре пинг-понг. Искра должна быть добавлена ​​всякий раз, когда мяч попадает в весло. Я создаю искры, как объект с

function create_sparks(x, y, m) { 
    this.x = x; 
    this.y = y; 
    this.r = 1,2; 
    this.vx = -1.5 + Math.random() * 3; 
    this.vy = m * Math.random() * 1.5; 
} 

им их создания, как этот

if (flag == 1) { 
     for (var j = 0; j < 20; j++) { 

      particles.push(new create_sparks(spark.x, spark.y, mult)); 
     } 
    } 
    emitspark(); 
    flag = 0; 

флаг равен 1, когда мяч попадает в лужу, spark.x и spark.y являются источником мяч (где он попадает в лужу) и, наконец им анимировать их, как этот

function emitspark() { 
    for (var i = 0; i < particles.length; i++) { 
     var p = particles[i]; 
     ctx.beginPath(); 
     ctx.fillStyle = "white"; 
     if (p.r > 0) { 
      ctx.arc(p.x, p.y, p.r, 0, Math.Pi * 2); 
     } 
     ctx.fill(); 
     p.x+=p.vx; 
     p.y+=p.vy; 
     p.r=Math.max(p.r-0.05,0.0); 
    } 
} 

проблема, искры обыкновение появляться, ни код бросает какую-либо ошибку и работает отлично (только без искр) сделал я упускать из виду некоторые вещь? here является демо

Answer 1

Основная проблема заключается в том, что ball.h не определено - он генерирует значение NaN для значений spark.y.

ball = { 
    x: 50, 
    y: 50, 
    r: 5, 
    h: 10, // < ---- NEW 
    c: "white", 
    vx: 4, 
    vy: 8, 

    // Function for drawing ball on canvas 
    draw: function() { 
     ctx.beginPath(); 
     ctx.fillStyle = this.c; 
     ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); 
     ctx.fill(); 
     update(); 
    } 
}; 

исправления это. Я также изменил emitspark(), исследуя код. Упростить как вы будете, но эта версия работает для меня:

function emitspark() { 
    for (var i = 0; i < particles.length; i++) { 
     var p = particles[i]; 
      ctx.beginPath(); 
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true); 
      ctx.lineWidth = 15; 
      ctx.strokeStyle = 'red'; 
      ctx.fillStyle="white"; 
      ctx.fill(); 
      ctx.stroke(); 
     p.x+=p.vx; 
     p.y+=p.vy; 
     p.r=Math.max(p.r-0.05,0.0); 
    } 
} 

Наконец я предлагаю установки длины массива частиц до нуля после того, как искра эффект закончится, чтобы предотвратить массив становится все длиннее и длиннее. Искры нулевого радиуса все еще обрабатываются - предполагается, что метод контекстной дуги просто не создает для них путь. Но красивые блестки!