GrandTabernacleAutoVI/public_html/js/render.js

let drawPortals = false;
let drawCollisions = false;

const imgPlayer = new Image();
const imgBullet = new Image();
const imgCar = new Image();
const imgPnj = new Image();
const imgPnj2 = new Image();
const map0 = new Image();
const map0_night = new Image();
const map1 = new Image();
const map2 = new Image();
const map3 = new Image();
const map4 = new Image();
const map5 = new Image();
const map6 = new Image();
const map7 = new Image();
const map8 = new Image();
const map9 = new Image();
const map10 = new Image();
const map11 = new Image();
const orange_portal = new Image();
const blue_portal = new Image();
const portal = new Image();
imgPlayer.src = "./assets/body.png";
imgBullet.src = "./assets/bullet2.png";
imgCar.src = "./assets/car.png";
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";
map4.src = "./assets/map/map4.png";
map5.src = "./assets/map/map5.jpg";
map6.src = "./assets/map/map6.jpg";
map7.src = "./assets/map/map7.jpg";
map8.src = "./assets/map/map8.jpg";
map9.src = "./assets/map/map9.jpg";
map10.src = "./assets/map/map10.jpg";
map11.src = "./assets/map/map11.jpg";
orange_portal.src = "./assets/orange_portal.webp";
blue_portal.src = "./assets/blue_portal.webp";
portal.src = "./assets/portal.png";

const mapImages = [map0,map1,map2,map3, map4, map5, map6, map7, map8, map9, map10, map11];

class Render {
	constructor(idCanvas) {
		let canvas = document.getElementById(idCanvas);
		this.ctx = canvas.getContext("2d");
		this.ctx.imageSmoothingEnabled=false;//does not lerp pixels
		this.timer=0
	}

	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, -10 / 2, -10 / 2, 10, 10);
	    	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();
		}
	}

	RenderPortalDebug(x,y,debug)
	{
		this.ctx.save();
		this.ctx.translate(x,y);
		if(debug) {
			this.ctx.drawImage(orange_portal,0,0,portalSize,portalSize);
		} else {
			this.ctx.drawImage(blue_portal,0,0,portalSize,portalSize);
		}
		this.ctx.restore();
	}

	RenderPortal(x,y)
	{
	    this.ctx.save();
	    this.ctx.translate(x+portalSize/2, y+portalSize/2);
	    this.ctx.rotate(this.timer * Math.PI / 180);
	    this.ctx.globalAlpha = 0.5;
	    this.ctx.drawImage(portal, -portalSize / 2, -portalSize / 2, portalSize, portalSize);
	    this.ctx.globalAlpha = 1;
	    this.ctx.restore();
	}


	ReloadAff() {
		let background;

		if(player.z<=0)
		{
			let date = new Date();
			if(date.getMinutes()%10>=5){
				background = map0;
			}else{
				background = map0_night;
			}
		}
		else
		{
			background=mapImages[Math.min(player.z,11)];
		}
		
		let mapWidth = background.width;
		let mapHeight = background.height;
		this.ctx.canvas.width = mapWidth;
		this.ctx.canvas.height = mapHeight;

		if(player.z==9) {
			this.ctx.save();
			this.ctx.beginPath();
			this.ctx.arc(player.x, player.y, 100, 0, 2 * Math.PI);
			this.ctx.clip();
		}
		
		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);
            });
            maps[player.z].circles.forEach((s) => {
            	this.ctx.beginPath();
				this.ctx.arc(s.x, s.y, s.r, 0, 3 * Math.PI);
                this.ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
				this.ctx.fill();
				this.ctx.stroke();
				this.ctx.closePath();
            });
            //on draw le centre du joueur
			this.ctx.beginPath();
			this.ctx.fillStyle="blue"
			this.ctx.arc(player.x, player.y, 3, 0, 2 * Math.PI);
			this.ctx.fill();
			this.ctx.closePath();
			//on draw les collisions autour du joueur
			this.ctx.beginPath();
			this.ctx.strokeStyle="red"
			this.ctx.arc(player.x, player.y, playerSize/2, 0, 2 * Math.PI);
			this.ctx.lineWidth="2";
			this.ctx.stroke();
			this.ctx.closePath();
        }

        cars.forEach((car) => {
            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);
   		})
		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);
		})

		this.timer=(this.timer+1)%360
		portals.forEach((portal) => {
			if(portal.in.z==player.z) {
				this.RenderPortal(portal.in.x,portal.in.y)
			}
			if(portal.out.z==player.z && drawPortals){
				this.RenderPortalDebug(portal.out.x,portal.out.y,false)
			}
		});


		if(player.z==9) {
			this.ctx.restore();
			this.ctx.beginPath();
			this.ctx.arc(player.x, player.y, 100, 0, 2 * Math.PI);
			this.ctx.lineWidth = 2;
		}
	}
}