Javascript HTML5画布游戏中的多重设置间隔

我正在尝试在一个使用Canvas创建的游戏中实现多个动画（这是一个简单的乒乓球游戏）。这是我的第一个游戏，我是画布新手，但之前做过一些实验，所以我对画布的工作原理有很好的了解

首先，看看这个游戏。 问题是，当球碰到桨叶时，我希望在接触点有n个粒子的爆发，但这并不正确。即使我将粒子数设置为1，它们也只是从接触点不断出现，然后在一段时间后自动隐藏

另外，我希望在每次碰撞时都有爆发，但它只发生在第一次碰撞时。我在这里粘贴代码：

//Initialize canvas
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    W = window.innerWidth, 
    H = window.innerHeight,
    particles = [],
    ball = {},
    paddles = [2],
    mouse = {},
    points = 0,
    fps = 60,
    particlesCount = 50,
    flag = 0,
    particlePos = {}; 

canvas.addEventListener("mousemove", trackPosition, true);

//Set it's height and width to full screen
canvas.width = W;
canvas.height = H;

//Function to paint canvas
function paintCanvas() {
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, W, H);
}

//Create two paddles
function createPaddle(pos) {
    //Height and width
    this.h = 10;
    this.w = 100;

    this.x = W/2 - this.w/2;
    this.y = (pos == "top") ? 0 : H - this.h;

}

//Push two paddles into the paddles array
paddles.push(new createPaddle("bottom"));
paddles.push(new createPaddle("top"));

//Setting up the parameters of ball
ball = {
    x: 2,
    y: 2,
    r: 5,
    c: "white",
    vx: 4,
    vy: 8,
    draw: function() {
        ctx.beginPath();
        ctx.fillStyle = this.c;
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
        ctx.fill();
    }
};

//Function for creating particles
function createParticles(x, y) {
    this.x = x || 0;
    this.y = y || 0;

    this.radius = 0.8;

    this.vx = -1.5 + Math.random()*3;
    this.vy = -1.5 + Math.random()*3;
}

//Draw everything on canvas
function draw() {
    paintCanvas();
    for(var i = 0; i < paddles.length; i++) {
        p = paddles[i];

        ctx.fillStyle = "white";
        ctx.fillRect(p.x, p.y, p.w, p.h);
    }

    ball.draw();
    update();
}

//Mouse Position track
function trackPosition(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
}

//function to increase speed after every 5 points
function increaseSpd() {
    if(points % 4 == 0) {
        ball.vx += (ball.vx < 0) ? -1 : 1;
        ball.vy += (ball.vy < 0) ? -2 : 2;
    }
}

//function to update positions
function update() {

    //Move the paddles on mouse move
    if(mouse.x && mouse.y) {
        for(var i = 1; i < paddles.length; i++) {
            p = paddles[i];
            p.x = mouse.x - p.w/2;
        }       
    }

    //Move the ball
    ball.x += ball.vx;
    ball.y += ball.vy;

    //Collision with paddles
    p1 = paddles[1];
    p2 = paddles[2];

    if(ball.y >= p1.y - p1.h) {
        if(ball.x >= p1.x && ball.x <= (p1.x - 2) + (p1.w + 2)){ 
            ball.vy = -ball.vy;
            points++;
            increaseSpd();

            particlePos.x = ball.x,
            particlePos.y = ball.y;
            flag = 1;
        }
    }

    else if(ball.y <= p2.y + 2*p2.h) {
        if(ball.x >= p2.x && ball.x <= (p2.x - 2) + (p2.w + 2)){ 
            ball.vy = -ball.vy;
            points++;
            increaseSpd();

            particlePos.x = ball.x,
            particlePos.y = ball.y;
            flag = 1;
        }
    }

    //Collide with walls
    if(ball.x >= W || ball.x <= 0)
        ball.vx = -ball.vx;

    if(ball.y > H || ball.y < 0) {
        clearInterval(int);
    }

    if(flag == 1) {
        setInterval(emitParticles(particlePos.x, particlePos.y), 1000/fps);
    }

}

function emitParticles(x, y) {

    for(var k = 0; k < particlesCount; k++) {
        particles.push(new createParticles(x, y));
    }

    counter = particles.length;

    for(var j = 0; j < particles.length; j++) {
        par = particles[j];

        ctx.beginPath(); 
        ctx.fillStyle = "white";
        ctx.arc(par.x, par.y, par.radius, 0, Math.PI*2, false);
        ctx.fill();  

        par.x += par.vx; 
        par.y += par.vy;

        par.radius -= 0.02; 

        if(par.radius < 0) {
            counter--;
            if(counter < 0) particles = [];
        }

    } 
}

var int = setInterval(draw, 1000/fps);

//初始化画布
var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
W=窗宽，
H=窗内高度，
粒子=[]，
ball={}，
桨=[2]，
鼠标={}，
分数=0，
fps=60，
粒子数=50，
flag=0，
particlePos={}；
canvas.addEventListener（“mousemove”，trackPosition，true）；
//将其高度和宽度设置为全屏
画布宽度=W；
canvas.height=H；
//用于绘制画布的函数
函数paintCanvas（）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.fillStyle=“黑色”；
ctx.fillRect（0,0,W,H）；
}
//创建两个桨
功能CreateBiler（pos）{
//高度和宽度
这个h=10；
这是w=100；
this.x=W/2-this.W/2；
this.y=（pos=“top”）？0:H-this.H；
}
//将两个拨杆推入拨杆阵列
推（新的CreateBiler（“底部”））；
桨。推（新创建的桨（“顶部”））；
//球的参数设置
球={
x:2，
y:2，
r:5，
c:“白色”，
vx:4，
vy:8，
绘图：函数（）{
ctx.beginPath（）；
ctx.fillStyle=this.c；
弧（this.x，this.y，this.r，0，Math.PI*2，false）；
ctx.fill（）；
}
};
//用于创建粒子的函数
函数createParticles（x，y）{
这个.x=x | | 0；
这个.y=y | | 0；
该半径=0.8；
this.vx=-1.5+Math.random（）*3；
this.vy=-1.5+Math.random（）*3；
}
//把一切都画在画布上
函数绘图（）{
paintCanvas（）；
对于（变量i=0；i=p1.y-p1.h）{
如果（ball.x>=p1.x&&ball.x我可以在这里看到两个问题

您的主要短期问题是setinterval的使用不正确，它的第一个参数是函数


setInterval（emitParticles（particlePos.x，particlePos.y），1000/fps）；
此问题已在此处解决：