GrandTabernacleAutoVI/public_html/js/render.js

104 lines
2.7 KiB
JavaScript
Raw Normal View History

2023-12-06 09:50:34 +01:00
const imgPlayer = new Image();
const imgBullet = new Image();
2023-12-07 09:51:55 +01:00
const imgCar = new Image();
2023-12-08 13:50:49 +01:00
const map = new Image();
const map2 = new Image();
2023-12-06 09:50:34 +01:00
imgPlayer.src = "./assets/body.png";
2023-12-06 10:04:39 +01:00
imgBullet.src = "./assets/bullet.png";
2023-12-07 09:51:55 +01:00
imgCar.src = "./assets/car.png";
2023-12-08 18:29:33 +01:00
map.src = "./assets/map/map_principale.png"
map2.src = "./assets/map/map_secondaire.png";
2023-12-07 09:51:55 +01:00
2023-11-15 09:09:13 +01:00
class Render {
2023-12-08 17:04:16 +01:00
constructor(idCanvas) {
2023-12-08 18:02:42 +01:00
let canvas = document.getElementById(idCanvas);
2023-11-15 09:09:13 +01:00
this.ctx = canvas.getContext("2d");
2023-12-08 18:36:30 +01:00
this.ctx.imageSmoothingEnabled=false;
2023-12-08 18:02:42 +01:00
//this.ReloadAff();
2023-12-07 09:35:35 +01:00
}
2023-12-08 18:02:42 +01:00
RenderPlayer(player,client) {
2023-12-08 18:36:30 +01:00
if(player==null)
return;
2023-12-07 22:31:50 +01:00
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)) {
this.ctx.save();
this.ctx.translate(x, y);
this.ctx.rotate(player.angle);
this.ctx.drawImage(imgPlayer, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
this.ctx.restore();
this.ctx.fillStyle = 'white';
this.ctx.font="10pt arial";
2023-12-08 18:02:42 +01:00
this.ctx.fillText(player.name,x-player.name.length*10/3,y-playerSize/1.8);
if(client) {
2023-12-07 22:31:50 +01:00
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);
}
}
2023-12-06 09:50:34 +01:00
}
2023-12-07 16:29:34 +01:00
RenderCar(x,y,angle) {
2023-12-07 22:31:50 +01:00
if(this.map==0) {
this.ctx.save();
this.ctx.translate(x, y);
this.ctx.rotate(angle);
this.ctx.drawImage(imgCar, -carSize*1513/750 / 2, -carSize / 2, carSize*1513/750, carSize);
this.ctx.restore();
}
2023-12-07 09:51:55 +01:00
}
2023-12-08 18:02:42 +01:00
RenderBullet(x,y) {
/*
2023-12-07 22:31:50 +01:00
if(this.map==1) {
2023-12-08 18:02:42 +01:00
x = x-2000;
y = y-2000;
}*/
2023-12-06 09:50:34 +01:00
this.ctx.save();
2023-12-07 22:31:50 +01:00
this.ctx.translate(x, y);
2023-12-07 13:14:08 +01:00
this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
2023-11-15 09:09:13 +01:00
this.ctx.restore();
}
ReloadAff() {
2023-12-08 18:02:42 +01:00
//const fond = new Image();
2023-12-08 18:36:30 +01:00
if(player!=null && player.x >= 2000 && player.y >=2000) {
2023-12-08 17:04:16 +01:00
this.map=1;
} else {
this.map=0;
}
2023-12-07 22:31:50 +01:00
2023-12-08 18:29:33 +01:00
let fond = map;
/*
2023-12-07 22:31:50 +01:00
if(this.map==0) {
2023-12-08 18:02:42 +01:00
let fond = map;
2023-12-07 22:31:50 +01:00
} else {
2023-12-08 18:02:42 +01:00
let fond = map2;
2023-12-07 22:31:50 +01:00
}
2023-12-08 18:29:33 +01:00
*/
let mapWidth = fond.width;
let mapHeight = fond.height;
this.ctx.canvas.width = mapWidth;
this.ctx.canvas.height = mapHeight;
this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeight);
2023-12-08 18:02:42 +01:00
this.RenderPlayer(player,true);
2023-12-08 20:02:04 +01:00
cars.forEach((car) => {
this.RenderCar(car.x,car.y,car.angle+(car.drift>0?2.1:0));
});
2023-12-08 18:02:42 +01:00
players.forEach((player) => {
this.RenderPlayer(player,false);
2023-11-15 09:09:13 +01:00
})
2023-12-08 18:02:42 +01:00
bullets.forEach((bullet) => {
this.RenderBullet(bullet.x,bullet.y);
2023-12-06 09:50:34 +01:00
});
2023-11-15 09:09:13 +01:00
}
}