From 52905c76a30e89ed3dd27e5b311d96aa3ae57c33 Mon Sep 17 00:00:00 2001 From: Baptiste Date: Wed, 6 Dec 2023 14:02:35 +0100 Subject: [PATCH] leaderboard --- game.html | 1 + js/class.js | 3 +++ js/game.js | 10 +++++--- js/leaderboard.js | 65 +++++++++++++++++++++++++++++++++++++++++++++++ js/render.js | 6 +++-- 5 files changed, 80 insertions(+), 5 deletions(-) diff --git a/game.html b/game.html index 6934c2a..cc13805 100644 --- a/game.html +++ b/game.html @@ -1,3 +1,4 @@ + diff --git a/js/class.js b/js/class.js index 5f1b4ab..db1d618 100644 --- a/js/class.js +++ b/js/class.js @@ -4,6 +4,7 @@ const playerSize = 50.; const playerSpeed=.2; const bulletSpeed=playerSpeed*2; const halfSqrtTwo=0.70710678118; + class Player { constructor (id,x,y,name, dir) @@ -24,6 +25,8 @@ class Player //8=North-West this.ammo=10; this.health=10; + this.kill=0; + this.death=0; } takeDamage(amount) diff --git a/js/game.js b/js/game.js index 9390237..88200b4 100644 --- a/js/game.js +++ b/js/game.js @@ -10,6 +10,7 @@ function CookiePseudo() { } Renderer = new Render("canvas", "./assets/map/map7_recadr.png"); +LB = new LeaderBoard("canvas"); let Net = new Network("ws://129.151.227.50:8080?name="+CookiePseudo(), Renderer); //let ClientKeyboard = new Keyboard() @@ -122,6 +123,7 @@ function game() { players.forEach((p) => { Renderer.AddPlayer(p) }); + LB.ReloadAff(players, player); } } else @@ -131,11 +133,13 @@ function game() { remPlayers(); addBullets(); player.update(squares, circles, dt); - for (var i = players.length - 1; i >= 0; i--) { - players[i].update(squares, circles, dt); - } + + players.forEach((p) => { + p.update(squares, circles, dt); + }); Renderer.ReloadAff(); updateBullets(dt); + LB.ReloadAff(players, player); } let newTime = new Date(); diff --git a/js/leaderboard.js b/js/leaderboard.js index e69de29..f8e3816 100644 --- a/js/leaderboard.js +++ b/js/leaderboard.js @@ -0,0 +1,65 @@ +class LeaderBoard { + constructor(id) { + this.canvas = document.getElementById(id); + this.ctx = this.canvas.getContext("2d"); + this.nbjoueur=0 + } + + ReloadAff(players, player) { + this.px=10 + this.py=10 + this.players=[] + players.forEach((p) => { + if(p != null) { + this.players.push(p) + } + }) + this.players.push(player); + + // Dessiner le tableau du leaderboard + this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; // Couleur de fond du tableau + this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+this.nbjoueur*20); // Position et dimensions du tableau + this.nbjoueur=0 + // Dessiner le texte du leaderboard + this.ctx.font = '20px Arial'; + this.ctx.fillStyle = '#000000'; + this.ctx.fillText('Leaderboard', this.px+80, this.py+30); + + // Dessiner les lignes du tableau + this.ctx.strokeStyle = '#000000'; + this.ctx.lineWidth = 2; + this.ctx.beginPath(); + this.ctx.moveTo(this.px, this.py+50); + this.ctx.lineTo(this.px+250, this.py+50); + this.ctx.moveTo(this.px, this.py+100); + this.ctx.lineTo(this.px+250, this.py+100); + this.ctx.stroke(); + + // Dessiner les données du leaderboard (exemple) + this.ctx.fillStyle = '#000000'; + this.ctx.font = '15px Arial'; + this.ctx.fillText('#', this.px+20, this.py+80); + this.ctx.fillText('Username', this.px+50, this.py+80); + this.ctx.fillText('K/D', this.px+180, this.py+80); + this.ctx.font = '10px Arial'; + + this.players.forEach((p) => { + if(p != null) { + this.ctx.fillText('1', this.px+20, this.py+120+20*this.nbjoueur); + this.ctx.fillText(p.name, this.px+50, this.py+120+20*this.nbjoueur); + this.ctx.fillText('10/20', this.px+180, this.py+120+20*this.nbjoueur); + + this.nbjoueur++ + } + }); + + /*this.ctx.fillText('1', this.px+20, this.py+120); + this.ctx.fillText('Player1', this.px+50, this.py+120); + this.ctx.fillText('10/20', this.px+180, this.py+120); + + this.ctx.fillText('2', this.px+20, this.py+120+20); + this.ctx.fillText('Player2', this.px+50, this.py+120+20); + this.ctx.fillText('10/2', this.px+180, this.py+120+20); + */ + } +} \ No newline at end of file diff --git a/js/render.js b/js/render.js index ddbea68..a981f3a 100644 --- a/js/render.js +++ b/js/render.js @@ -22,9 +22,11 @@ class Render { } remBullet(bullet) { - for(let i=0;i