bientot ok ?

This commit is contained in:
Atsuyo-INSA 2023-12-12 13:53:55 +01:00
parent 68539426a7
commit f6cbebe532
6 changed files with 93 additions and 97 deletions

View file

@ -11,10 +11,10 @@ function game() {
cars.forEach((c) => { cars.forEach((c) => {
c.Update(); c.Update();
if(c.collide(player.x,player.y)) if(c.collide(player.x,player.y,player.z))
{ {
net.died(player.id,-1); net.died(player.id,-1);
player.x=-50; player.z=-1;
player.deaths++; player.deaths++;
player.health=10; player.health=10;
} }

View file

@ -9,17 +9,17 @@ let inp = new Input("canvas");
let bullets = []; let bullets = [];
let circles = []; let circles = [];
let squares = []; let squares = [];
let PNJS = [new PNJ(500, 100), let PNJS = [new PNJ(500, 100,0),
new PNJ(700, 100), new PNJ(700, 100,0),
new PNJ(500, 600), new PNJ(500, 600,0),
new PNJ(200, 700)]; new PNJ(200, 700,0)];
let cars = [new Car(renderer, 0, 0), let cars = [new Car(0, 0),
new Car(renderer, 0, 7), new Car(1, 7),
new Car(renderer, 1, 7), new Car(1, 13),
new Car(renderer, 1, 13), new Car(1, 14),
new Car(renderer, 1, 14), new Car(0, 7),
new Car(renderer, 0, 15)]; new Car(0, 15)];
function updatePlayer(data) function updatePlayer(data)
@ -28,6 +28,7 @@ function updatePlayer(data)
{ {
player.x=data.x; player.x=data.x;
player.y=data.y; player.y=data.y;
player.z=data.z;
} }
else else
{ {
@ -37,6 +38,9 @@ function updatePlayer(data)
{ {
players[i].x=data.x; players[i].x=data.x;
players[i].y=data.y; players[i].y=data.y;
if(data.z==undefined)
data.z=0;
players[i].z=data.z;
players[i].dir=data.dir; players[i].dir=data.dir;
players[i].visibleDir=data.visibleDir; players[i].visibleDir=data.visibleDir;
break; break;
@ -47,10 +51,18 @@ function updatePlayer(data)
function addPlayer(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); players.push(np);
} }
function removePlayer(id) function removePlayer(id)
{ {
for(let i=0;i<players.length;i++) for(let i=0;i<players.length;i++)

View file

@ -14,26 +14,21 @@ class Input {
let mouseX = (e.clientX - bounds.x)*this.canvas.width/bounds.width; let mouseX = (e.clientX - bounds.x)*this.canvas.width/bounds.width;
let mouseY = (e.clientY - bounds.y)*this.canvas.height/bounds.height; 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 dx = mouseX-player.x;
let dy = mouseY-player.y; let dy = mouseY-player.y;
let norm = Math.sqrt(dx*dx+dy*dy); 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); 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)=>{ window.addEventListener("keydown", (e)=>{
//blocks the action of the key (cf. Killian) //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(); e.preventDefault();
} }
this.keysDown.add(e.key.toLowerCase()) this.keysDown.add(e.key.toLowerCase())

View file

@ -12,9 +12,9 @@ class Network{
for (let i = 0; i<data.data.players.length; i++) { for (let i = 0; i<data.data.players.length; i++) {
let p = data.data.players[i]; let p = data.data.players[i];
if(p.id==this.playerId) 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 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; break;
@ -23,7 +23,7 @@ class Network{
break; break;
case "newplayer": 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; break;
case "removePlayer": case "removePlayer":
@ -31,7 +31,7 @@ class Network{
break; break;
case "newBullet": 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; break;
case "died": 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}}));
} }
} }

View file

@ -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++) { for (let i=0; i<objects.squares.length;i++) {
let current = objects.squares[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++) { for (let i=0; i<objects.circles.length; i++) {
let current = objects.circles[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));
} }

View file

@ -19,41 +19,37 @@ class Render {
constructor(idCanvas) { constructor(idCanvas) {
let canvas = document.getElementById(idCanvas); let canvas = document.getElementById(idCanvas);
this.ctx = canvas.getContext("2d"); this.ctx = canvas.getContext("2d");
this.ctx.imageSmoothingEnabled=false; this.ctx.imageSmoothingEnabled=false;//does not lerp pixels
//this.ReloadAff(); //this.ReloadAff();
} }
RenderPlayer(player,client) { RenderPlayer(p,isClient) {
if(player==null) if(p==null)
return; return;
let x=player.x let x=p.x
let y=player.y let y=p.y
if(x>=2000 && y>=2000 && this.map==1) {
x=player.x-2000 if(p.z==player.z)
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)) {
this.ctx.save(); this.ctx.save();
this.ctx.translate(x, y); 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.drawImage(imgPlayer, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
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-player.name.length*10/3,y-playerSize/1.8); this.ctx.fillText(p.name,x-p.name.length*10/3,y-playerSize/1.8);
if(client) { if(isClient) {
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';
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) { RenderCar(x,y,z,angle) {
if(this.map==0) { if(z==player.z) {
this.ctx.save(); this.ctx.save();
this.ctx.translate(x, y); this.ctx.translate(x, y);
this.ctx.rotate(angle); this.ctx.rotate(angle);
@ -62,73 +58,66 @@ class Render {
} }
} }
RenderBullet(x,y) { RenderBullet(x,y,z) {
/* if(z==player.z)
if(this.map==1) { {
x = x-2000; this.ctx.save();
y = y-2000; this.ctx.translate(x, y);
}*/ this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
this.ctx.save(); this.ctx.restore();
this.ctx.translate(x, y); }
this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
this.ctx.restore();
} }
RenderPnj(x, y, angle, moving){ RenderPnj(x, y, z, angle, moving)
{
this.ctx.save(); if(z==player.z)
this.ctx.translate(x, y); {
this.ctx.rotate(angle); this.ctx.save();
if((new Date)%1000>=500 || moving==false){ this.ctx.translate(x, y);
this.ctx.drawImage(imgPnj, -30 / 2, -30 / 2, 30, 30); this.ctx.rotate(angle);
}else{ if(moving == false || (new Date().getMilliseconds())%1000>=500){
this.ctx.drawImage(imgPnj2, -30 / 2, -30 / 2, 30, 30); this.ctx.drawImage(imgPnj, -30 / 2, -30 / 2, 30, 30);
} }else{
this.ctx.drawImage(imgPnj2, -30 / 2, -30 / 2, 30, 30);
this.ctx.restore(); }
this.ctx.restore();
}
} }
ReloadAff() { ReloadAff() {
let background;
//const fond = new Image();
if(player!=null && player.x >= 2000 && player.y >=2000) { if(player.z==0)
this.map=1; {
} else { let date = new Date();
this.map=0; if(date.getMinutes()%10>=5){
background = map;
}else{
background = map_night;
}
}
else
{
background=map2;
} }
let fond; let mapWidth = background.width;
let date = new Date(); let mapHeight = background.height;
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;
this.ctx.canvas.width = mapWidth; this.ctx.canvas.width = mapWidth;
this.ctx.canvas.height = mapHeight; 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); this.RenderPlayer(player,true);
cars.forEach((car) => { 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) => { players.forEach((player) => {
this.RenderPlayer(player,false); this.RenderPlayer(player,false);
}) })
bullets.forEach((bullet) => { bullets.forEach((bullet) => {
this.RenderBullet(bullet.x,bullet.y); this.RenderBullet(bullet.x,bullet.y,bullet.z);
}); });
PNJS.forEach((pnj)=>{ 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);
}) })
} }
} }