94 lines
No EOL
2.4 KiB
JavaScript
94 lines
No EOL
2.4 KiB
JavaScript
const imgPlayer = new Image();
|
|
const imgBullet = new Image();
|
|
const imgCar = new Image();
|
|
const map = new Image();
|
|
const map2 = new Image();
|
|
imgPlayer.src = "./assets/body.png";
|
|
imgBullet.src = "./assets/bullet.png";
|
|
imgCar.src = "./assets/car.png";
|
|
map.src = "./assets/map_principale.png"
|
|
map2.src = "./assets/map_secondaire.png";
|
|
|
|
class Render {
|
|
constructor(idCanvas) {
|
|
let canvas = document.getElementById(idCanvas);
|
|
this.ctx = canvas.getContext("2d");
|
|
//this.ReloadAff();
|
|
}
|
|
|
|
RenderPlayer(player,client) {
|
|
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";
|
|
this.ctx.fillText(player.name,x-player.name.length*10/3,y-playerSize/1.8);
|
|
if(client) {
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
RenderCar(x,y,angle) {
|
|
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();
|
|
}
|
|
}
|
|
|
|
RenderBullet(x,y) {
|
|
/*
|
|
if(this.map==1) {
|
|
x = x-2000;
|
|
y = y-2000;
|
|
}*/
|
|
this.ctx.save();
|
|
this.ctx.translate(x, y);
|
|
this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
|
|
this.ctx.restore();
|
|
}
|
|
|
|
ReloadAff() {
|
|
|
|
//const fond = new Image();
|
|
if(player.x >= 2000 && player.y >=2000) {
|
|
this.map=1;
|
|
} else {
|
|
this.map=0;
|
|
}
|
|
|
|
if(this.map==0) {
|
|
let fond = map;
|
|
} else {
|
|
let fond = map2;
|
|
}
|
|
|
|
this.ctx.canvas.width = fond.width;
|
|
this.ctx.canvas.height = fond.height;
|
|
this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith);
|
|
this.RenderPlayer(player,true);
|
|
players.forEach((player) => {
|
|
this.RenderPlayer(player,false);
|
|
})
|
|
bullets.forEach((bullet) => {
|
|
this.RenderBullet(bullet.x,bullet.y);
|
|
});
|
|
}
|
|
} |