diff --git a/client/src/afficher.js b/client/src/afficher.js
index a9b1e7a25b44cd4a7db424d950b08ffe6d9a9ca3..1f94850d15ba651a6f03fb2e063fc5c11e6b8cee 100644
--- a/client/src/afficher.js
+++ b/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;
+ }
}
diff --git a/client/src/main.js b/client/src/main.js
index a088235db4223566643c97c8e6bf7df86a7ca2af..48b7ddc033836f6c5f4c498e94a392873d26b30e 100644
--- a/client/src/main.js
+++ b/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);
diff --git a/client/src/render.js b/client/src/render.js
index eb984ac02c0c7b12cd543af68d7b4fcf4a925d61..6364ba3a242567453e80ae2f8cc9ed5b1869c943 100644
--- a/client/src/render.js
+++ b/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);
}
}
diff --git a/server/index.js b/server/index.js
index 9926c8807ca782dbc8c18665d33e854952c61b8c..20ba3aff9c3396f330f968eeff6df7c6cbf5c304 100644
--- a/server/index.js
+++ b/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) {