Question

我试图为我的基本乒乓球游戏添加火花。每当球击中球拍时，都应添加火花。我用

创建火花作为对象

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未定义 - 它为spark.y值生成NaN值。

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);
    }
}

最后，我建议一旦火花效果结束，将粒子阵列长度设置为零，以防止阵列变得越来越长。零半径火花仍在处理中 - 假设上下文弧方法根本就没有为它们创建路径。但好闪闪发光！

帆布乒乓闪耀

1 个答案: