#35 synchro timer

client/src/main.js

@@ -78,6 +78,7 @@ function afficherFinDePartie() {
 
 function startGame(event) {
 	gameStarted = true;
+	socket.emit('start', gameStarted);
 	event.preventDefault();
 	canvas.style.display = '';
 	document.querySelector('.divMain').innerHTML = setHtml.vide();
@@ -86,6 +87,10 @@ function startGame(event) {
 	socket.emit('canvasSize', canvasSize);
 }
 
+setInterval(() => {
+	socket.emit('start', gameStarted);
+}, 1000 / 16);
+
 const canvasResizeObserver = new ResizeObserver(() => resampleCanvas());
 canvasResizeObserver.observe(canvas);
 
@@ -116,48 +121,48 @@ let newEnemis = [];
 let newBonus = [];
 
 function render() {
-	console.log(sec);
 	context.clearRect(0, 0, canvas.width, canvas.height);
 	context.drawImage(background, 0, 0, canvas.width, canvas.height);
-
-	context.font = '40pt New Super Mario Font U';
-	context.fillStyle = 'blue';
-	context.fillText(avatar.getScore(), 10, 50);
-	context.fillText(0 + ':' + min + ':' + sec, canvas.width / 2, 50);
-
-	for (let i = 0; i < avatar.getVies(); i++) {
-		context.drawImage(imageCoeur, canvas.width - (3 - i) * 50, 0, 50, 50);
-	}
-
-	for (let avatarId in avatars) {
-		context.drawImage(avatar.image, avatars[avatarId].x, avatars[avatarId].y);
-		if (avatars[avatarId].projectiles != undefined) {
-			avatars[avatarId].projectiles.forEach(projectile => {
-				context.drawImage(imageProjectile, projectile.x, projectile.y);
-			});
+	console.log(gameStarted);
+	if (gameStarted) {
+		context.font = '40pt New Super Mario Font U';
+		context.fillStyle = 'blue';
+		context.fillText(avatar.getScore(), 10, 50);
+		context.fillText(0 + ':' + min + ':' + sec, canvas.width / 2, 50);
+
+		for (let i = 0; i < avatar.getVies(); i++) {
+			context.drawImage(imageCoeur, canvas.width - (3 - i) * 50, 0, 50, 50);
 		}
-	}
-	socket.on('enemis', data => {
-		newEnemis = data;
-	});
-	newEnemis.forEach(enemi => {
-		if (enemi.difficulté == 1) {
-			draw(canvas, context, imageEnemi, enemi.x, enemi.y);
-		} else if (enemi.difficulté == 2) {
-			draw(canvas, context, imageEnemi2, enemi.x, enemi.y);
+		for (let avatarId in avatars) {
+			context.drawImage(avatar.image, avatars[avatarId].x, avatars[avatarId].y);
+			if (avatars[avatarId].projectiles != undefined) {
+				avatars[avatarId].projectiles.forEach(projectile => {
+					context.drawImage(imageProjectile, projectile.x, projectile.y);
+				});
+			}
 		}
-	});
-	socket.on('bonusArray', data => {
-		newBonus = data;
-	});
-	newBonus.forEach(bonus => {
-		console.log(bonus);
-		let img = new Image();
-		img.src = bonusImages[bonus.choix];
-		img.width = 75;
-		img.height = 75;
-		draw(canvas, context, img, bonus.x, bonus.y);
-	});
+		socket.on('enemis', data => {
+			newEnemis = data;
+		});
+		newEnemis.forEach(enemi => {
+			if (enemi.difficulté == 1) {
+				draw(canvas, context, imageEnemi, enemi.x, enemi.y);
+			} else if (enemi.difficulté == 2) {
+				draw(canvas, context, imageEnemi2, enemi.x, enemi.y);
+			}
+		});
+		socket.on('bonusArray', data => {
+			newBonus = data;
+		});
+		newBonus.forEach(bonus => {
+			console.log(bonus);
+			let img = new Image();
+			img.src = bonusImages[bonus.choix];
+			img.width = 75;
+			img.height = 75;
+			draw(canvas, context, img, bonus.x, bonus.y);
+		});
+	}
 
 	requestAnimationFrame(render);
 }

server/index.js

@@ -19,6 +19,7 @@ let canvasSize = new Coordinate(1920, 1261);
 
 let canLostLifeAvatar = true;
 let canLostLifeEnemi = true;
+let gameStarted = false;
 
 let t = new timer();
 
@@ -42,8 +43,12 @@ httpServer.listen(port, () => {
 });
 
 setInterval(function () {
-	t.addTime();
-	io.emit('timer', t.getMin(), t.getSec());
+	if (gameStarted) {
+		t.addTime();
+		io.emit('timer', t.getMin(), t.getSec());
+	} else {
+		t = new timer();
+	}
 }, 1000);
 
 const avatars = [];
@@ -74,6 +79,14 @@ io.on('connection', socket => {
 		}
 	});
 
+	socket.on('start', s => {
+		if (s == true) {
+			gameStarted = s;
+		} else {
+			gameStarted = false;
+		}
+	});
+
 	socket.on('shoot', shoot => {
 		const playerAvatar = avatars.find(avatar => avatar.nom === shoot.id);
 
@@ -98,20 +111,23 @@ io.on('connection', socket => {
 });
 
 let spawnIntervalLV1 = setInterval(() => {
-	if (t.getSec() >= 10) {
-		LVL2start = true;
-	}
+	console.log(gameStarted);
+	if (gameStarted) {
+		if (t.getSec() >= 10) {
+			LVL2start = true;
+		}
 
-	let randomY = Math.random() * (canvasSize.height - 0) + 0;
-	do {
-		randomY = Math.random() * (canvasSize.height - 0) + 0;
-	} while (randomY > canvasSize.height - 57);
-	const newEnemy = new enemi(canvasSize.width, randomY, 0, 1);
-	enemis.push(newEnemy);
+		let randomY = Math.random() * (canvasSize.height - 0) + 0;
+		do {
+			randomY = Math.random() * (canvasSize.height - 0) + 0;
+		} while (randomY > canvasSize.height - 57);
+		const newEnemy = new enemi(canvasSize.width, randomY, 0, 1);
+		enemis.push(newEnemy);
+	}
 }, 1000);
 
 let spawnIntervalLV2 = setInterval(() => {
-	if (LVL2start) {
+	if (LVL2start && gameStarted) {
 		let randomY = Math.random() * (canvasSize.height - 0) + 0;
 		do {
 			randomY = Math.random() * (canvasSize.height - 0) + 0;
@@ -124,93 +140,100 @@ let spawnIntervalLV2 = setInterval(() => {
 }, 800);
 
 let spawnBonusInterval = setInterval(() => {
-	let randomX;
-	let randomY;
-	const choix = Math.floor(Math.random() * bonusNoms.length);
-	do {
-		randomY = Math.random() * (canvasSize.height - 0) + 0;
-	} while (randomY > canvasSize.height - 75);
-	do {
-		randomX = Math.random() * (canvasSize.width - 0) + 0;
-	} while (randomX > canvasSize.width - 75);
-	const bonus = new Bonus(choix, 1, randomX, randomY, t.getTotalTime());
-	bonusArray.push(bonus);
+	if (gameStarted) {
+		let randomX;
+		let randomY;
+		const choix = Math.floor(Math.random() * bonusNoms.length);
+		do {
+			randomY = Math.random() * (canvasSize.height - 0) + 0;
+		} while (randomY > canvasSize.height - 75);
+		do {
+			randomX = Math.random() * (canvasSize.width - 0) + 0;
+		} while (randomX > canvasSize.width - 75);
+		const bonus = new Bonus(choix, 1, randomX, randomY, t.getTotalTime());
+		bonusArray.push(bonus);
+	}
 }, 15000);
 
 setInterval(() => {
-	io.emit('enemis', enemis);
-	io.emit('bonusArray', bonusArray);
-
-	let avatarData = [];
-	avatars.forEach(avatar => {
-		avatar.canvasSize = canvasSize;
-		if (
-			avatar.getStatut() == 'invincibilite' &&
-			t.getTotalTime() - avatar.getStatutTime() == 15
-		) {
-			avatar.setStatut('null');
-		}
-		enemis.forEach(enemi => {
+	if (gameStarted) {
+		io.emit('enemis', enemis);
+		io.emit('bonusArray', bonusArray);
+
+		let avatarData = [];
+		avatars.forEach(avatar => {
+			avatar.canvasSize = canvasSize;
 			if (
-				enemi.hitbox.colision(avatar.hitbox) &&
-				avatar.getStatut() != 'invincibilite'
+				avatar.getStatut() == 'invincibilite' &&
+				t.getTotalTime() - avatar.getStatutTime() == 15
 			) {
-				if (canLostLifeAvatar) {
-					avatar.decrementScore(5);
-					enemis.splice(enemis.indexOf(enemi), 1);
-					avatar.perdreVie();
-					canLostLifeAvatar = false;
-					setTimeout(function () {
-						canLostLifeAvatar = true;
-					}, 100);
-				}
-				if (avatar.getVies() == 0) {
-					//afficherFinDePartie();
-					avatar.initAvatar();
-					//t = new timer();
-				}
+				avatar.setStatut('null');
 			}
-			if (enemi.getVies() < 0) {
-				avatar.incrementScore(5);
-				enemis.splice(enemis.indexOf(enemi), 1);
-			}
-			enemi.deplacer();
-			avatar.colision(enemi.hitbox);
-			avatar.projectiles.forEach(projectile => {
-				if (projectile.hitbox.colision(enemi.hitbox)) {
-					avatar.projectiles.splice(avatar.projectiles.indexOf(projectile), 1);
-					if (canLostLifeEnemi) {
-						enemi.perdreVie();
-						canLostLifeEnemi = false;
+			enemis.forEach(enemi => {
+				if (
+					enemi.hitbox.colision(avatar.hitbox) &&
+					avatar.getStatut() != 'invincibilite'
+				) {
+					if (canLostLifeAvatar) {
+						avatar.decrementScore(5);
+						enemis.splice(enemis.indexOf(enemi), 1);
+						avatar.perdreVie();
+						canLostLifeAvatar = false;
 						setTimeout(function () {
-							canLostLifeEnemi = true;
-						}, 1000 / 60);
+							canLostLifeAvatar = true;
+						}, 100);
+					}
+					if (avatar.getVies() == 0) {
+						//afficherFinDePartie();
+						avatar.initAvatar();
+						//t = new timer();
 					}
 				}
+				if (enemi.getVies() < 0) {
+					avatar.incrementScore(5);
+					enemis.splice(enemis.indexOf(enemi), 1);
+				}
+				enemi.deplacer();
+				avatar.colision(enemi.hitbox);
+				avatar.projectiles.forEach(projectile => {
+					if (projectile.hitbox.colision(enemi.hitbox)) {
+						avatar.projectiles.splice(
+							avatar.projectiles.indexOf(projectile),
+							1
+						);
+						if (canLostLifeEnemi) {
+							enemi.perdreVie();
+							canLostLifeEnemi = false;
+							setTimeout(function () {
+								canLostLifeEnemi = true;
+							}, 1000 / 60);
+						}
+					}
+				});
 			});
-		});
-		avatar.deplacer();
-		avatar.projectiles.forEach(projectile => projectile.deplacer());
-		avatarData.push({
-			id: avatar.id,
-			x: avatar.getX(),
-			y: avatar.getY(),
-			projectiles: avatar.projectiles,
-		});
-		bonusArray.forEach(bonus => {
-			if (bonus.hitbox.colision(avatar.hitbox)) {
-				if (bonusNoms[bonus.getChoix()] == 'vie') {
-					avatar.gagnerVie();
-				} else if (bonusNoms[bonus.getChoix()] == 'invincibilite') {
-					avatar.setStatut('invincibilite');
-					avatar.setStatutTime(t.getTotalTime());
+			avatar.deplacer();
+			avatar.projectiles.forEach(projectile => projectile.deplacer());
+			avatarData.push({
+				id: avatar.id,
+				x: avatar.getX(),
+				y: avatar.getY(),
+				projectiles: avatar.projectiles,
+			});
+			bonusArray.forEach(bonus => {
+				if (bonus.hitbox.colision(avatar.hitbox)) {
+					if (bonusNoms[bonus.getChoix()] == 'vie') {
+						avatar.gagnerVie();
+					} else if (bonusNoms[bonus.getChoix()] == 'invincibilite') {
+						avatar.setStatut('invincibilite');
+						avatar.setStatutTime(t.getTotalTime());
+					}
+					bonusArray.splice(bonusArray.indexOf(bonus), 1);
 				}
-				bonusArray.splice(bonusArray.indexOf(bonus), 1);
-			}
-			if (bonus.estExpire(t.getTotalTime())) {
-				bonusArray.splice(bonusArray.indexOf(bonus), 1);
-			}
+				if (bonus.estExpire(t.getTotalTime())) {
+					bonusArray.splice(bonusArray.indexOf(bonus), 1);
+				}
+			});
 		});
-	});
-	io.emit('avatarsData', avatarData);
+		io.emit('avatarsData', avatarData);
+	}
 }, 1000 / 60);