HTML5 Canvas遊戲中的多setInterval

Question

我試圖在使用Canvas創建的遊戲中實現多個動畫（這是一個簡單的乒乓遊戲）。這是我的第一場比賽，我對畫布很陌生，但之前已經創建了一些實驗，所以我對畫布的工作有很好的瞭解。

首先，看看遊戲here。 問題是，當球擊中槳時，我想要在接觸點產生一個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); 

現在，我的用於發射粒子功能上線156，我把這種現象稱之爲功能上線151這裏的問題可能是因爲我不是重置flag變量但我試圖做到這一點，並得到更奇怪的結果。你可以檢查出here。

通過重置flag變量，無限粒子的問題得到解決，但現在它們只會生動並在球碰撞槳時出現。所以，我現在沒有任何解決方案。

Answer 1

我可以在這裏看到2個問題。

你的主要短期問題是你使用setinterval是不正確的，它的第一個參數是一個函數。

setInterval(emitParticles(particlePos.x, particlePos.y), 1000/fps);

應該

setInterval(function() { 
 
    emitParticles(particlePos.x, particlePos.y); 
 
}, 1000/fps);

二本，一旦你開始的時間間隔運行永遠 - 你不想每一次碰撞事件留下一個像這樣運行的後臺計時器。

有一個要更新的粒子數組，每幀更新一次該列表。當你製造新的粒子時，推入更多的粒子。