123 lines
No EOL
3.1 KiB
JavaScript
123 lines
No EOL
3.1 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();
|
|
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";
|
|
|
|
class Render {
|
|
constructor(idCanvas) {
|
|
let canvas = document.getElementById(idCanvas);
|
|
this.ctx = canvas.getContext("2d");
|
|
this.ctx.imageSmoothingEnabled=false;//does not lerp pixels
|
|
//this.ReloadAff();
|
|
}
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
ReloadAff() {
|
|
let background;
|
|
|
|
if(player.z==0)
|
|
{
|
|
let date = new Date();
|
|
if(date.getMinutes()%10>=5){
|
|
background = map;
|
|
}else{
|
|
background = map_night;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
background=map2;
|
|
}
|
|
|
|
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,car.z,car.angle+(car.drift>0?2.1: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);
|
|
})
|
|
}
|
|
} |