Salut! Pour un jeu HTML, j'aimerais créer des bulles qui tombent du ciel à intervalle régulier, le tout dans un canvas HTML.

J'ai donc écris le code suivant :

var start = Date.now();

var canvas = document.getElementById('canvas');
var height = canvas.height;
var width = canvas.width;
var ctx = canvas.getContext('2d');
	

var interval;

var bubbles = new Array();
var speed = 1;
var bubblesInterval = 2000; //en millisecondes
var timeLastBubble = 0;

init();

function init(){
	interval = setInterval(draw, 1);
}


function draw(){
	ctx.clearRect(0,0,width,height);

        /**Crée une bulle d'abscisse aléatoire toutes les "bubblesInterval" secondes***/
	if(millis()-timeLastBubble > bubblesInterval){
		let x = random(width);
		bubbles.push(new bubble(x));
		timeLastBubble = millis();
		console.log("bubble")
	}
        
        /**Affiche et actualise les bulles vivantes**/
	for(let i=0; i<bubbles.length; i++){
		if(bubbles[i].alive){
			bubbles[i].show();
			bubbles[i].update();
		}
	}

}

function bubble(x){
	this.x = x; 
	this.y=0;

	this.alive = true;

	this.update = function(){
		this.y = this.y+speed;
		if(this.y>height)
			this.die();
	}

	this.show = function(){
		circle(this.x, this.y, 40);
	}

	this.die = function(){
		bubbles.splice(bubbles.indexOf(this), 1);
	}
}

function circle(x, y, rayon){
	ctx.beginPath();
	ctx.arc(x,y,rayon,0,2*Math.PI);
	ctx.stroke(); 
}

function millis(){
	return Date.now()-start;
}

function random(x){
	return Math.floor(Math.random()*x);
}

Je débute, donc pas sûr que ce soit la meilleure façon de faire (et j'accepte toute remarque/critique), mais ça marche!

Mais le problème est le suivant. Quand je lance le code dans Firefox et que je ne change pas d'onglet, tout fonctionne. Mais si je laisse tourner le code pendant que je suis dans un autre onglet, puis que je reviens dans l'onglet, toutes les bulles qui auraient dues être créées en mon absence se créent toutes d'un coup et en même temps !

Je ne comprends pas d'où vient le problème...

Merci d'avance.

J'ai pas la réponse mais comme tu accepte les remarques, fait gaffe à la porté de tes variables, c'est pas bon de tout déclarer comme ça . Faut déclarer tes variables là où tu les utilise si tu les utilise une fois sinon, tu peux les laisser en dehors de tes fonctions