First Maps ! + Collision Script + more debug info
This commit is contained in:
parent
89b277111a
commit
da84ad04fe
8 changed files with 81 additions and 28 deletions
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
BIN
public_html/assets/map/map2.png
Normal file
BIN
public_html/assets/map/map2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 MiB |
BIN
public_html/assets/map/map3.png
Normal file
BIN
public_html/assets/map/map3.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 231 KiB |
|
@ -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()
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue