First Maps ! + Collision Script + more debug info

public_html/js/class.js

@@ -111,7 +111,7 @@ class Bullet
         this.z=z;
         this.dx=dx;
         this.dy=dy;
-        this.deleted=false;
+        this.deleted=(z<0);
         this.shooterId=id;
     }
 
@@ -388,7 +388,7 @@ class PNJ{
     }
 
     checkCollisions(){
-        squares.forEach((square) => {
+        map0Squares.forEach((square) => {
             if(square.collide(this.x,this.y,this.z))
             {
                 return true;
@@ -466,11 +466,13 @@ class Portal
 
 class Game_Map
 {
-    constructor(portalsOut,z) // portalsIn/Out : portal teleport In/Out; z: idDimension
+    constructor(portalsOut,z,squares,circles) // portalsIn/Out : portal teleport In/Out; z: idDimension
     {
         this.portalsOut=portalsOut;
         portalsOut.forEach((p) => {if(p.in.z!=z){console.log("WRONG PORTAL DEFINITION FOR MAP",z,", portal :",p);}});
         this.z=z;
+        this.squares=squares;
+        this.circles=circles;
     }
     
     update()

public_html/js/game.js

@@ -3,11 +3,12 @@ let currentTime = new Date();
 function game() {
 	if(player==null)
 		return;
-
+    
-	player.update(squares, circles, dt);
+	player.update(maps[player.z].squares, maps[player.z].circles, dt);
-	for (let i = 0;i<players.length; i++) {
+	players.forEach((p)=>{
-		players[i].update(squares, circles, dt);
+        if(p.z>=0)
-	}
+            p.update(maps[p.z].squares,maps[p.z].circles);
+    });
 
 	cars.forEach((c) => {
 		c.Update(dt);

public_html/js/global.js

@@ -27,16 +27,27 @@ let cars = [new Car(1, 7),
         //new Car(0, 26),
         //new Car(0, 45),
         new Car(0, 52)];
-let portals = [new Portal(250,457,0,500,500,0),//O
+let portals = [new Portal(250,457,0,516,789,1),//O
     new Portal(344,758,0,500,500,0), // SO
     new Portal(1190,211,0,500,500,0),// NE
     new Portal(862,213,0,500,500,0), // N
-    new Portal(1126,472,0,500,500,0),// E
+    new Portal(1126,472,0,583,810,3),// E
-    new Portal(1076,768,0,500,500,0),// SE
+    new Portal(1076,768,0,484,898,2),// SE
     new Portal(721,767,0,500,500,0), // S
-    new Portal(970,476,0,500,500,0)];//Mid
+    new Portal(970,476,0,500,500,0),//Mid
+    new Portal(617,154,1,274,244,0),//out map 1
+    new Portal(95,561,2,989,694,0), //out map 2
+    new Portal(569,828,3,1152,519,0)];//out map 3
 
-let maps = [new Game_Map(portals.slice(0),0)];
+let map0Squares = [new Square(1064,371,0,126,125),new Square(1160,113,0,143,126),new Square(1017,113,0,146,80),new Square(1018,192,0,10,47),new Square(1028,227,0,45,12),new Square(1101,227,0,66,12),new Square(791,113,0,176,126),new Square(522,129,0,103,13),new Square(654,128,0,104,15),new Square(747,144,0,12,34),new Square(748,194,0,10,44),new Square(655,224,0,101,15),new Square(520,227,0,106,13),new Square(522,195,0,11,39),new Square(522,131,0,8,46),new Square(588,154,0,10,22),new Square(651,153,0,10,21),new Square(698,188,0,12,19),new Square(697,373,0,318,124),new Square(697,497,0,158,112),new Square(1001,629,0,188,155),new Square(696,626,0,159,158),new Square(281,627,0,173,156),new Square(168,243,0,61,250),new Square(229,259,0,87,218),new Square(311,242,0,62,254),new Square(296,112,0,79,95),new Square(2,0,0,1350,14),new Square(1337,2,0,130,927),new Square(119,909,0,1250,17),new Square(4,1,0,129,923),new Square(543,156,0,16,18),new Square(559,207,0,16,17),new Square(598,179,0,17,29),new Square(721,157,0,13,17),new Square(673,205,0,14,17)];
+let map1Squares = [new Square(1,0,1,1020,160),new Square(868,48,1,153,969),new Square(2,838,1,1019,182),new Square(1,0,1,148,998)];
+let map2Squares = [new Square(25,936,2,989,83),new Square(1,1,2,98,974),new Square(5,8,2,1002,250),new Square(941,10,2,80,1002),new Square(816,617,2,146,168),new Square(764,252,2,48,214),new Square(805,282,2,154,92),new Square(406,233,2,195,166),new Square(94,418,2,155,88),new Square(94,277,2,127,68),new Square(198,762,2,60,103),new Square(225,880,2,53,30),new Square(116,854,2,35,32)];
+let map3Squares = [new Square(19,836,3,857,48),new Square(706,324,3,180,531),new Square(640,321,3,75,168),new Square(832,10,3,60,325),new Square(3,2,3,843,165),new Square(354,48,3,90,302),new Square(256,321,3,287,165),new Square(1,1,3,62,374),new Square(51,320,3,109,157),new Square(4,434,3,90,436),new Square(146,680,3,124,71),new Square(92,754,3,32,88),new Square(290,554,3,220,36),new Square(708,150,3,87,68),new Square(323,206,3,39,59),new Square(50,127,3,72,93),new Square(448,648,3,61,44),new Square(578,645,3,92,45),new Square(802,236,3,36,60)];
+    
+let maps = [new Game_Map(portals.slice(0,8),0,map0Squares,[]),
+            new Game_Map(portals.slice(8,9),1,map1Squares,[]),
+            new Game_Map(portals.slice(9,10),2,map2Squares,[]),
+            new Game_Map(portals.slice(10,11),3,map3Squares,[])];
         
 players.push(new Player(-1,-50,-50,-1,"VOITURES",0));
 
@@ -110,7 +121,7 @@ function updateBullets(dt)
     for(let i = bullets.length-1;i>=0;i--)
     {
         bullets[i].update(dt);
-        bullets[i].checkCollisions(squares,circles);
+        bullets[i].checkCollisions(maps[bullets[i].z].squares,maps[bullets[i].z].circles);
         if(bullets[i].deleted)
         {
             bullets.splice(i,1);

public_html/js/input.js

@@ -5,6 +5,13 @@ class Input {
         
         this.canvas = document.getElementById(idCanvas);
 
+        //for debug/creation of collisions only
+        this.dmx=0;
+        this.dmy=0;
+        this.parity=true;
+        this.toPrint="";
+        //
+
         this.canvas.addEventListener("click", (e) => {
             if(player==null || bullets==null){
                 return;
@@ -15,9 +22,26 @@ class Input {
             let mouseX = (e.clientX - bounds.x)*this.canvas.width/bounds.width;
             let mouseY = (e.clientY - bounds.y)*this.canvas.height/bounds.height;
             //console.log(Math.round(mouseX),",",Math.round(mouseY)); //for debug
-            
+
+            //if(this.parity){ ////// to create collisions for a map
+            //    this.dmx=Math.round(mouseX);
+            //    this.dmy=Math.round(mouseY);
+            //    this.parity=!this.parity;
+            //}else{
+            //    let mx = Math.round((e.clientX - bounds.x)*this.canvas.width/bounds.width);
+            //    let my = Math.round((e.clientY - bounds.y)*this.canvas.height/bounds.height);
+            //    let x = Math.min(mx,this.dmx);
+            //    let y = Math.min(my,this.dmy);
+            //    let w = Math.abs(mx-this.dmx);
+            //    let h = Math.abs(my-this.dmy);
+            //    this.toPrint+="new Square("+x.toString()+","+y.toString()+","+player.z.toString()+","+w.toString()+","+h.toString()+"),";
+            //    navigator.clipboard.writeText(this.toPrint);
+            //    maps[player.z].squares.push(new Square(x,y,player.z,w,h));
+            //    this.parity=!this.parity;
+            //}
+
             let dx = mouseX-player.x;
-            let dy = mouseY-player.y;
+            let dy = mouseY-player.y;    
 
             let norm = Math.sqrt(dx*dx+dy*dy);
 

public_html/js/render.js

@@ -1,11 +1,16 @@
+let drawPortals = true;
+let drawCollisions = true;
+
 const imgPlayer = new Image();
 const imgBullet = new Image();
 const imgCar = new Image();
 const imgPnj = new Image();
 const imgPnj2 = new Image();
-const map = new Image();
+const map0 = new Image();
-const map_night = new Image();
+const map0_night = new Image();
+const map1 = new Image();
 const map2 = new Image();
+const map3 = new Image();
 const orange_portal = new Image();
 const blue_portal = new Image();
 imgPlayer.src = "./assets/body.png";
@@ -13,13 +18,15 @@ imgBullet.src = "./assets/bullet.png";
 imgCar.src = "./assets/car.png";
 imgPnj.src = "./assets/pnj.png";
 imgPnj2.src = "./assets/pnj1.png";
-map.src = "./assets/map/map_principale.png"
+map0.src = "./assets/map/map_principale.png"
-map_night.src = "./assets/map/map_principale_nuit.png"
+map0_night.src = "./assets/map/map_principale_nuit.png"
-map2.src = "./assets/map/map_secondaire.png";
+map1.src = "./assets/map/map1.png";
+map2.src = "./assets/map/map2.png";
+map3.src = "./assets/map/map3.png";
 orange_portal.src = "./assets/orange_portal.webp";
 blue_portal.src = "./assets/blue_portal.webp";
 
-const mapImages = [map,map2];
+const mapImages = [map0,map1,map2,map3];
 
 class Render {
 	constructor(idCanvas) {
@@ -107,14 +114,14 @@ class Render {
 		{
 			let date = new Date();
 			if(date.getMinutes()%10>=5){
-				background = map;
+				background = map0;
 			}else{
-				background = map_night;
+				background = map0_night;
 			}
 		}
 		else
 		{
-			background=mapImages[player.z];
+			background=mapImages[Math.min(player.z,3)];
 		}
 		
 		let mapWidth = background.width;
@@ -123,9 +130,17 @@ class Render {
 		this.ctx.canvas.height = mapHeight;
 	    this.ctx.drawImage(background, 0, 0, mapWidth, mapHeight);
 		this.RenderPlayer(player,true);
-		
+
+        if(drawCollisions)
+        {
+            maps[player.z].squares.forEach((s) => {
+                this.ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
+                this.ctx.fillRect(s.x,s.y,s.w,s.h);
+            });
+        }
+        
         cars.forEach((car) => {
-            this.RenderCar(car.x,car.y,0,car.angle+(car.drift>0?car.drift/150:0));
+            this.RenderCar(car.x,car.y,0,car.angle+(car.drift>0?car.drift/150:0)); // lerp(f(t))
         });
    		players.forEach((player) => {
    			this.RenderPlayer(player,false);
@@ -136,7 +151,7 @@ class Render {
 		PNJS.forEach((pnj)=>{
 			this.RenderPnj(pnj.x, pnj.y, pnj.z, (pnj.dir-1)*Math.PI/4, pnj.dir!=0);
 		})
-		if(affPortal)
+		if(drawPortals)
 		{
 			portals.forEach((portal) => {
 				if(portal.in.z==player.z)