diff --git a/client/public/css/main.css b/client/public/css/main.css
index 2e693980b558b8eb54cc442f6dc16a02348f34ce..82754b6ae13553ec65e25f5b845f7e5a7c6f87dc 100644
--- a/client/public/css/main.css
+++ b/client/public/css/main.css
@@ -160,4 +160,6 @@ section .air.air4{
100%{
background-position-x: -1000px;
}
+}.hidden {
+ display: none;
}
\ No newline at end of file
diff --git a/client/src/afficher.js b/client/src/afficher.js
index 1f94850d15ba651a6f03fb2e063fc5c11e6b8cee..9a221f2ff7d25196270f43b71b0871103522bbc1 100644
--- a/client/src/afficher.js
+++ b/client/src/afficher.js
@@ -6,12 +6,15 @@ export default class Afficher {
constructor() {
this.gameStarted = false;
+ this.afficherMenu = this.afficherMenu.bind(this);
+ this.startGame = this.startGame.bind(this);
}
afficherCredits(event) {
- event.preventDefault();
+ //event.preventDefault();
document.querySelector('.divMain').innerHTML = setHtml.credits();
console.log(document.querySelector('.retourMenu'));
+ console.log(divMain.innerHTML);
document
.querySelector('.retourMenu')
.addEventListener('click', this.afficherMenu);
@@ -27,15 +30,18 @@ export default class Afficher {
document
.querySelector('.credits')
.addEventListener('click', this.afficherCredits);
+ location.reload();
}
- afficherFinDePartie() {
+ afficherFinDePartie(canvas, score1, score2, score3, score4) {
this.gameStarted = false;
canvas.style.display = 'none';
document.querySelector('.animation').style.display = '';
document.querySelector('.divMain').innerHTML = setHtml.finDePartie(
- avatar,
- t
+ score1,
+ score2,
+ score3,
+ score4
);
document
.querySelector('.retourMenu')
diff --git a/client/src/main.js b/client/src/main.js
index 9e6fe2a16226b9b93f3139bd17d608dc3ac69abe..ca2d2e19da5f3b86a119ce267152f1dde69435a0 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -4,6 +4,7 @@ import draw from './draw.js';
import { bonusImages } from './utils.js';
import Render from './render.js';
import Afficher from './afficher.js';
+import setHtml from './setHtml.js';
const socket = io();
let min = 0;
@@ -133,42 +134,57 @@ function render() {
let avatars = [];
+let avatarsScore = {}; // Objet pour stocker les scores associés à chaque avatarId
+
socket.on('dead', avatarId => {
- //affichage.afficherFinDePartie();
- console.log(avatarId);
- avatars[avatarId] = {};
+ // Récupérer le score de l'avatar avant de le supprimer
+ const score = avatars[avatarId] ? avatars[avatarId].score : 0;
+
+ // Stocker le score associé à l'avatarId dans l'objet avatarsScore
+ avatarsScore[avatarId] = score;
+
+ // Supprimer l'avatar du tableau avatars
+ delete avatars[avatarId];
+
+ // Afficher la fin de partie ou effectuer d'autres actions nécessaires
+ // affichage.afficherFinDePartie();
+ console.log(`Avatar ${avatarId} est mort. Score sauvegardé : ${score}`);
});
socket.on('disconnectEvent', id => {
if (avatar.getNom() == id) {
+ // Si l'avatar est celui du joueur local, afficher la fin de partie
affichage.afficherFinDePartie();
}
- avatars[id] = {};
-});
-
-socket.on('newAvatar', data => {
- avatars[data.id] = { x: data.x, y: data.y };
+ // Supprimer l'avatar de avatars
+ delete avatars[id];
});
+// Réception des données des avatars depuis le serveur
socket.on('avatarsData', avatarData => {
avatarData.forEach(data => {
+ // Mise à jour des données de l'avatar dans avatars
if (avatars[data.id] != undefined) {
avatars[data.id].x = data.x;
avatars[data.id].y = data.y;
avatars[data.id].projectiles = data.projectiles;
avatars[data.id].vies = data.vies;
avatars[data.id].score = data.score;
+ avatars[data.id].socketId = data.socketId;
} else {
+ // Création d'un nouvel avatar dans avatars si celui-ci n'existe pas encore
avatars[data.id] = {
x: data.x,
y: data.y,
projectiles: data.projectiles,
vies: data.vies,
score: data.score,
+ socketId: data.socketId,
};
}
});
});
+
const keysPressed = {};
document.addEventListener('keydown', event => {
@@ -198,3 +214,23 @@ document.addEventListener('keyup', event => {
event.preventDefault();
});
+
+let endGame = false;
+socket.on('endGame', () => {
+ console.log(
+ avatarsScore[1],
+ avatarsScore[2],
+ avatarsScore[3],
+ avatarsScore[4]
+ );
+ if (!endGame) {
+ affichage.afficherFinDePartie(
+ canvas,
+ avatarsScore[1],
+ avatarsScore[2],
+ avatarsScore[3],
+ avatarsScore[4]
+ );
+ }
+ endGame = true;
+});
diff --git a/client/src/setHtml.js b/client/src/setHtml.js
index a7e8dc81ed168f097bdb92ca409276aecdd8e9d2..728702294e138b16ec09b3c890ceefa4ea7d239f 100644
--- a/client/src/setHtml.js
+++ b/client/src/setHtml.js
@@ -8,13 +8,25 @@ export default class setHtml {
<button class="retourMenu">Retour au menu</button>`;
}
- static finDePartie(avatar, t) {
- return `
- <h2> GAME OVER </h2>
- <h3>score : ${avatar.getScore()}</h3>
- <h3>temps : ${t.getHrs()} : ${t.getMin()} : ${t.getSec()}</h3>
- <button class="retourMenu">Retour au menu</button>
- `;
+ static finDePartie(score1, score2, score3, score4) {
+ let scoreHTML = `<h2> GAME OVER </h2>`;
+
+ if (score1 !== undefined) {
+ scoreHTML += `<h3>score joueur1 : ${score1}</h3>`;
+ }
+ if (score2 !== undefined) {
+ scoreHTML += `<h3>score joueur2 : ${score2}</h3>`;
+ }
+ if (score3 !== undefined) {
+ scoreHTML += `<h3>score joueur3 : ${score3}</h3>`;
+ }
+ if (score4 !== undefined) {
+ scoreHTML += `<h3>score joueur4 : ${score4}</h3>`;
+ }
+
+ scoreHTML += `<button class="retourMenu">Retour au menu</button>`;
+
+ return scoreHTML;
}
static vide() {
diff --git a/server/index.js b/server/index.js
index 728bf7a43a6b1a65c1bb03bb6b79ad764806ec0e..368c662ca3cd3852dfe23f019b20b027bdadab4b 100644
--- a/server/index.js
+++ b/server/index.js
@@ -50,9 +50,12 @@ let canShoot = true;
let LVL2start = false;
let LVL3start = false;
+let firstAvatar = false;
+
io.on('connection', socket => {
cpt++;
if (cpt <= 4) {
+ firstAvatar = true;
const avatar = new Avatar(`${socket.id}`, cpt);
io.emit('newAvatar', { id: cpt, x: avatar.getX(), y: avatar.getY() });
avatars.push(avatar);
@@ -157,81 +160,93 @@ 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 => {
+ let areAvatarsActive = avatars.some(avatar => !avatar.spectateur);
+
+ if (firstAvatar && areAvatarsActive) {
+ 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) {
- //avatar.initAvatar();
- avatar.setSpectateur();
- io.emit('dead', avatar.id);
- //TODO : afficher écran fin de partie de l'avatar concerné
- }
+ 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) {
+ avatar.setSpectateur();
+ io.emit('dead', avatar.id);
}
}
- });
- });
- avatar.deplacer();
- avatar.projectiles.forEach(projectile => projectile.deplacer());
- if (!avatar.spectateur) {
- avatarData.push({
- id: avatar.id,
- x: avatar.getX(),
- y: avatar.getY(),
- projectiles: avatar.projectiles,
- vies: avatar.getVies(),
- score: avatar.getScore(),
- });
- }
- 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());
+ if (enemi.getVies() < 0) {
+ avatar.incrementScore(5);
+ enemis.splice(enemis.indexOf(enemi), 1);
}
- bonusArray.splice(bonusArray.indexOf(bonus), 1);
- }
- if (bonus.estExpire(t.getTotalTime())) {
- bonusArray.splice(bonusArray.indexOf(bonus), 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());
+ if (!avatar.spectateur) {
+ avatarData.push({
+ id: avatar.id,
+ x: avatar.getX(),
+ y: avatar.getY(),
+ projectiles: avatar.projectiles,
+ vies: avatar.getVies(),
+ score: avatar.getScore(),
+ socketId: avatar.nom,
+ });
}
+ 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);
+ }
+ if (bonus.estExpire(t.getTotalTime())) {
+ bonusArray.splice(bonusArray.indexOf(bonus), 1);
+ }
+ });
});
- });
- io.emit('avatarsData', avatarData);
+ io.emit('avatarsData', avatarData);
+ } else {
+ gameStarted = false;
+ cpt = 0;
+ t = new timer();
+ avatars.length = 0; // Réinitialiser le tableau d'avatars
+ io.emit('endGame', true);
+ }
}, 1000 / 60);