leaderboard
This commit is contained in:
		
							parent
							
								
									57383829de
								
							
						
					
					
						commit
						52905c76a3
					
				
					 5 changed files with 80 additions and 5 deletions
				
			
		|  | @ -1,3 +1,4 @@ | |||
| <!DOCTYPE HTML> | ||||
| <html> | ||||
|     <head> | ||||
|         <script type="text/javascript" src="./js/class.js"></script> | ||||
|  |  | |||
|  | @ -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) | ||||
|  |  | |||
							
								
								
									
										10
									
								
								js/game.js
									
									
									
									
									
								
							
							
						
						
									
										10
									
								
								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(); | ||||
|  |  | |||
|  | @ -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); | ||||
| 		*/ | ||||
| 	} | ||||
| } | ||||
|  | @ -22,9 +22,11 @@ class Render { | |||
| 	} | ||||
| 
 | ||||
| 	remBullet(bullet) { | ||||
| 		for(let i=0;i<this.bullets.length;i++) | ||||
| 			if(bullet==this.bullets[i]) | ||||
| 		for(let i=0;i<this.bullets.length;i++) { | ||||
| 			if(bullet==this.bullets[i]) { | ||||
| 				this.bullets.splice(i,1); | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| 
 | ||||
| 	RemPlayer(id) { | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue