no more crash?
This commit is contained in:
		
							parent
							
								
									b4541b2698
								
							
						
					
					
						commit
						f0817769a4
					
				
					 6 changed files with 69 additions and 187 deletions
				
			
		|  | @ -3,11 +3,12 @@ | ||||||
|     <head> |     <head> | ||||||
|         <script type="text/javascript" src="./js/sound.js"></script> |         <script type="text/javascript" src="./js/sound.js"></script> | ||||||
|         <script type="text/javascript" src="./js/class.js"></script> |         <script type="text/javascript" src="./js/class.js"></script> | ||||||
|         <script type="text/javascript" src="./js/objects.js"></script> |  | ||||||
|         <script type="text/javascript" src="./js/render.js"></script> |         <script type="text/javascript" src="./js/render.js"></script> | ||||||
|         <script type="text/javascript" src="./js/input.js"></script> |         <script type="text/javascript" src="./js/input.js"></script> | ||||||
|         <script type="text/javascript" src="./js/network.js"></script> |         <script type="text/javascript" src="./js/network.js"></script> | ||||||
|         <script type="text/javascript" src="./js/leaderboard.js"></script> |         <script type="text/javascript" src="./js/leaderboard.js"></script> | ||||||
|  |         <script type="text/javascript" src="./js/global.js" defer></script> | ||||||
|  |         <script type="text/javascript" src="./js/objects.js" defer></script> | ||||||
|         <script type="text/javascript" src="./js/game.js" defer></script> |         <script type="text/javascript" src="./js/game.js" defer></script> | ||||||
|     </head> |     </head> | ||||||
|     <body> |     <body> | ||||||
|  |  | ||||||
|  | @ -12,9 +12,10 @@ class Player | ||||||
|         this.name=name; |         this.name=name; | ||||||
|         this.x=x; |         this.x=x; | ||||||
|         this.y=y; |         this.y=y; | ||||||
|  |         //this.z=z;//correspond to the map. Ex: 0=>main; 1=>arena
 | ||||||
|         this.id=id; |         this.id=id; | ||||||
|         this.visibleDir=1; |         this.visibleDir=1; | ||||||
|         this.dir=dir;//0=standStill
 |         this.dir=dir;//0=stand Still
 | ||||||
|                      //1=North
 |                      //1=North
 | ||||||
|                      //2=North-East
 |                      //2=North-East
 | ||||||
|                      //3=East
 |                      //3=East
 | ||||||
|  | @ -69,7 +70,7 @@ class Player | ||||||
|         this.y += dy*dt; |         this.y += dy*dt; | ||||||
| 
 | 
 | ||||||
|         squares.forEach(square => { |         squares.forEach(square => { | ||||||
|             if(square.collide(this)) |             if(square.collide(this.x,this.y)) | ||||||
|             { |             { | ||||||
|                 this.x-=dx*dt; |                 this.x-=dx*dt; | ||||||
|                 this.y-=dy*dt; |                 this.y-=dy*dt; | ||||||
|  | @ -79,7 +80,7 @@ class Player | ||||||
|         }); |         }); | ||||||
|          |          | ||||||
|         circles.forEach(circle => { |         circles.forEach(circle => { | ||||||
|             if(circle.collide(this)) |             if(circle.collide(this.x,this.y)) | ||||||
|             { |             { | ||||||
|                 this.x-=dx*dt; |                 this.x-=dx*dt; | ||||||
|                 this.y-=dy*dt; |                 this.y-=dy*dt; | ||||||
|  |  | ||||||
|  | @ -1,151 +1,33 @@ | ||||||
| let cars = [new Car(Renderer, 0, 0, sound), | let cars = [new Car(renderer, 0, 0), | ||||||
| 		new Car(Renderer, 0, 7, sound), | 		new Car(renderer, 0, 7), | ||||||
| 		new Car(Renderer, 1, 7, sound), | 		new Car(renderer, 1, 7), | ||||||
| 		new Car(Renderer, 1, 13, sound), | 		new Car(renderer, 1, 13), | ||||||
| 		new Car(Renderer, 1, 14, sound), | 		new Car(renderer, 1, 14), | ||||||
| 		new Car(Renderer, 0, 15, sound)]; | 		new Car(renderer, 0, 15)]; | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| 
 | let dt = 1.; | ||||||
| 		let dt = 1; |  | ||||||
| 
 |  | ||||||
| function update() |  | ||||||
| { |  | ||||||
| 	if(player.y>470 && player.y<480 && player.x>237 && player.x<310) { |  | ||||||
| 		player.x=2510 |  | ||||||
| 		player.y=2714 |  | ||||||
| 	} else if (player.x>2588 && player.x<2687 && player.y>2129 && player.y<2180) { |  | ||||||
| 		player.x=270 |  | ||||||
| 		player.y=250 |  | ||||||
| 	} |  | ||||||
| 	let playerToUpdate = Net.getPlayersToUpdate(); |  | ||||||
| 	for (let i = 0;i<playerToUpdate.length;i++) |  | ||||||
| 	{ |  | ||||||
| 		if(playerToUpdate[i].id==player.id) { |  | ||||||
| 			player.x=playerToUpdate[i].x; |  | ||||||
| 			player.y=playerToUpdate[i].y; |  | ||||||
| 			player.dir=playerToUpdate[i].dir; |  | ||||||
| 			player.visibleDir=playerToUpdate[i].visibleDir; |  | ||||||
| 		} else { |  | ||||||
| 			for (let j = 0;j<players.length;j++) |  | ||||||
| 			{ |  | ||||||
| 				if(players[j].id==playerToUpdate[i].id) |  | ||||||
| 				{	 |  | ||||||
| 					 |  | ||||||
| 					players[j].x=playerToUpdate[i].x; |  | ||||||
| 					players[j].y=playerToUpdate[i].y; |  | ||||||
| 					players[j].dir=playerToUpdate[i].dir; |  | ||||||
| 					players[j].visibleDir=playerToUpdate[i].visibleDir; |  | ||||||
| 					break; |  | ||||||
| 				} |  | ||||||
| 			} |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| function addPlayers() |  | ||||||
| { |  | ||||||
| 	let playersToAdd = Net.getPlayersToAdd(); |  | ||||||
| 	playersToAdd.forEach((p) => { |  | ||||||
| 		console.log("New player: ",p.id); |  | ||||||
| 		players.push(p); |  | ||||||
| 		Renderer.AddPlayer(p); |  | ||||||
| 	}); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| function remPlayers() |  | ||||||
| { |  | ||||||
| 	let playerToRemove = Net.getPlayersToRemove(); |  | ||||||
| 	for(let i=0;i<playerToRemove.length;i++) |  | ||||||
| 	{ |  | ||||||
| 		let id = playerToRemove[i]; |  | ||||||
| 		Renderer.RemPlayer(id); |  | ||||||
| 		console.log("deleting Player ",id); |  | ||||||
| 		for(let i = 0;i<players.length;i++) |  | ||||||
| 		{ |  | ||||||
| 			if (players[i].id==id) |  | ||||||
| 			{ |  | ||||||
| 				players.splice(i,1); |  | ||||||
| 				break; |  | ||||||
| 			} |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| function addBullets() |  | ||||||
| { |  | ||||||
| 	let bulletsToAdd = Net.getBulletsToAdd(); |  | ||||||
| 	bulletsToAdd.forEach((b) => { |  | ||||||
| 		bullets.push(b); |  | ||||||
| 		Renderer.addBullet(b); |  | ||||||
| 	}); |  | ||||||
| 	 |  | ||||||
| } |  | ||||||
| 
 | 
 | ||||||
| function updateBullets(dt) | function updateBullets(dt) | ||||||
| { | { | ||||||
| 	for(let i = bullets.length-1;i>=0;i--) | 	for(let i = bullets.length-1;i>=0;i--) | ||||||
| 	{ | 	{ | ||||||
| 		bullets[i].update(dt); | 		bullets[i].update(dt); | ||||||
| 		bullets[i].checkCollisions(player,squares,circles,Net); | 		bullets[i].checkCollisions(squares,circles); | ||||||
| 		if(bullets[i].deleted) | 		if(bullets[i].deleted) | ||||||
| 		{ | 		{ | ||||||
| 			Renderer.remBullet(bullets[i]); |  | ||||||
| 			bullets.splice(i,1); | 			bullets.splice(i,1); | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function updateKills() |  | ||||||
| { |  | ||||||
| 	let deaths = Net.getDeathToAdd(); |  | ||||||
| 	deaths.forEach((object) => { |  | ||||||
| 		let dead = object.id; |  | ||||||
| 		let killer = object.killerId; |  | ||||||
| 		if(player.id==killer) |  | ||||||
| 			player.kill++; |  | ||||||
| 		for(let i=0;i<players.length;i++) |  | ||||||
| 		{ |  | ||||||
| 			if(players[i].id==dead) |  | ||||||
| 				players[i].death++; |  | ||||||
| 			if(players[i].id==killer) |  | ||||||
| 				players[i].kill++; |  | ||||||
| 		} |  | ||||||
| 	}); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| let currentTime = new Date(); | let currentTime = new Date(); | ||||||
| function game() { | function game() { | ||||||
| 	if(playerId==null) | 	if(net.playerId==null) | ||||||
| 	{ | 		return; | ||||||
| 		if (Net.playerId!=null) |  | ||||||
| 		{ |  | ||||||
| 			playerId=Net.playerId; |  | ||||||
| 			player=Net.clientPlayer; |  | ||||||
| 			players=Net.getPlayersToAdd(); |  | ||||||
| 			Renderer.AddPlayer(player) |  | ||||||
| 			Renderer.SetPlayerId(player.id) |  | ||||||
| 
 | 
 | ||||||
| 			console.log("Connected as id ",playerId); |  | ||||||
| 			Inp.player=player; |  | ||||||
| 			Inp.bullets=bullets; |  | ||||||
| 			 |  | ||||||
| 			players.forEach((p) => { |  | ||||||
| 				Renderer.AddPlayer(p) |  | ||||||
| 			}); |  | ||||||
| 			players.push(new Player(-1,-50,-50,"VOITURE",0,null)); |  | ||||||
| 			LB.ReloadAff(players, player); |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| 	else |  | ||||||
| 	{ |  | ||||||
| 		update(); |  | ||||||
| 		addPlayers(); |  | ||||||
| 		remPlayers(); |  | ||||||
| 		addBullets(); |  | ||||||
| 		updateKills(); |  | ||||||
| 	player.update(squares, circles, dt); | 	player.update(squares, circles, dt); | ||||||
| 		for (var i = players.length - 1; i >= 0; i--) { | 	for (let i = 0;i<players.length; i++) { | ||||||
| 		players[i].update(squares, circles, dt); | 		players[i].update(squares, circles, dt); | ||||||
| 	} | 	} | ||||||
| 	Renderer.ReloadAff(); | 	Renderer.ReloadAff(); | ||||||
|  | @ -153,22 +35,21 @@ function game() { | ||||||
| 		c.Update(); | 		c.Update(); | ||||||
| 		if(c.collide(player.x,player.y)) | 		if(c.collide(player.x,player.y)) | ||||||
| 		{ | 		{ | ||||||
| 				Net.died(player.id,-1); | 			net.died(player.id,-1); | ||||||
| 			player.x=-50; | 			player.x=-50; | ||||||
| 			player.deaths++; | 			player.deaths++; | ||||||
| 			player.health=10; | 			player.health=10; | ||||||
| 		} | 		} | ||||||
| 	}); | 	}); | ||||||
| 	updateBullets(dt); | 	updateBullets(dt); | ||||||
| 		LB.ReloadAff(players, player); | 	LB.ReloadAff(); | ||||||
| 	} |  | ||||||
| 	 | 	 | ||||||
| 	let newTime = new Date(); | 	let newTime = new Date(); | ||||||
| 	dt=newTime - currentTime; | 	dt=newTime - currentTime; | ||||||
| 	currentTime=newTime; | 	currentTime=newTime; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| Net.connect(); //connect to server, create a player, and retrieve all players info
 | net.connect(); //connect to server, create a player, and retrieve all players info
 | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| setInterval(game); | setInterval(game); | ||||||
|  | @ -1,4 +1,4 @@ | ||||||
| function CookiePseudo() { | function CookiePseudo() {//Code from OpenClassroom
 | ||||||
|     nom = "pseudo="; |     nom = "pseudo="; | ||||||
|     var liste = document.cookie.split (';'); |     var liste = document.cookie.split (';'); | ||||||
|     for (var i = 0; i < liste.length; i++) { |     for (var i = 0; i < liste.length; i++) { | ||||||
|  | @ -19,6 +19,8 @@ let net = new Network("ws://129.151.227.50:8080?name="+CookiePseudo()); | ||||||
| let inp = new Input("canvas"); | let inp = new Input("canvas"); | ||||||
| let date = new Date(); | let date = new Date(); | ||||||
| let bullets = []; | let bullets = []; | ||||||
|  | let circles = []; | ||||||
|  | let squares = []; | ||||||
| 
 | 
 | ||||||
| function updatePlayer(data) | function updatePlayer(data) | ||||||
| { | { | ||||||
|  |  | ||||||
|  | @ -11,13 +11,12 @@ map2.src = "./assets/map_secondaire.png"; | ||||||
| 
 | 
 | ||||||
| class Render { | class Render { | ||||||
| 	constructor(idCanvas) { | 	constructor(idCanvas) { | ||||||
| 		this.canvas = document.getElementById(idCanvas); | 		let canvas = document.getElementById(idCanvas); | ||||||
| 		this.ctx = canvas.getContext("2d"); | 		this.ctx = canvas.getContext("2d"); | ||||||
| 		this.ReloadAff(); | 		//this.ReloadAff();
 | ||||||
| 		this.map=0 |  | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	RenderPlayer(player) { | 	RenderPlayer(player,client) { | ||||||
| 		let x=player.x | 		let x=player.x | ||||||
| 		let y=player.y | 		let y=player.y | ||||||
| 		if(x>=2000 && y>=2000 && this.map==1) { | 		if(x>=2000 && y>=2000 && this.map==1) { | ||||||
|  | @ -34,8 +33,8 @@ class Render { | ||||||
| 		    this.ctx.restore(); | 		    this.ctx.restore(); | ||||||
| 			this.ctx.fillStyle = 'white'; | 			this.ctx.fillStyle = 'white'; | ||||||
| 	        this.ctx.font="10pt arial"; | 	        this.ctx.font="10pt arial"; | ||||||
| 	        this.ctx.fillText(player.name,x-name.length*10/3,y-playerSize/1.8); | 	        this.ctx.fillText(player.name,x-player.name.length*10/3,y-playerSize/1.8); | ||||||
| 	        if(player.id==this.playerid) { | 	        if(client) { | ||||||
| 				this.ctx.fillStyle = 'red'; | 				this.ctx.fillStyle = 'red'; | ||||||
| 			    this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, playerSize+10, 5); | 			    this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, playerSize+10, 5); | ||||||
| 				this.ctx.fillStyle = '#7AFF33'; | 				this.ctx.fillStyle = '#7AFF33'; | ||||||
|  | @ -54,13 +53,12 @@ class Render { | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	RenderBullet(bullet) { | 	RenderBullet(x,y) { | ||||||
| 		let x = bullet.x | 		/* | ||||||
| 		let y = bullet.y |  | ||||||
| 		if(this.map==1) { | 		if(this.map==1) { | ||||||
| 			x = x-2000 | 			x = x-2000; | ||||||
| 			y = y-2000 | 			y = y-2000; | ||||||
| 		} | 		}*/ | ||||||
| 	    this.ctx.save(); | 	    this.ctx.save(); | ||||||
| 	    this.ctx.translate(x, y); | 	    this.ctx.translate(x, y); | ||||||
| 	    this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20); | 	    this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20); | ||||||
|  | @ -68,8 +66,8 @@ class Render { | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	ReloadAff() { | 	ReloadAff() { | ||||||
| 		/* | 		 | ||||||
| 		const fond = new Image(); | 		//const fond = new Image();
 | ||||||
| 		if(player.x >= 2000 && player.y >=2000) { | 		if(player.x >= 2000 && player.y >=2000) { | ||||||
| 			this.map=1; | 			this.map=1; | ||||||
| 		} else { | 		} else { | ||||||
|  | @ -77,21 +75,20 @@ class Render { | ||||||
| 		} | 		} | ||||||
| 
 | 
 | ||||||
| 		if(this.map==0) { | 		if(this.map==0) { | ||||||
| 			fond.src = this.mapsrc; | 			let fond = map; | ||||||
| 		} else { | 		} else { | ||||||
| 			fond.src = this.map2src; | 			let fond = map2; | ||||||
| 		} | 		} | ||||||
| 		*/ | 		 | ||||||
| 		mapWidth = fond.width; | 		this.ctx.canvas.width = fond.width; | ||||||
| 		mapHeith = fond.height; | 		this.ctx.canvas.height = fond.height; | ||||||
| 		this.ctx.canvas.width = mapWidth; |  | ||||||
| 		this.ctx.canvas.height = mapHeith; |  | ||||||
| 	    this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith); | 	    this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith); | ||||||
|    		this.players.forEach((player) => { | 		this.RenderPlayer(player,true); | ||||||
|    			this.RenderPlayer(player); |    		players.forEach((player) => { | ||||||
|  |    			this.RenderPlayer(player,false); | ||||||
|    		}) |    		}) | ||||||
| 		this.bullets.forEach((bullet) => { | 		bullets.forEach((bullet) => { | ||||||
| 			this.RenderBullet(bullet); | 			this.RenderBullet(bullet.x,bullet.y); | ||||||
| 		}); | 		}); | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
		Loading…
	
		Reference in a new issue