GrandTabernacleAutoVI/public_html/js/render.js

149 lines
3.8 KiB
JavaScript

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 map2 = new Image();
const orange_portal = new Image();
const blue_portal = new Image();
imgPlayer.src = "./assets/body.png";
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";
orange_portal.src = "./assets/orange_portal.webp";
blue_portal.src = "./assets/blue_portal.webp";
const mapImages = [map,map2];
class Render {
constructor(idCanvas) {
let canvas = document.getElementById(idCanvas);
this.ctx = canvas.getContext("2d");
this.ctx.imageSmoothingEnabled=false;//does not lerp pixels
}
RenderPlayer(p,isClient) {
if(p==null)
return;
let x=p.x
let y=p.y
if(p.z==player.z)
{
this.ctx.save();
this.ctx.translate(x, y);
this.ctx.rotate(p.angle);
this.ctx.drawImage(imgPlayer, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
this.ctx.restore();
this.ctx.fillStyle = 'white';
this.ctx.font="10pt arial";
this.ctx.fillText(p.name,x-p.name.length*10/3,y-playerSize/1.8);
if(isClient) {
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, p.health*(playerSize+10)/defaulthealth, 5);
}
}
}
RenderCar(x,y,z,angle) {
if(z==player.z) {
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();
}
}
RenderBullet(x,y,z) {
if(z==player.z)
{
this.ctx.save();
this.ctx.translate(x, y);
this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
this.ctx.restore();
}
}
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();
}
}
RenderPortal(x,y,orange)
{
this.ctx.save();
this.ctx.translate(x,y);
if(orange)
this.ctx.drawImage(orange_portal,0,0,portalSize,portalSize);
else
this.ctx.drawImage(blue_portal,0,0,portalSize,portalSize);
this.ctx.restore();
}
ReloadAff() {
let background;
if(player.z<=0)
{
let date = new Date();
if(date.getMinutes()%10>=5){
background = map;
}else{
background = map_night;
}
}
else
{
background=mapImages[player.z];
}
let mapWidth = background.width;
let mapHeight = background.height;
this.ctx.canvas.width = mapWidth;
this.ctx.canvas.height = mapHeight;
this.ctx.drawImage(background, 0, 0, mapWidth, mapHeight);
this.RenderPlayer(player,true);
cars.forEach((car) => {
this.RenderCar(car.x,car.y,0,car.angle/*+(car.drift>0?car.drift/150:0)*/);
});
players.forEach((player) => {
this.RenderPlayer(player,false);
})
bullets.forEach((bullet) => {
this.RenderBullet(bullet.x,bullet.y,bullet.z);
});
PNJS.forEach((pnj)=>{
this.RenderPnj(pnj.x, pnj.y, pnj.z, (pnj.dir-1)*Math.PI/4, pnj.dir!=0);
})
if(affPortal)
{
portals.forEach((portal) => {
if(portal.in.z==player.z)
this.RenderPortal(portal.in.x,portal.in.y,true);
if(portal.out.z==player.z)
this.RenderPortal(portal.out.x,portal.out.y,false);
});
}
}
}