Skip to content
Snippets Groups Projects
Commit 00c72800 authored by Julien Bouin's avatar Julien Bouin
Browse files

affichage des scores à la fin de la partie

parent 6aa6a913
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client/public/css/main.css
+ 2
− 0
View file @ 00c72800
...@@ -160,4 +160,6 @@ section .air.air4{ ...@@ -160,4 +160,6 @@ section .air.air4{
100%{ 100%{
background-position-x: -1000px; background-position-x: -1000px;
} }
}.hidden {
display: none;
} }
\ No newline at end of file
client/src/afficher.js
+ 10
− 4
View file @ 00c72800
...@@ -6,12 +6,15 @@ export default class Afficher { ...@@ -6,12 +6,15 @@ export default class Afficher {
constructor() { constructor() {
this.gameStarted = false; this.gameStarted = false;
this.afficherMenu = this.afficherMenu.bind(this);
this.startGame = this.startGame.bind(this);
} }
afficherCredits(event) { afficherCredits(event) {
event.preventDefault(); //event.preventDefault();
document.querySelector('.divMain').innerHTML = setHtml.credits(); document.querySelector('.divMain').innerHTML = setHtml.credits();
console.log(document.querySelector('.retourMenu')); console.log(document.querySelector('.retourMenu'));
console.log(divMain.innerHTML);
document document
.querySelector('.retourMenu') .querySelector('.retourMenu')
.addEventListener('click', this.afficherMenu); .addEventListener('click', this.afficherMenu);
...@@ -27,15 +30,18 @@ export default class Afficher { ...@@ -27,15 +30,18 @@ export default class Afficher {
document document
.querySelector('.credits') .querySelector('.credits')
.addEventListener('click', this.afficherCredits); .addEventListener('click', this.afficherCredits);
location.reload();
} }
afficherFinDePartie() { afficherFinDePartie(canvas, score1, score2, score3, score4) {
this.gameStarted = false; this.gameStarted = false;
canvas.style.display = 'none'; canvas.style.display = 'none';
document.querySelector('.animation').style.display = ''; document.querySelector('.animation').style.display = '';
document.querySelector('.divMain').innerHTML = setHtml.finDePartie( document.querySelector('.divMain').innerHTML = setHtml.finDePartie(
avatar, score1,
t score2,
score3,
score4
); );
document document
.querySelector('.retourMenu') .querySelector('.retourMenu')
......
client/src/main.js
+ 44
− 8
View file @ 00c72800
...@@ -4,6 +4,7 @@ import draw from './draw.js'; ...@@ -4,6 +4,7 @@ import draw from './draw.js';
import { bonusImages } from './utils.js'; import { bonusImages } from './utils.js';
import Render from './render.js'; import Render from './render.js';
import Afficher from './afficher.js'; import Afficher from './afficher.js';
import setHtml from './setHtml.js';
const socket = io(); const socket = io();
let min = 0; let min = 0;
...@@ -133,42 +134,57 @@ function render() { ...@@ -133,42 +134,57 @@ function render() {
let avatars = []; let avatars = [];
let avatarsScore = {}; // Objet pour stocker les scores associés à chaque avatarId
socket.on('dead', avatarId => { socket.on('dead', avatarId => {
//affichage.afficherFinDePartie(); // Récupérer le score de l'avatar avant de le supprimer
console.log(avatarId); const score = avatars[avatarId] ? avatars[avatarId].score : 0;
avatars[avatarId] = {};
// 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 => { socket.on('disconnectEvent', id => {
if (avatar.getNom() == id) { if (avatar.getNom() == id) {
// Si l'avatar est celui du joueur local, afficher la fin de partie
affichage.afficherFinDePartie(); affichage.afficherFinDePartie();
} }
avatars[id] = {}; // Supprimer l'avatar de avatars
}); delete avatars[id];
socket.on('newAvatar', data => {
avatars[data.id] = { x: data.x, y: data.y };
}); });
// Réception des données des avatars depuis le serveur
socket.on('avatarsData', avatarData => { socket.on('avatarsData', avatarData => {
avatarData.forEach(data => { avatarData.forEach(data => {
// Mise à jour des données de l'avatar dans avatars
if (avatars[data.id] != undefined) { if (avatars[data.id] != undefined) {
avatars[data.id].x = data.x; avatars[data.id].x = data.x;
avatars[data.id].y = data.y; avatars[data.id].y = data.y;
avatars[data.id].projectiles = data.projectiles; avatars[data.id].projectiles = data.projectiles;
avatars[data.id].vies = data.vies; avatars[data.id].vies = data.vies;
avatars[data.id].score = data.score; avatars[data.id].score = data.score;
avatars[data.id].socketId = data.socketId;
} else { } else {
// Création d'un nouvel avatar dans avatars si celui-ci n'existe pas encore
avatars[data.id] = { avatars[data.id] = {
x: data.x, x: data.x,
y: data.y, y: data.y,
projectiles: data.projectiles, projectiles: data.projectiles,
vies: data.vies, vies: data.vies,
score: data.score, score: data.score,
socketId: data.socketId,
}; };
} }
}); });
}); });
const keysPressed = {}; const keysPressed = {};
document.addEventListener('keydown', event => { document.addEventListener('keydown', event => {
...@@ -198,3 +214,23 @@ document.addEventListener('keyup', event => { ...@@ -198,3 +214,23 @@ document.addEventListener('keyup', event => {
event.preventDefault(); 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;
});
client/src/setHtml.js
+ 19
− 7
View file @ 00c72800
...@@ -8,13 +8,25 @@ export default class setHtml { ...@@ -8,13 +8,25 @@ export default class setHtml {
<button class="retourMenu">Retour au menu</button>`; <button class="retourMenu">Retour au menu</button>`;
} }
static finDePartie(avatar, t) { static finDePartie(score1, score2, score3, score4) {
return ` let scoreHTML = `<h2> GAME OVER </h2>`;
<h2> GAME OVER </h2>
<h3>score : ${avatar.getScore()}</h3> if (score1 !== undefined) {
<h3>temps : ${t.getHrs()} : ${t.getMin()} : ${t.getSec()}</h3> scoreHTML += `<h3>score joueur1 : ${score1}</h3>`;
<button class="retourMenu">Retour au menu</button> }
`; 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() { static vide() {
......
server/index.js
+ 83
− 68
View file @ 00c72800
...@@ -50,9 +50,12 @@ let canShoot = true; ...@@ -50,9 +50,12 @@ let canShoot = true;
let LVL2start = false; let LVL2start = false;
let LVL3start = false; let LVL3start = false;
let firstAvatar = false;
io.on('connection', socket => { io.on('connection', socket => {
cpt++; cpt++;
if (cpt <= 4) { if (cpt <= 4) {
firstAvatar = true;
const avatar = new Avatar(`${socket.id}`, cpt); const avatar = new Avatar(`${socket.id}`, cpt);
io.emit('newAvatar', { id: cpt, x: avatar.getX(), y: avatar.getY() }); io.emit('newAvatar', { id: cpt, x: avatar.getX(), y: avatar.getY() });
avatars.push(avatar); avatars.push(avatar);
...@@ -157,81 +160,93 @@ setInterval(() => { ...@@ -157,81 +160,93 @@ setInterval(() => {
io.emit('enemis', enemis); io.emit('enemis', enemis);
io.emit('bonusArray', bonusArray); io.emit('bonusArray', bonusArray);
let avatarData = []; let areAvatarsActive = avatars.some(avatar => !avatar.spectateur);
avatars.forEach(avatar => {
avatar.canvasSize = canvasSize; if (firstAvatar && areAvatarsActive) {
if ( let avatarData = [];
avatar.getStatut() == 'invincibilite' && avatars.forEach(avatar => {
t.getTotalTime() - avatar.getStatutTime() == 15 avatar.canvasSize = canvasSize;
) {
avatar.setStatut('null');
}
enemis.forEach(enemi => {
if ( if (
enemi.hitbox.colision(avatar.hitbox) && avatar.getStatut() == 'invincibilite' &&
avatar.getStatut() != 'invincibilite' t.getTotalTime() - avatar.getStatutTime() == 15
) { ) {
if (canLostLifeAvatar) { avatar.setStatut('null');
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é
}
} }
if (enemi.getVies() < 0) { enemis.forEach(enemi => {
avatar.incrementScore(5); if (
enemis.splice(enemis.indexOf(enemi), 1); enemi.hitbox.colision(avatar.hitbox) &&
} avatar.getStatut() != 'invincibilite'
enemi.deplacer(); ) {
avatar.colision(enemi.hitbox); if (canLostLifeAvatar) {
avatar.projectiles.forEach(projectile => { avatar.decrementScore(5);
if (projectile.hitbox.colision(enemi.hitbox)) { enemis.splice(enemis.indexOf(enemi), 1);
avatar.projectiles.splice(avatar.projectiles.indexOf(projectile), 1); avatar.perdreVie();
if (canLostLifeEnemi) { canLostLifeAvatar = false;
enemi.perdreVie();
canLostLifeEnemi = false;
setTimeout(function () { setTimeout(function () {
canLostLifeEnemi = true; canLostLifeAvatar = true;
}, 1000 / 60); }, 100);
}
if (avatar.getVies() == 0) {
avatar.setSpectateur();
io.emit('dead', avatar.id);
} }
} }
}); if (enemi.getVies() < 0) {
}); avatar.incrementScore(5);
avatar.deplacer(); enemis.splice(enemis.indexOf(enemi), 1);
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());
} }
bonusArray.splice(bonusArray.indexOf(bonus), 1); enemi.deplacer();
} avatar.colision(enemi.hitbox);
if (bonus.estExpire(t.getTotalTime())) { avatar.projectiles.forEach(projectile => {
bonusArray.splice(bonusArray.indexOf(bonus), 1); 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); }, 1000 / 60);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment