First Maps ! + Collision Script + more debug info

This commit is contained in:
Victor Lasserre 2023-12-21 17:04:47 +01:00
parent 89b277111a
commit da84ad04fe
8 changed files with 81 additions and 28 deletions

View file

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 KiB

View file

@ -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()

View file

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

View file

@ -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(1076,768,0,500,500,0),// SE
new Portal(1126,472,0,583,810,3),// E
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);

View file

@ -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);

View file

@ -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 map_night = new Image();
const map0 = 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"
map_night.src = "./assets/map/map_principale_nuit.png"
map2.src = "./assets/map/map_secondaire.png";
map0.src = "./assets/map/map_principale.png"
map0_night.src = "./assets/map/map_principale_nuit.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)