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
Branches
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{
100%{
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 {
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')
......
client/src/main.js
+ 44
− 8
View file @ 00c72800
......@@ -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;
});
client/src/setHtml.js
+ 19
− 7
View file @ 00c72800
......@@ -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() {
......
server/index.js
+ 83
− 68
View file @ 00c72800
......@@ -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);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment