diff --git a/client/src/afficher.js b/client/src/afficher.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9b1e7a25b44cd4a7db424d950b08ffe6d9a9ca3
--- /dev/null
+++ b/client/src/afficher.js
@@ -0,0 +1,48 @@
+import setHtml from './setHtml.js';
+import { Coordinate } from './Coordinate.js';
+
+export default class Afficher {
+ static afficherCredits(event) {
+ event.preventDefault();
+ document.querySelector('.divMain').innerHTML = setHtml.credits();
+ console.log(document.querySelector('.retourMenu'));
+ document
+ .querySelector('.retourMenu')
+ .addEventListener('click', Afficher.afficherMenu);
+ }
+
+ static afficherMenu(event) {
+ event.preventDefault();
+ console.log('afficherMenu');
+ document.querySelector('.divMain').innerHTML = setHtml.menu();
+ document
+ .querySelector('.buttonStart')
+ .addEventListener('click', Afficher.startGame);
+ document
+ .querySelector('.credits')
+ .addEventListener('click', Afficher.afficherCredits);
+ }
+
+ static afficherFinDePartie() {
+ canvas.style.display = 'none';
+ document.querySelector('.animation').style.display = '';
+ document.querySelector('.divMain').innerHTML = setHtml.finDePartie(
+ avatar,
+ t
+ );
+ document
+ .querySelector('.retourMenu')
+ .addEventListener('click', Afficher.afficherMenu);
+ return false;
+ }
+
+ static startGame(event) {
+ event.preventDefault();
+ const canvas = document.querySelector('.gameCanvas');
+ canvas.style.display = '';
+ document.querySelector('.divMain').innerHTML = setHtml.vide();
+ document.querySelector('.animation').style.display = 'none';
+ const canvasSize = new Coordinate(canvas.clientWidth, canvas.clientHeight);
+ return canvasSize;
+ }
+}
diff --git a/client/src/avatar.js b/client/src/avatar.js
index 3ed74c8b995df3fa3e3ebf4ce7987c0696d4c983..bcaa9e7ad71eea9178df5366a651156caee41442 100644
--- a/client/src/avatar.js
+++ b/client/src/avatar.js
@@ -65,10 +65,6 @@ export class Avatar extends Entite {
return this.vies;
}
- getScore() {
- return this.score;
- }
-
getNom() {
return this.nom;
}
diff --git a/client/src/main.js b/client/src/main.js
index 590aa6da6241bf43890fe6ac42f82788d14a4da2..a088235db4223566643c97c8e6bf7df86a7ca2af 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,39 +1,25 @@
import { Avatar } from './avatar.js';
import { io } from 'socket.io-client';
-import setHtml from './setHtml.js';
import draw from './draw.js';
-import { Coordinate } from './Coordinate.js';
-import { bonusImages, colors } from './utils.js';
+import { bonusImages } from './utils.js';
import Render from './render.js';
+import Afficher from './afficher.js';
const socket = io();
let min = 0;
let sec = 0;
+let renderObject = new Render();
const canvas = document.querySelector('.gameCanvas');
const context = canvas.getContext('2d');
const avatar = new Avatar('julien', 1);
-const imageMortier = new Image();
-const imageProjectile = new Image();
-const imageEnemi = new Image();
-const imageEnemi2 = new Image();
-const background = new Image();
-const imageCoeur = new Image();
-imageMortier.src = '/images/mortier.png';
-imageProjectile.src = '/images/bill.png';
-imageEnemi.src = '/images/koopa.png';
-imageEnemi2.src = '/images/bob_omb.png';
-background.src = '/images/background2.webp';
-imageCoeur.src = '/images/heart1.webp';
-let gameStarted = false;
-
-imageMortier.addEventListener('load', () => {
- avatar.setImageCanvas(imageMortier, canvas);
+renderObject.imageMortier.addEventListener('load', () => {
+ avatar.setImageCanvas(renderObject.imageMortier, canvas);
requestAnimationFrame(render);
});
-imageEnemi.addEventListener('load', () => {
+renderObject.imageEnemi.addEventListener('load', () => {
requestAnimationFrame(render);
});
@@ -45,45 +31,15 @@ setInterval(function () {
}, 1000);
document.querySelector('.buttonStart').addEventListener('click', startGame);
-document.querySelector('.credits').addEventListener('click', afficherCredits);
-
-function afficherCredits(event) {
- event.preventDefault();
- document.querySelector('.divMain').innerHTML = setHtml.credits();
- const retour = document.querySelector('.retourMenu');
- retour.addEventListener('click', afficherMenu);
-}
-
-function afficherMenu(event) {
- event.preventDefault();
- document.querySelector('.divMain').innerHTML = setHtml.menu();
- document.querySelector('.buttonStart').addEventListener('click', startGame);
- document.querySelector('.credits').addEventListener('click', afficherCredits);
-}
-
-function afficherFinDePartie() {
- gameStarted = false;
- canvas.style.display = 'none';
- document.querySelector('.animation').style.display = '';
- document.querySelector('.divMain').innerHTML = setHtml.finDePartie(avatar, t);
- document.querySelector('.retourMenu').addEventListener('click', afficherMenu);
-}
+document
+ .querySelector('.credits')
+ .addEventListener('click', Afficher.afficherCredits);
function startGame(event) {
- gameStarted = true;
- socket.emit('start', gameStarted);
- event.preventDefault();
- canvas.style.display = '';
- document.querySelector('.divMain').innerHTML = setHtml.vide();
- document.querySelector('.animation').style.display = 'none';
- const canvasSize = new Coordinate(canvas.clientWidth, canvas.clientHeight);
+ const canvasSize = Afficher.startGame(event, socket, canvas);
socket.emit('canvasSize', canvasSize);
}
-setInterval(() => {
- socket.emit('start', gameStarted);
-}, 1000 / 16);
-
const canvasResizeObserver = new ResizeObserver(() => resampleCanvas());
canvasResizeObserver.observe(canvas);
@@ -115,26 +71,12 @@ let newBonus = [];
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
- context.drawImage(background, 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) {
- context.fillStyle = colors[i - 1];
- const x = 10 + i * 100;
- if (avatars[i].score != undefined) {
- context.fillText(avatars[i].score, x, 50);
- }
- imageCoeur.src = `/images/heart${i}.webp`;
- console.log(imageCoeur.src);
- for (let j = 0; j < avatars[i].vies; j++) {
- context.drawImage(
- imageCoeur,
- avatars[i].x + (avatars[i].vies - j) * 20 - 15,
- avatars[i].y + imageMortier.height,
- 20,
- 20
- );
- }
+ renderObject.renderScores(i, avatars[i], context);
+ renderObject.renderVies(avatars, context, i);
}
}
@@ -143,21 +85,9 @@ function render() {
context.fillText(0 + ':' + min + ':' + sec, canvas.width / 2, 50);
for (let avatarId in avatars) {
- Render.renderProjectile(
- context,
- avatar,
- avatars,
- avatarId,
- imageProjectile
- );
+ renderObject.renderProjectile(context, avatar, avatars, avatarId);
for (let avatarId in avatars) {
- Render.renderProjectile(
- context,
- avatar,
- avatars,
- avatarId,
- imageProjectile
- );
+ renderObject.renderProjectile(context, avatar, avatars, avatarId);
}
socket.on('bonusArray', data => {
newBonus = data;
@@ -173,21 +103,13 @@ function render() {
newEnemis = data;
});
newEnemis.forEach(enemi => {
- Render.renderEnnemi(
- canvas,
- context,
- imageEnemi,
- imageEnemi2,
- enemi.x,
- enemi.y,
- enemi
- );
+ renderObject.renderEnnemi(canvas, context, enemi.x, enemi.y, enemi);
});
socket.on('bonusArray', data => {
newBonus = data;
});
newBonus.forEach(bonus => {
- Render.renderBonus(
+ renderObject.renderBonus(
canvas,
context,
bonusImages[bonus.choix],
diff --git a/client/src/render.js b/client/src/render.js
index 03c4bb2eecfb009f3981cc6ed92f4abb8cbc7aec..eb984ac02c0c7b12cd543af68d7b4fcf4a925d61 100644
--- a/client/src/render.js
+++ b/client/src/render.js
@@ -1,27 +1,76 @@
import draw from './draw.js';
+import { colors } from './utils.js';
export default class Render {
- static renderProjectile(context, avatar, avatars, avatarId, imageProjectile) {
+ imageEnemi;
+ imageEnemi2;
+ imageProjectile;
+ imageCoeur;
+ imageMortier;
+ background;
+
+ constructor() {
+ this.imageEnemi = new Image();
+ this.imageEnemi2 = new Image();
+ this.imageProjectile = new Image();
+ this.imageCoeur = new Image();
+ this.imageMortier = new Image();
+ this.background = new Image();
+ this.imageProjectile.src = '/images/bill.png';
+ this.imageEnemi.src = '/images/koopa.png';
+ this.imageEnemi2.src = '/images/bob_omb.png';
+ this.imageMortier.src = '/images/mortier.png';
+ this.background.src = '/images/background2.webp';
+ }
+
+ renderProjectile(context, avatar, avatars, avatarId) {
context.drawImage(avatar.image, avatars[avatarId].x, avatars[avatarId].y);
if (avatars[avatarId].projectiles != undefined) {
avatars[avatarId].projectiles.forEach(projectile => {
- context.drawImage(imageProjectile, projectile.x, projectile.y);
+ context.drawImage(this.imageProjectile, projectile.x, projectile.y);
});
}
}
- static renderEnnemi(canvas, context, imageEnemi, imageEnemi2, x, y, enemi) {
+ renderEnnemi(canvas, context, x, y, enemi) {
if (enemi.difficulté == 1) {
- draw(canvas, context, imageEnemi, x, y);
+ draw(canvas, context, this.imageEnemi, x, y);
} else if (enemi.difficulté == 2) {
- draw(canvas, context, imageEnemi2, x, y);
+ draw(canvas, context, this.imageEnemi2, x, y);
}
}
- static renderBonus(canvas, context, imgsrc, x, y) {
+ renderBonus(canvas, context, imgsrc, x, y) {
let img = new Image();
img.src = imgsrc;
img.width = 75;
img.height = 75;
draw(canvas, context, img, x, y);
}
+
+ renderScores(i, avatar, context) {
+ context.fillStyle = colors[i - 1];
+ const x = 10 + i * 100;
+ if (avatar.score != undefined) {
+ context.fillText(avatar.score, x, 50);
+ }
+ }
+
+ renderVies(avatars, context, i) {
+ this.imageCoeur.src = `/images/heart${i}.webp`;
+ for (let j = 0; j < avatars[i].vies; j++) {
+ context.drawImage(
+ this.imageCoeur,
+ avatars[i].x + (avatars[i].vies - j) * 20 - 15,
+ avatars[i].y + this.imageMortier.height,
+ 20,
+ 20
+ );
+ }
+ }
+
+ renderBackground(canvas) {
+ canvas
+ .getContext('2d')
+ .drawImage(this.background, 0, 0, canvas.width, canvas.height);
+ }
}