bientot ok ?
This commit is contained in:
		
							parent
							
								
									68539426a7
								
							
						
					
					
						commit
						f6cbebe532
					
				
					 6 changed files with 93 additions and 97 deletions
				
			
		|  | @ -11,10 +11,10 @@ function game() { | |||
| 
 | ||||
| 	cars.forEach((c) => { | ||||
| 		c.Update(); | ||||
| 		if(c.collide(player.x,player.y)) | ||||
| 		if(c.collide(player.x,player.y,player.z)) | ||||
| 		{ | ||||
| 			net.died(player.id,-1); | ||||
| 			player.x=-50; | ||||
| 			player.z=-1; | ||||
| 			player.deaths++; | ||||
| 			player.health=10; | ||||
| 		} | ||||
|  |  | |||
|  | @ -9,17 +9,17 @@ let inp = new Input("canvas"); | |||
| let bullets = []; | ||||
| let circles = []; | ||||
| let squares = []; | ||||
| let PNJS = [new PNJ(500, 100), | ||||
|         new PNJ(700, 100), | ||||
|         new PNJ(500, 600), | ||||
|         new PNJ(200, 700)]; | ||||
| let PNJS = [new PNJ(500, 100,0), | ||||
|         new PNJ(700, 100,0), | ||||
|         new PNJ(500, 600,0), | ||||
|         new PNJ(200, 700,0)]; | ||||
| 
 | ||||
| let cars = [new Car(renderer, 0, 0), | ||||
|         new Car(renderer, 0, 7), | ||||
|         new Car(renderer, 1, 7), | ||||
|         new Car(renderer, 1, 13), | ||||
|         new Car(renderer, 1, 14), | ||||
|         new Car(renderer, 0, 15)]; | ||||
| let cars = [new Car(0, 0), | ||||
|     new Car(1, 7), | ||||
|     new Car(1, 13), | ||||
|     new Car(1, 14), | ||||
|     new Car(0, 7), | ||||
|         new Car(0, 15)]; | ||||
| 
 | ||||
| 
 | ||||
| function updatePlayer(data) | ||||
|  | @ -28,6 +28,7 @@ function updatePlayer(data) | |||
|     { | ||||
|         player.x=data.x; | ||||
|         player.y=data.y; | ||||
|         player.z=data.z; | ||||
|     } | ||||
|     else | ||||
|     { | ||||
|  | @ -37,6 +38,9 @@ function updatePlayer(data) | |||
|             { | ||||
|                 players[i].x=data.x; | ||||
|                 players[i].y=data.y; | ||||
|                 if(data.z==undefined) | ||||
|                     data.z=0; | ||||
|                 players[i].z=data.z; | ||||
|                 players[i].dir=data.dir; | ||||
|                 players[i].visibleDir=data.visibleDir; | ||||
|                 break; | ||||
|  | @ -47,10 +51,18 @@ function updatePlayer(data) | |||
| 
 | ||||
| function addPlayer(data) | ||||
| { | ||||
|     let np = new Player(data.id, data.x, data.y, data.name, data.dir); | ||||
|     let np = new Player(data.id, data.x, data.y, 0, data.name, data.dir); | ||||
|     players.push(np); | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| function removePlayer(id) | ||||
| { | ||||
|     for(let i=0;i<players.length;i++) | ||||
|  |  | |||
|  | @ -14,26 +14,21 @@ class Input { | |||
| 
 | ||||
|             let mouseX = (e.clientX - bounds.x)*this.canvas.width/bounds.width; | ||||
|             let mouseY = (e.clientY - bounds.y)*this.canvas.height/bounds.height; | ||||
| 
 | ||||
|             if(player.x>=2000 && player.y>=2000) { | ||||
|                 mouseX+=2000; | ||||
|                 mouseY+=2000; | ||||
|             } | ||||
|              | ||||
|             let dx = mouseX-player.x; | ||||
|             let dy = mouseY-player.y; | ||||
| 
 | ||||
|             let norm = Math.sqrt(dx*dx+dy*dy); | ||||
| 
 | ||||
|             let b = new Bullet(player.x,player.y,dx/norm,dy/norm,player.id); | ||||
|             let b = new Bullet(player.x,player.y,player.z,dx/norm,dy/norm,player.id); | ||||
|             bullets.push(b); | ||||
| 
 | ||||
|             net.newBullet(b.x,b.y,b.dx,b.dy,b.parentId); | ||||
|             net.newBullet(b.x,b.y,b.z,b.dx,b.dy,b.parentId); | ||||
|         }); | ||||
| 
 | ||||
|         window.addEventListener("keydown", (e)=>{ | ||||
|             //blocks the action of the key (cf. Killian)
 | ||||
|             if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) { | ||||
|             if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.code)) { | ||||
|                 e.preventDefault(); | ||||
|             } | ||||
|             this.keysDown.add(e.key.toLowerCase()) | ||||
|  |  | |||
|  | @ -12,9 +12,9 @@ class Network{ | |||
| 				for (let i = 0; i<data.data.players.length; i++) { | ||||
| 					let p = data.data.players[i]; | ||||
| 					if(p.id==this.playerId) | ||||
| 						player=new Player(p.id,p.x,p.y,p.name,p.dir); | ||||
| 						player=new Player(p.id,p.x,p.y,0,p.name,p.dir); | ||||
| 					else | ||||
| 						players.push(new Player(p.id,p.x,p.y,p.name,p.dir)); | ||||
| 						players.push(new Player(p.id,p.x,p.y,0,p.name,p.dir)); | ||||
| 				} | ||||
| 				break; | ||||
| 
 | ||||
|  | @ -23,7 +23,7 @@ class Network{ | |||
| 				break; | ||||
| 
 | ||||
| 			case "newplayer": | ||||
| 				players.push(new Player(data.id, data.x, data.y, data.name, data.dir)); | ||||
| 				players.push(new Player(data.data.id, data.data.x, data.data.y, 0, data.data.name, data.data.dir)); | ||||
| 				break; | ||||
| 
 | ||||
| 			case "removePlayer": | ||||
|  | @ -31,7 +31,7 @@ class Network{ | |||
| 				break; | ||||
| 
 | ||||
| 			case "newBullet": | ||||
| 				bullets.push(new Bullet(data.data.x,data.data.y,data.data.dx,data.data.dy,data.data.id, this.sound)); | ||||
| 				bullets.push(new Bullet(data.data.x,data.data.y,data.z,data.data.dx,data.data.dy,data.data.id, this.sound)); | ||||
| 				break; | ||||
| 
 | ||||
| 			case "died": | ||||
|  | @ -66,8 +66,8 @@ class Network{ | |||
| 		})); | ||||
| 	} | ||||
| 
 | ||||
| 	newBullet(x,y,dx,dy,parentId) | ||||
| 	newBullet(x,y,z,dx,dy,parentId) | ||||
| 	{ | ||||
| 		this.socket.send(JSON.stringify({type:"newBullet",data:{x: x,y: y,dx: dx,dy: dy,id:parentId}})); | ||||
| 		this.socket.send(JSON.stringify({type:"newBullet",data:{x: x,y: y,z: z,dx: dx,dy: dy,id:parentId}})); | ||||
| 	} | ||||
| } | ||||
|  | @ -1,11 +1,11 @@ | |||
| let objects = {"squares":[{"x":1162,"y":115,"w":144,"h":125},{"x":120,"y":906,"w":1228,"h":21},{"x":127,"y":0,"w":1225,"h":14},{"x":297,"y":114,"w":78,"h":93},{"x":169,"y":243,"w":62,"h":250},{"x":313,"y":243,"w":62,"h":253},{"x":228,"y":257,"w":96,"h":222},{"x":792,"y":113,"w":176,"h":126},{"x":1017,"y":113,"w":143,"h":81},{"x":1160,"y":241,"w":143,"h":-129},{"x":1065,"y":372,"w":127,"h":124},{"x":697,"y":372,"w":319,"h":126},{"x":697,"y":498,"w":159,"h":111},{"x":697,"y":628,"w":160,"h":158},{"x":1001,"y":628,"w":191,"h":158},{"x":281,"y":629,"w":175,"h":156},{"x":0,"y":0,"w":137,"h":616},{"x":0,"y":615,"w":136,"h":310},{"x":1337,"y":1,"w":130,"h":581},{"x":1337,"y":573,"w":131,"h":356},{"x":586,"y":153,"w":15,"h":24},{"x":651,"y":153,"w":12,"h":24},{"x":700,"y":187,"w":12,"h":22},{"x":1020,"y":194,"w":10,"h":47},{"x":1019,"y":227,"w":56,"h":14},{"x":1101,"y":227,"w":62,"h":13},{"x":654,"y":128,"w":105,"h":17},{"x":748,"y":129,"w":12,"h":49},{"x":748,"y":193,"w":12,"h":47},{"x":654,"y":223,"w":105,"h":16},{"x":521,"y":129,"w":106,"h":14},{"x":521,"y":140,"w":13,"h":38},{"x":521,"y":194,"w":13,"h":46},{"x":521,"y":225,"w":108,"h":16}],"circles":[{"x":552,"y":163,"r":13.601470508735444},{"x":608,"y":190,"r":20.248456731316587},{"x":569,"y":212,"r":11.704699910719626},{"x":680,"y":213,"r":12.041594578792296},{"x":727,"y":164,"r":14.212670403551895}]} | ||||
| let objects = {"squares":[{"x":1162,"y":115,"z":0,"w":144,"h":125},{"x":120,"y":906,"z":0,"w":1228,"h":21},{"x":127,"y":0,"z":0,"w":1225,"h":14},{"x":297,"y":114,"z":0,"w":78,"h":93},{"x":169,"y":243,"z":0,"w":62,"h":250},{"x":313,"y":243,"z":0,"w":62,"h":253},{"x":228,"y":257,"z":0,"w":96,"h":222},{"x":792,"y":113,"z":0,"w":176,"h":126},{"x":1017,"y":113,"z":0,"w":143,"h":81},{"x":1160,"y":241,"z":0,"w":143,"h":-129},{"x":1065,"y":372,"z":0,"w":127,"h":124},{"x":697,"y":372,"z":0,"w":319,"h":126},{"x":697,"y":498,"z":0,"w":159,"h":111},{"x":697,"y":628,"z":0,"w":160,"h":158},{"x":1001,"y":628,"z":0,"w":191,"h":158},{"x":281,"y":629,"z":0,"w":175,"h":156},{"x":0,"y":0,"z":0,"w":137,"h":616},{"x":0,"y":615,"z":0,"w":136,"h":310},{"x":1337,"y":1,"z":0,"w":130,"h":581},{"x":1337,"y":573,"z":0,"w":131,"h":356},{"x":586,"y":153,"z":0,"w":15,"h":24},{"x":651,"y":153,"z":0,"w":12,"h":24},{"x":700,"y":187,"z":0,"w":12,"h":22},{"x":1020,"y":194,"z":0,"w":10,"h":47},{"x":1019,"y":227,"z":0,"w":56,"h":14},{"x":1101,"y":227,"z":0,"w":62,"h":13},{"x":654,"y":128,"z":0,"w":105,"h":17},{"x":748,"y":129,"z":0,"w":12,"h":49},{"x":748,"y":193,"z":0,"w":12,"h":47},{"x":654,"y":223,"z":0,"w":105,"h":16},{"x":521,"y":129,"z":0,"w":106,"h":14},{"x":521,"y":140,"z":0,"w":13,"h":38},{"x":521,"y":194,"z":0,"w":13,"h":46},{"x":521,"y":225,"z":0,"w":108,"h":16}],"circles":[{"x":552,"y":163,"z":0,"r":13.601470508735444},{"x":608,"y":190,"z":0,"r":20.248456731316587},{"x":569,"y":212,"z":0,"r":11.704699910719626},{"x":680,"y":213,"z":0,"r":12.041594578792296},{"x":727,"y":164,"z":0,"r":14.212670403551895}]} | ||||
| 
 | ||||
| for (let i=0; i<objects.squares.length;i++) { | ||||
| 	let current = objects.squares[i] | ||||
| 	squares.push(new Square(current.x, current.y, current.w, current.h)); | ||||
| 	squares.push(new Square(current.x, current.y, current.z, current.w, current.h)); | ||||
| } | ||||
| 
 | ||||
| for (let i=0; i<objects.circles.length; i++) { | ||||
| 	let current = objects.circles[i] | ||||
| 	circles.push(new Circle(current.x, current.y, current.r)); | ||||
| 	circles.push(new Circle(current.x, current.y, current.z, current.r)); | ||||
| } | ||||
|  | @ -19,41 +19,37 @@ class Render { | |||
| 	constructor(idCanvas) { | ||||
| 		let canvas = document.getElementById(idCanvas); | ||||
| 		this.ctx = canvas.getContext("2d"); | ||||
| 		this.ctx.imageSmoothingEnabled=false; | ||||
| 		this.ctx.imageSmoothingEnabled=false;//does not lerp pixels
 | ||||
| 		//this.ReloadAff();
 | ||||
| 	} | ||||
| 
 | ||||
| 	RenderPlayer(player,client) { | ||||
| 		if(player==null) | ||||
| 	RenderPlayer(p,isClient) { | ||||
| 		if(p==null) | ||||
| 			return; | ||||
| 		let x=player.x | ||||
| 		let y=player.y | ||||
| 		if(x>=2000 && y>=2000 && this.map==1) { | ||||
| 			x=player.x-2000 | ||||
| 			y=player.y-2000 | ||||
| 		} | ||||
| 
 | ||||
| 		//this.map==1 && (x<2000 || y<2000)
 | ||||
| 		if((this.map==1 && player.x>=2000 && player.y>=2000) || (this.map==0 && x<2000 && y <2000)) { | ||||
| 		let x=p.x | ||||
| 		let y=p.y | ||||
| 		 | ||||
| 		if(p.z==player.z) | ||||
| 		{ | ||||
| 			this.ctx.save(); | ||||
| 		    this.ctx.translate(x, y); | ||||
| 		    this.ctx.rotate(player.angle); | ||||
| 		    this.ctx.rotate(p.angle); | ||||
| 		    this.ctx.drawImage(imgPlayer, -playerSize / 2, -playerSize / 2, playerSize, playerSize); | ||||
| 		    this.ctx.restore(); | ||||
| 			this.ctx.fillStyle = 'white'; | ||||
| 	        this.ctx.font="10pt arial"; | ||||
| 	        this.ctx.fillText(player.name,x-player.name.length*10/3,y-playerSize/1.8); | ||||
| 	        if(client) { | ||||
| 	        this.ctx.fillText(p.name,x-p.name.length*10/3,y-playerSize/1.8); | ||||
| 	        if(isClient) { | ||||
| 				this.ctx.fillStyle = 'red'; | ||||
| 			    this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, playerSize+10, 5); | ||||
| 				this.ctx.fillStyle = '#7AFF33'; | ||||
| 			    this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, player.health*(playerSize+10)/defaulthealth, 5); | ||||
| 			    this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, p.health*(playerSize+10)/defaulthealth, 5); | ||||
| 	        } | ||||
| 		} | ||||
| 	} | ||||
| 
 | ||||
| 	RenderCar(x,y,angle) { | ||||
| 		if(this.map==0) { | ||||
| 	RenderCar(x,y,z,angle) { | ||||
| 		if(z==player.z) { | ||||
| 		    this.ctx.save(); | ||||
| 		    this.ctx.translate(x, y); | ||||
| 		    this.ctx.rotate(angle); | ||||
|  | @ -62,73 +58,66 @@ class Render { | |||
| 		} | ||||
| 	} | ||||
| 
 | ||||
| 	RenderBullet(x,y) { | ||||
| 		/* | ||||
| 		if(this.map==1) { | ||||
| 			x = x-2000; | ||||
| 			y = y-2000; | ||||
| 		}*/ | ||||
| 	    this.ctx.save(); | ||||
| 	    this.ctx.translate(x, y); | ||||
| 	    this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20); | ||||
| 	    this.ctx.restore(); | ||||
| 	RenderBullet(x,y,z) { | ||||
| 		if(z==player.z) | ||||
| 	    { | ||||
| 			this.ctx.save(); | ||||
| 	    	this.ctx.translate(x, y); | ||||
| 	    	this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20); | ||||
| 	    	this.ctx.restore(); | ||||
| 		} | ||||
| 	} | ||||
| 
 | ||||
| 	RenderPnj(x, y, angle, moving){ | ||||
| 		 | ||||
| 		this.ctx.save(); | ||||
| 	    this.ctx.translate(x, y); | ||||
| 	    this.ctx.rotate(angle); | ||||
| 		if((new Date)%1000>=500 || moving==false){ | ||||
| 	    	this.ctx.drawImage(imgPnj, -30 / 2, -30 / 2, 30, 30); | ||||
| 	    }else{ | ||||
| 	    	this.ctx.drawImage(imgPnj2, -30 / 2, -30 / 2, 30, 30); | ||||
| 	    } | ||||
| 
 | ||||
| 	    this.ctx.restore(); | ||||
| 	RenderPnj(x, y, z, angle, moving) | ||||
| 	{ | ||||
| 		if(z==player.z) | ||||
| 		{ | ||||
| 			this.ctx.save(); | ||||
| 	    	this.ctx.translate(x, y); | ||||
| 	    	this.ctx.rotate(angle); | ||||
| 			if(moving == false || (new Date().getMilliseconds())%1000>=500){ | ||||
| 	    		this.ctx.drawImage(imgPnj, -30 / 2, -30 / 2, 30, 30); | ||||
| 	    	}else{ | ||||
| 	    		this.ctx.drawImage(imgPnj2, -30 / 2, -30 / 2, 30, 30); | ||||
| 	    	} | ||||
| 	    	this.ctx.restore(); | ||||
| 		} | ||||
| 	} | ||||
| 
 | ||||
| 	ReloadAff() { | ||||
| 		 | ||||
| 		//const fond = new Image();
 | ||||
| 		if(player!=null && player.x >= 2000 && player.y >=2000) { | ||||
| 			this.map=1; | ||||
| 		} else { | ||||
| 			this.map=0; | ||||
| 		let background; | ||||
| 
 | ||||
| 		if(player.z==0) | ||||
| 		{ | ||||
| 			let date = new Date(); | ||||
| 			if(date.getMinutes()%10>=5){ | ||||
| 				background = map; | ||||
| 			}else{ | ||||
| 				background = map_night; | ||||
| 			} | ||||
| 		} | ||||
| 		else | ||||
| 		{ | ||||
| 			background=map2; | ||||
| 		} | ||||
| 
 | ||||
| 		let fond; | ||||
| 		let date = new Date(); | ||||
| 
 | ||||
| 		if(date.getMinutes()%10>=5){ | ||||
| 			fond = map; | ||||
| 		}else{ | ||||
| 			fond = map_night; | ||||
| 		} | ||||
| 		/* | ||||
| 		if(this.map==0) { | ||||
| 			let fond = map; | ||||
| 		} else { | ||||
| 			let fond = map2; | ||||
| 		} | ||||
| 		*/ | ||||
| 		let mapWidth = fond.width; | ||||
| 		let mapHeight = fond.height; | ||||
| 		let mapWidth = background.width; | ||||
| 		let mapHeight = background.height; | ||||
| 		this.ctx.canvas.width = mapWidth; | ||||
| 		this.ctx.canvas.height = mapHeight; | ||||
| 	    this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeight); | ||||
| 	    this.ctx.drawImage(background, 0, 0, mapWidth, mapHeight); | ||||
| 		this.RenderPlayer(player,true); | ||||
|         cars.forEach((car) => { | ||||
|             this.RenderCar(car.x,car.y,car.angle+(car.drift>0?2.1:0)); | ||||
|             this.RenderCar(car.x,car.y,car.z,car.angle+(car.drift>0?2.1:0)); | ||||
|         }); | ||||
|    		players.forEach((player) => { | ||||
|    			this.RenderPlayer(player,false); | ||||
|    		}) | ||||
| 		bullets.forEach((bullet) => { | ||||
| 			this.RenderBullet(bullet.x,bullet.y); | ||||
| 			this.RenderBullet(bullet.x,bullet.y,bullet.z); | ||||
| 		}); | ||||
| 		PNJS.forEach((pnj)=>{ | ||||
| 			this.RenderPnj(pnj.x, pnj.y, (pnj.dir-1)*Math.PI/4, pnj.dir!=0); | ||||
| 			this.RenderPnj(pnj.x, pnj.y, pnj.z, (pnj.dir-1)*Math.PI/4, pnj.dir!=0); | ||||
| 		}) | ||||
| 	} | ||||
| } | ||||
		Loading…
	
		Reference in a new issue