main refacto

client/src/afficher.js

@@ -2,28 +2,35 @@ import setHtml from './setHtml.js';
 import { Coordinate } from './Coordinate.js';
 
 export default class Afficher {
-	static afficherCredits(event) {
+	gameStarted;
+
+	constructor() {
+		this.gameStarted = false;
+	}
+
+	afficherCredits(event) {
 		event.preventDefault();
 		document.querySelector('.divMain').innerHTML = setHtml.credits();
 		console.log(document.querySelector('.retourMenu'));
 		document
 			.querySelector('.retourMenu')
-			.addEventListener('click', Afficher.afficherMenu);
+			.addEventListener('click', this.afficherMenu);
 	}
 
-	static afficherMenu(event) {
+	afficherMenu(event) {
 		event.preventDefault();
 		console.log('afficherMenu');
 		document.querySelector('.divMain').innerHTML = setHtml.menu();
 		document
 			.querySelector('.buttonStart')
-			.addEventListener('click', Afficher.startGame);
+			.addEventListener('click', this.startGame);
 		document
 			.querySelector('.credits')
-			.addEventListener('click', Afficher.afficherCredits);
+			.addEventListener('click', this.afficherCredits);
 	}
 
-	static afficherFinDePartie() {
+	afficherFinDePartie() {
+		this.gameStarted = false;
 		canvas.style.display = 'none';
 		document.querySelector('.animation').style.display = '';
 		document.querySelector('.divMain').innerHTML = setHtml.finDePartie(
@@ -32,11 +39,11 @@ export default class Afficher {
 		);
 		document
 			.querySelector('.retourMenu')
-			.addEventListener('click', Afficher.afficherMenu);
-		return false;
+			.addEventListener('click', this.afficherMenu);
 	}
 
-	static startGame(event) {
+	startGame(event) {
+		this.gameStarted = true;
 		event.preventDefault();
 		const canvas = document.querySelector('.gameCanvas');
 		canvas.style.display = '';
@@ -45,4 +52,8 @@ export default class Afficher {
 		const canvasSize = new Coordinate(canvas.clientWidth, canvas.clientHeight);
 		return canvasSize;
 	}
+
+	isGameStarted() {
+		return this.gameStarted;
+	}
 }

client/src/main.js

@@ -9,6 +9,8 @@ const socket = io();
 let min = 0;
 let sec = 0;
 let renderObject = new Render();
+const affichage = new Afficher();
+let gameStarted = false;
 
 const canvas = document.querySelector('.gameCanvas');
 const context = canvas.getContext('2d');
@@ -30,13 +32,18 @@ setInterval(function () {
 	});
 }, 1000);
 
+setInterval(() => {
+	socket.emit('start', gameStarted);
+}, 1000 / 16);
+
 document.querySelector('.buttonStart').addEventListener('click', startGame);
 document
 	.querySelector('.credits')
-	.addEventListener('click', Afficher.afficherCredits);
+	.addEventListener('click', affichage.afficherCredits);
 
 function startGame(event) {
-	const canvasSize = Afficher.startGame(event, socket, canvas);
+	gameStarted = true;
+	const canvasSize = affichage.startGame(event, socket, canvas);
 	socket.emit('canvasSize', canvasSize);
 }
 
@@ -72,51 +79,55 @@ let newBonus = [];
 function render() {
 	context.clearRect(0, 0, canvas.width, canvas.height);
 	renderObject.renderBackground(canvas);
-	context.font = '40pt New Super Mario Font U';
-	for (let i = 1; i < avatars.length; i++) {
-		if (avatars[i] != undefined) {
-			renderObject.renderScores(i, avatars[i], context);
-			renderObject.renderVies(avatars, context, i);
+	gameStarted = affichage.isGameStarted();
+	console.log(gameStarted);
+	if (gameStarted) {
+		context.font = '40pt New Super Mario Font U';
+		for (let i = 1; i < avatars.length; i++) {
+			if (avatars[i] != undefined) {
+				renderObject.renderScores(i, avatars[i], context);
+				renderObject.renderVies(avatars, context, i);
+			}
 		}
-	}
 
-	context.fillStyle = 'blue';
+		context.fillStyle = 'blue';
 
-	context.fillText(0 + ':' + min + ':' + sec, canvas.width / 2, 50);
+		context.fillText(0 + ':' + min + ':' + sec, canvas.width / 2, 50);
 
-	for (let avatarId in avatars) {
-		renderObject.renderProjectile(context, avatar, avatars, avatarId);
 		for (let avatarId in avatars) {
 			renderObject.renderProjectile(context, avatar, avatars, avatarId);
+			for (let avatarId in avatars) {
+				renderObject.renderProjectile(context, avatar, avatars, avatarId);
+			}
+			socket.on('bonusArray', data => {
+				newBonus = data;
+			});
+			newBonus.forEach(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 => {
+				renderObject.renderEnnemi(canvas, context, enemi.x, enemi.y, enemi);
+			});
+			socket.on('bonusArray', data => {
+				newBonus = data;
+			});
+			newBonus.forEach(bonus => {
+				renderObject.renderBonus(
+					canvas,
+					context,
+					bonusImages[bonus.choix],
+					bonus.x,
+					bonus.y
+				);
+			});
 		}
-		socket.on('bonusArray', data => {
-			newBonus = data;
-		});
-		newBonus.forEach(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 => {
-			renderObject.renderEnnemi(canvas, context, enemi.x, enemi.y, enemi);
-		});
-		socket.on('bonusArray', data => {
-			newBonus = data;
-		});
-		newBonus.forEach(bonus => {
-			renderObject.renderBonus(
-				canvas,
-				context,
-				bonusImages[bonus.choix],
-				bonus.x,
-				bonus.y
-			);
-		});
 	}
 
 	requestAnimationFrame(render);

client/src/render.js

@@ -7,10 +7,12 @@ export default class Render {
 	imageCoeur;
 	imageMortier;
 	background;
+	imageEnemi3;
 
 	constructor() {
 		this.imageEnemi = new Image();
 		this.imageEnemi2 = new Image();
+		this.imageEnemi3 = new Image();
 		this.imageProjectile = new Image();
 		this.imageCoeur = new Image();
 		this.imageMortier = new Image();
@@ -18,6 +20,7 @@ export default class Render {
 		this.imageProjectile.src = '/images/bill.png';
 		this.imageEnemi.src = '/images/koopa.png';
 		this.imageEnemi2.src = '/images/bob_omb.png';
+		this.imageEnemi3.src = '/images/boo.png';
 		this.imageMortier.src = '/images/mortier.png';
 		this.background.src = '/images/background2.webp';
 	}
@@ -36,6 +39,8 @@ export default class Render {
 			draw(canvas, context, this.imageEnemi, x, y);
 		} else if (enemi.difficulté == 2) {
 			draw(canvas, context, this.imageEnemi2, x, y);
+		} else if (enemi.difficulté == 3) {
+			draw(canvas, context, imageEnemi3, x, y);
 		}
 	}
 

server/index.js

@@ -70,6 +70,7 @@ io.on('connection', socket => {
 		});
 
 		socket.on('start', s => {
+			console.log(s);
 			if (s == true && cpt != 0) {
 				gameStarted = s;
 			} else if (cpt == 0) {