GrandTabernacleAutoVI/public_html/js/render.js

165 lines
4.2 KiB
JavaScript
Raw Normal View History

let drawPortals = true;
let drawCollisions = true;
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-09 14:53:07 +01:00
const imgPnj = new Image();
const imgPnj2 = new Image();
const map0 = new Image();
const map0_night = new Image();
const map1 = new Image();
2023-12-08 13:50:49 +01:00
const map2 = new Image();
const map3 = new Image();
2023-12-15 13:46:51 +01:00
const orange_portal = new Image();
const blue_portal = new Image();
2023-12-06 09:50:34 +01:00
imgPlayer.src = "./assets/body.png";
2023-12-21 17:34:34 +01:00
imgBullet.src = "./assets/bullet2.png";
2023-12-07 09:51:55 +01:00
imgCar.src = "./assets/car.png";
2023-12-09 14:53:07 +01:00
imgPnj.src = "./assets/pnj.png";
imgPnj2.src = "./assets/pnj1.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";
2023-12-15 13:46:51 +01:00
orange_portal.src = "./assets/orange_portal.webp";
blue_portal.src = "./assets/blue_portal.webp";
2023-12-07 09:51:55 +01:00
const mapImages = [map0,map1,map2,map3];
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-12 13:53:55 +01:00
this.ctx.imageSmoothingEnabled=false;//does not lerp pixels
2023-12-07 09:35:35 +01:00
}
2023-12-12 13:53:55 +01:00
RenderPlayer(p,isClient) {
if(p==null)
2023-12-08 18:36:30 +01:00
return;
2023-12-12 13:53:55 +01:00
let x=p.x
let y=p.y
if(p.z==player.z)
{
2023-12-07 22:31:50 +01:00
this.ctx.save();
this.ctx.translate(x, y);
2023-12-12 13:53:55 +01:00
this.ctx.rotate(p.angle);
2023-12-07 22:31:50 +01:00
this.ctx.drawImage(imgPlayer, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
this.ctx.restore();
this.ctx.fillStyle = 'white';
this.ctx.font="10pt arial";
2023-12-12 13:53:55 +01:00
this.ctx.fillText(p.name,x-p.name.length*10/3,y-playerSize/1.8);
if(isClient) {
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';
2023-12-12 13:53:55 +01:00
this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, p.health*(playerSize+10)/defaulthealth, 5);
2023-12-07 22:31:50 +01:00
}
}
2023-12-06 09:50:34 +01:00
}
2023-12-12 13:53:55 +01:00
RenderCar(x,y,z,angle) {
if(z==player.z) {
2023-12-07 22:31:50 +01:00
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-12 13:53:55 +01:00
RenderBullet(x,y,z) {
if(z==player.z)
{
this.ctx.save();
this.ctx.translate(x, y);
2023-12-21 17:34:34 +01:00
this.ctx.drawImage(imgBullet, -10 / 2, -10 / 2, 10, 10);
2023-12-12 13:53:55 +01:00
this.ctx.restore();
}
2023-11-15 09:09:13 +01:00
}
2023-12-12 13:53:55 +01:00
RenderPnj(x, y, z, angle, moving)
{
if(z==player.z)
{
this.ctx.save();
this.ctx.translate(x, y);
this.ctx.rotate(angle);
if(moving == false || (new Date().getMilliseconds())%1000>=500){
this.ctx.drawImage(imgPnj, -30 / 2, -30 / 2, 30, 30);
}else{
this.ctx.drawImage(imgPnj2, -30 / 2, -30 / 2, 30, 30);
}
this.ctx.restore();
}
2023-12-09 14:53:07 +01:00
}
2023-12-15 13:46:51 +01:00
RenderPortal(x,y,orange)
{
this.ctx.save();
this.ctx.translate(x,y);
if(orange)
2023-12-18 13:07:30 +01:00
this.ctx.drawImage(orange_portal,0,0,portalSize,portalSize);
2023-12-15 13:46:51 +01:00
else
2023-12-18 13:07:30 +01:00
this.ctx.drawImage(blue_portal,0,0,portalSize,portalSize);
2023-12-15 13:46:51 +01:00
this.ctx.restore();
2023-12-09 14:53:07 +01:00
}
2023-11-15 09:09:13 +01:00
ReloadAff() {
2023-12-12 13:53:55 +01:00
let background;
2023-12-09 11:46:13 +01:00
2023-12-13 14:11:21 +01:00
if(player.z<=0)
2023-12-12 13:53:55 +01:00
{
let date = new Date();
if(date.getMinutes()%10>=5){
background = map0;
2023-12-12 13:53:55 +01:00
}else{
background = map0_night;
2023-12-12 13:53:55 +01:00
}
2023-12-09 11:46:13 +01:00
}
2023-12-12 13:53:55 +01:00
else
{
background=mapImages[Math.min(player.z,3)];
2023-12-07 22:31:50 +01:00
}
2023-12-21 12:15:18 +01:00
2023-12-12 13:53:55 +01:00
let mapWidth = background.width;
let mapHeight = background.height;
2023-12-08 18:29:33 +01:00
this.ctx.canvas.width = mapWidth;
this.ctx.canvas.height = mapHeight;
2023-12-12 13:53:55 +01:00
this.ctx.drawImage(background, 0, 0, mapWidth, mapHeight);
2023-12-08 18:02:42 +01:00
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);
});
}
2023-12-21 17:34:34 +01:00
2023-12-08 20:02:04 +01:00
cars.forEach((car) => {
this.RenderCar(car.x,car.y,0,car.angle+(car.drift>0?car.drift/150:0)); // lerp(f(t))
2023-12-08 20:02:04 +01:00
});
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) => {
2023-12-12 13:53:55 +01:00
this.RenderBullet(bullet.x,bullet.y,bullet.z);
2023-12-06 09:50:34 +01:00
});
2023-12-09 14:53:07 +01:00
PNJS.forEach((pnj)=>{
2023-12-12 13:53:55 +01:00
this.RenderPnj(pnj.x, pnj.y, pnj.z, (pnj.dir-1)*Math.PI/4, pnj.dir!=0);
2023-12-09 14:53:07 +01:00
})
if(drawPortals)
2023-12-15 13:46:51 +01:00
{
2023-12-15 13:48:31 +01:00
portals.forEach((portal) => {
2023-12-15 13:46:51 +01:00
if(portal.in.z==player.z)
this.RenderPortal(portal.in.x,portal.in.y,true);
2023-12-18 13:07:30 +01:00
if(portal.out.z==player.z)
2023-12-15 13:46:51 +01:00
this.RenderPortal(portal.out.x,portal.out.y,false);
});
}
2023-11-15 09:09:13 +01:00
}
2023-12-18 13:22:20 +01:00
}