Develop Reference

Change speed of pong ball in realtime on input (JS)

I have a number input which i want to it to function as a real-time update of the speed of the pong ball, however every method I've tried hasn't worked it all comes back as "NaN". The speed is originally set to 7 but once the ball resets and a player scores id like the ball to change to the number of the input. Thank you
// select canvas element
const canvas = document.getElementById("pong");
// getContext of canvas = methods and properties to draw and do a lot of thing to the canvas
const ctx = canvas.getContext("2d");
// get the value of the user input
var userSpeedInput = parseInt(document.getElementById("user-speed").value);
// speed btn
const speedBtn = document.getElementById("speed-btn");
// load sounds
let hit = new Audio();
let wall = new Audio();
let userScore = new Audio();
let comScore = new Audio();
hit.src = "sounds/hit.mp3";
wall.src = "sounds/wall.mp3";
comScore.src = "sounds/comScore.mp3";
userScore.src = "sounds/userScore.mp3";
// Ball object
const ball = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 10,
velocityX: 5,
velocityY: 5,
speed: userSpeedInput, // speed: userSpeedInput;
color: "WHITE",
};
// User Paddle
const user = {
x: 0, // left side of canvas
y: (canvas.height - 100) / 2, // -100 the height of paddle
width: 10,
height: 100,
score: 0,
color: "WHITE",
};
// COM Paddle
const com = {
x: canvas.width - 10, // - width of paddle
y: (canvas.height - 100) / 2, // -100 the height of paddle
width: 10,
height: 100,
score: 0,
color: "WHITE",
};
// NET
const net = {
x: (canvas.width - 2) / 2,
y: 0,
height: 10,
width: 2,
color: "WHITE",
};
// draw a rectangle, will be used to draw paddles
function drawRect(x, y, w, h, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, h);
}
// draw circle, will be used to draw the ball
function drawArc(x, y, r, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
// listening to the mouse
canvas.addEventListener("mousemove", getMousePos);
function getMousePos(evt) {
let rect = canvas.getBoundingClientRect();
user.y = evt.clientY - rect.top - user.height / 2;
}
// when COM or USER scores, we reset the ball
function resetBall() {
if (!ball) return;
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.velocityX = -ball.velocityX;
ball.speed = userSpeedInput;
alert(ball.speed);
}
// draw the net
function drawNet() {
for (let i = 0; i <= canvas.height; i += 15) {
drawRect(net.x, net.y + i, net.width, net.height, net.color);
}
}
// draw text
function drawText(text, x, y) {
ctx.fillStyle = "#FFF";
ctx.font = "75px fantasy";
ctx.fillText(text, x, y);
}
// collision detection
function collision(b, p) {
p.top = p.y;
p.bottom = p.y + p.height;
p.left = p.x;
p.right = p.x + p.width;
b.top = b.y - b.radius;
b.bottom = b.y + b.radius;
b.left = b.x - b.radius;
b.right = b.x + b.radius;
return (
p.left < b.right && p.top < b.bottom && p.right > b.left && p.bottom > b.top
);
}
// update function, the function that does all calculations
function update() {
// change the score of players, if the ball goes to the left "ball.x<0" computer win, else if "ball.x > canvas.width" the user win
if (ball.x - ball.radius < 0) {
com.score++;
comScore.play();
resetBall();
} else if (ball.x + ball.radius > canvas.width) {
user.score++;
userScore.play();
resetBall();
}
// the ball has a velocity
ball.x += ball.velocityX;
ball.y += ball.velocityY;
// computer plays for itself, and we must be able to beat it
// simple AI
com.y += (ball.y - (com.y + com.height / 2)) * 0.1;
// when the ball collides with bottom and top walls we inverse the y velocity.
if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
ball.velocityY = -ball.velocityY;
wall.play();
}
// we check if the paddle hit the user or the com paddle
let player = ball.x + ball.radius < canvas.width / 2 ? user : com;
// if the ball hits a paddle
if (collision(ball, player)) {
// play sound
hit.play();
// we check where the ball hits the paddle
let collidePoint = ball.y - (player.y + player.height / 2);
// normalize the value of collidePoint, we need to get numbers between -1 and 1.
// -player.height/2 < collide Point < player.height/2
collidePoint = collidePoint / (player.height / 2);
// when the ball hits the top of a paddle we want the ball, to take a -45degees angle
// when the ball hits the center of the paddle we want the ball to take a 0degrees angle
// when the ball hits the bottom of the paddle we want the ball to take a 45degrees
// Math.PI/4 = 45degrees
let angleRad = (Math.PI / 4) * collidePoint;
// change the X and Y velocity direction
let direction = ball.x + ball.radius < canvas.width / 2 ? 1 : -1;
ball.velocityX = direction * ball.speed * Math.cos(angleRad);
ball.velocityY = ball.speed * Math.sin(angleRad);
// speed up the ball everytime a paddle hits it.
ball.speed += 0.1;
}
}
// render function, the function that does al the drawing
function render() {
// clear the canvas
drawRect(0, 0, canvas.width, canvas.height, "#000");
// draw the user score to the left
drawText(user.score, canvas.width / 4, canvas.height / 5);
// draw the COM score to the right
drawText(com.score, (3 * canvas.width) / 4, canvas.height / 5);
// draw the net
drawNet();
// draw the user's paddle
drawRect(user.x, user.y, user.width, user.height, user.color);
// draw the COM's paddle
drawRect(com.x, com.y, com.width, com.height, com.color);
// draw the ball
drawArc(ball.x, ball.y, ball.radius, ball.color);
}
function game() {
update();
render();
}
// number of frames per second
let framePerSecond = 50;
//call the game function 50 times every 1 Sec
let loop = setInterval(game, 1000 / framePerSecond);

You'll need an event listener on the user-speed textbox that changes the value of the global variable userSpeedInput when the user types something. Right now that variable is only set once, when the page first loads.
document.getElementById("user-speed").addEventListener("change", (e) => {
userSpeedInput = parseInt(e.target.value);
});

How to move object to target naturally and smoothly?

Can somebody fix it script to make it works properly?
What I expects:
Run script
Click at the canvas to set target (circle)
Object (triangle) starts to rotate and move towards to target (circle)
Change target at any time
How it works:
Sometimes object rotates correctly, sometimes isn't
Looks like one half sphere works well, another isn't
Thanks!
// prepare 2d context
const c = window.document.body.appendChild(window.document.createElement('canvas'))
.getContext('2d');
c.canvas.addEventListener('click', e => tgt = { x: e.offsetX, y: e.offsetY });
rate = 75 // updates delay
w = c.canvas.width;
h = c.canvas.height;
pi2 = Math.PI * 2;
// object that moves towards the target
obj = {
x: 20,
y: 20,
a: 0, // angle
};
// target
tgt = undefined;
// main loop
setInterval(() => {
c.fillStyle = 'black';
c.fillRect(0, 0, w, h);
// update object state
if (tgt) {
// draw target
c.beginPath();
c.arc(tgt.x, tgt.y, 2, 0, pi2);
c.closePath();
c.strokeStyle = 'red';
c.stroke();
// update object position
// vector from obj to tgt
dx = tgt.x - obj.x;
dy = tgt.y - obj.y;
// normalize
l = Math.sqrt(dx*dx + dy*dy);
dnx = (dx / l);// * 0.2;
dny = (dy / l);// * 0.2;
// update object position
obj.x += dnx;
obj.y += dny;
// angle between +x and tgt
a = Math.atan2(0 * dx - 1 * dy, 1 * dx + 0 * dy);
// update object angle
obj.a += -a * 0.04;
}
// draw object
c.translate(obj.x, obj.y);
c.rotate(obj.a);
c.beginPath();
c.moveTo(5, 0);
c.lineTo(-5, 4);
c.lineTo(-5, -4);
//c.lineTo(3, 0);
c.closePath();
c.strokeStyle = 'red';
c.stroke();
c.rotate(-obj.a);
c.translate(-obj.x, -obj.y);
}, rate);

This turned out to be a bit more challenging than I first thought and I ended up just re-writing the code.
The challenges:
Ensure the ship only rotated to the exact point of target. This required me to compare the two angle from the ship current position to where we want it to go.
Ensure the target did not rotate past the target and the ship did not translate past the target. This required some buffer space for each because when animating having this.x === this.x when an object is moving is very rare to happen so we need some room for the logic to work.
Ensure the ship turned in the shortest direction to the target.
I have added notes in the code to better explain. Hopefully you can implement this into yours or use it as is. Oh and you can change the movement speed and rotation speed as you see fit.
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
let mouse = { x: 20, y: 20 };
let canvasBounds = canvas.getBoundingClientRect();
let target;
canvas.addEventListener("mousedown", (e) => {
mouse.x = e.x - canvasBounds.x;
mouse.y = e.y - canvasBounds.y;
target = new Target();
});
class Ship {
constructor() {
this.x = 20;
this.y = 20;
this.ptA = { x: 15, y: 0 };
this.ptB = { x: -15, y: 10 };
this.ptC = { x: -15, y: -10 };
this.color = "red";
this.angle1 = 0;
this.angle2 = 0;
this.dir = 1;
}
draw() {
ctx.save();
//use translate to move the ship
ctx.translate(this.x, this.y);
//angle1 is the angle from the ship to the target point
//angle2 is the ships current rotation angle. Once they equal each other then the rotation stops. When you click somewhere else they are no longer equal and the ship will rotate again.
if (!this.direction(this.angle1, this.angle2)) {
//see direction() method for more info on this
if (this.dir == 1) {
this.angle2 += 0.05; //change rotation speed here
} else if (this.dir == 0) {
this.angle2 -= 0.05; //change rotation speed here
}
} else {
this.angle2 = this.angle1;
}
ctx.rotate(this.angle2);
ctx.beginPath();
ctx.strokeStyle = this.color;
ctx.moveTo(this.ptA.x, this.ptA.y);
ctx.lineTo(this.ptB.x, this.ptB.y);
ctx.lineTo(this.ptC.x, this.ptC.y);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
driveToTarget() {
//get angle to mouse click
this.angle1 = Math.atan2(mouse.y - this.y, mouse.x - this.x);
//normalize vector
let vecX = mouse.x - this.x;
let vecY = mouse.y - this.y;
let dist = Math.hypot(vecX, vecY);
vecX /= dist;
vecY /= dist;
//Prevent continuous x and y increment by checking if either vec == 0
if (vecX != 0 || vecY != 0) {
//then also give the ship a little buffer incase it passes the given point it doesn't turn back around. This allows time for it to stop if you increase the speed.
if (
this.x >= mouse.x + 3 ||
this.x <= mouse.x - 3 ||
this.y >= mouse.y + 3 ||
this.y <= mouse.y - 3
) {
this.x += vecX; //multiple VecX by n to increase speed (vecX*2)
this.y += vecY; //multiple VecY by n to increase speed (vecY*2)
}
}
}
direction(ang1, ang2) {
//converts rads to degrees and ensures we get numbers from 0-359
let a1 = ang1 * (180 / Math.PI);
if (a1 < 0) {
a1 += 360;
}
let a2 = ang2 * (180 / Math.PI);
if (a2 < 0) {
a2 += 360;
}
//checks whether the target is on the right or left side of the ship.
//We use then to ensure it turns in the shortest direction
if ((360 + a1 - a2) % 360 > 180) {
this.dir = 0;
} else {
this.dir = 1;
}
//Because of animation timeframes there is a chance the ship could turn past the target if rotating too fast. This gives the ship a 1 degree buffer to either side of the target to determine if it is pointed in the right direction.
//We then correct it to the exact degrees in the draw() method above once the if statment defaults to 'else'
if (
Math.trunc(a2) <= Math.trunc(a1) + 1 &&
Math.trunc(a2) >= Math.trunc(a1) - 1
) {
return true;
}
return false;
}
}
let ship = new Ship();
class Target {
constructor() {
this.x = mouse.x;
this.y = mouse.y;
this.r = 3;
this.color = "red";
}
draw() {
ctx.strokeStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
ctx.stroke();
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height);
ship.draw();
ship.driveToTarget();
if (target) {
target.draw();
}
requestAnimationFrame(animate);
}
animate();
<canvas id="canvas"></canvas>

HTML5 Canvas 2d Flickering at the same point

I made a simple animation in JavaScript using a HTML5 canvas for drawing. My problem is that the animation always flickers at the same point. Interestingly this is not happening at the time the animation gets reset.
So here's the code I use for drawing:
draw: function() {
var canvas = background.ct;
canvas.clearRect(0,0, WINDOW_WIDTH, WINDOW_HEIGHT);
for (var i = 0; i < 12; i++)
{
var sX = startX+((SLOT_WIDTH+20)*i)+mod;
drawCard(
{x: sX,
y: startY,
color: "#0A5",
ctx: canvas});
if (resetX == sX && mod != 0) //resets the animation
{
console.log('resetting at '+mod);
mod = 0;
}
if ( i == 1 && resetX == 0) //get reset-point
{
resetX = startX+((SLOT_WIDTH+20)*i)+mod;
}
}
mod++;
}
This is the drawCard function:
/*
* Draw 1 Card where x/y is the center of the card
*/
function drawCard(pos)
{
if (!pos.x || !pos.y)
return;
var c_top_left_x = pos.x - SLOT_WIDTH / 2;
var c_top_y = pos.y - SLOT_HEIGHT / 2;
var c_top_right_x = pos.x + SLOT_WIDTH / 2;
var c_bot_left_x = pos.x - SLOT_WIDTH / 2;
var c_bot_right_x = pos.x + SLOT_WIDTH / 2;
var c_bot_y = pos.y + SLOT_HEIGHT / 2;
var canvas = pos.ctx;
canvas.beginPath();
canvas.moveTo(c_top_left_x + RAD, c_top_y);
canvas.lineTo(c_top_right_x - RAD, c_top_y);
canvas.arcTo(c_top_right_x, c_top_y, c_top_right_x, c_top_y + RAD, RAD);
canvas.lineTo(c_bot_right_x, c_bot_y - RAD);
canvas.arcTo(c_bot_right_x, c_bot_y, c_bot_right_x - RAD, c_bot_y, RAD);
canvas.lineTo(c_bot_left_x + RAD, c_bot_y);
canvas.arcTo(c_bot_left_x, c_bot_y, c_bot_left_x, c_bot_y - RAD, RAD);
canvas.lineTo(c_top_left_x, c_top_y + RAD);
canvas.arcTo(c_top_left_x, c_top_y, c_top_left_x + RAD, c_top_y, RAD);
canvas.fillStyle = pos.color;
canvas.fill();
}
mod is the variable that is used for creating a motion.
The full source is at http://jsfiddle.net/Kafioin/ymddh/

If you remove/fix this line in drawCard the flickering will stop:
if (!pos.x || !pos.y) return;
The flicker occurs when pos.x==0. Since !0 is true your draw is not executed for that animation loop.

Canvas: How would you properly interpolate between two points using Bresenham's line algorithm?

I am making a simple HTML5 Canvas drawing app where a circle is placed at a x and y position each time the mouse moves. The (quite common but unsolved) problem is: when the mouse is moved very fast (as in faster than the mouse move events are triggered), you end up with space in between the circles.
I have used Bresenham's line algorithm to somewhat successfully draw circles between the gaps. However, I have encountered another problem: when the color is one of translucency I get an unintentional fade-to-darker effect.
Here's an example:
I don't understand why this is happening. How would you properly interpolate between two points using Bresenham's line algorithm? Or some other algorithm?
Here's my code: http://jsfiddle.net/E5NBs/
var x = null;
var y = null;
var prevX = null;
var prevY = null;
var spacing = 3;
var drawing = false;
var size = 5;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function createFlow(x1, y1, x2, y2, callback) {
var dx = x2 - x1;
var sx = 1;
var dy = y2 - y1;
var sy = 1;
var space = 0;
if (dx < 0) {
sx = -1;
dx = -dx;
}
if (dy < 0) {
sy = -1;
dy = -dy;
}
dx = dx << 1;
dy = dy << 1;
if (dy < dx) {
var fraction = dy - (dx >> 1);
while (x1 != x2) {
if (fraction >= 0) {
y1 += sy;
fraction -= dx;
}
fraction += dy;
x1 += sx;
if (space == spacing) {
callback(x1, y1);
space = 0;
} else {
space += 1;
}
}
} else {
var fraction = dx - (dy >> 1);
while (y1 != y2) {
if (fraction >= 0) {
x1 += sx;
fraction -= dy;
}
fraction += dx;
y1 += sy;
if (space == spacing) {
callback(x1, y1);
space = 0;
} else {
space += 1;
}
}
}
callback(x1, y1);
}
context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, 500, 400);
canvas.onmousemove = function(event) {
x = parseInt(this.offsetLeft);
y = parseInt(this.offsetTop);
if (this.offsetParent != null) {
x += parseInt(this.offsetParent.offsetLeft);
y += parseInt(this.offsetParent.offsetTop);
}
if (navigator.appVersion.indexOf('MSIE') != -1) {
x = (event.clientX + document.body.scrollLeft) - x;
y = (event.clientY + document.body.scrollTop) - y;
} else {
x = event.pageX - x;
y = event.pageY - y;
}
context.beginPath();
if (drawing == true) {
if (((x - prevX) >= spacing || (y - prevY) >= spacing) || (prevX - x) >= spacing || (prevY - y) >= spacing) {
createFlow(x, y, prevX, prevY, function(x, y) {
context.fillStyle = 'rgba(0, 0, 0, 0.1)';
context.arc(x, y, size, 0, 2 * Math.PI, false);
context.fill();
});
prevX = x, prevY = y;
}
} else {
prevX = x, prevY = y;
}
};
canvas.onmousedown = function() {
drawing = true;
};
canvas.onmouseup = function() {
drawing = false;
};

HTML Canvas supports fractional / floating point coordinates, so using an algorithm for integer coordinate based pixel canvas is not necessary and could be considered even counter-productive.
A simple, generic solution would be something along these lines:
when mouse_down:
x = mouse_x
y = mouse_y
draw_circle(x, y)
while mouse_down:
when mouse_moved:
xp = mouse_x
yp = mouse_y
if (x != xp or y != yp):
dir = atan2(yp - y, xp - x)
dist = sqrt(pow(xp - x, 2) + pow(yp - y, 2))
while (dist > 0):
x = x + cos(dir)
y = y + sin(dir)
draw_circle(x, y)
dist = dist - 1
That is, whenever the mouse is moved to a location different from the location of the last circle drawn, walk towards the new location with steps having distance one.

If I understand well, you want to have rgba(0, 0, 0, 0.1) on every point. If so, then you can clear the point before drawing new one.
// this is bad way to clear the point, just I don't know canvas so well
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.arc(x, y, size, 0, 2 * Math.PI, false);
context.fill();
context.fillStyle = 'rgba(0, 0, 0, 0.1)';
context.arc(x, y, size, 0, 2 * Math.PI, false);
context.fill();

I've figured it out.
"context.beginPath();" needed to be in the createFlow callback function like so:
createFlow(x, y, prevX, prevY, function(x, y) {
context.beginPath();
context.fillStyle = 'rgba(0, 0, 0, 0.1)';
context.arc(x, y, size, 0, 2 * Math.PI, false);
context.fill();
});

Multiple setInterval in a HTML5 Canvas game

I'm trying to achieve multiple animations in a game that I am creating using Canvas (it is a simple ping-pong game). This is my first game and I am new to canvas but have created a few experiments before so I have a good knowledge about how canvas work.
First, take a look at the game here.
The problem is, when the ball hits the paddle, I want a burst of n particles at the point of contact but that doesn't came right. Even if I set the particles number to 1, they just keep coming from the point of contact and then hides automatically after some time.
Also, I want to have the burst on every collision but it occurs on first collision only. I am pasting the code here:
//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);
Now, my function for emitting particles is on line 156, and I have called this function on line 151. The problem here can be because of I am not resetting the flag variable but I tried doing that and got more weird results. You can check that out here.
By resetting the flag variable, the problem of infinite particles gets resolved but now they only animate and appear when the ball collides with the paddles. So, I am now out of any solution.

I can see 2 problems here.
your main short term problem is your use of setinterval is incorrect, its first parameter is a function.
setInterval(emitParticles(particlePos.x, particlePos.y), 1000/fps);
should be
setInterval(function() {
emitParticles(particlePos.x, particlePos.y);
}, 1000/fps);
Second to this, once you start an interval it runs forever - you don't want every collision event to leave a background timer running like this.
Have an array of particles to be updated, and update this list once per frame. When you make new particles, push additional ones into it.