2023-12-05 15:01:15 +01:00
|
|
|
const img = new Image();
|
2023-12-06 08:39:00 +01:00
|
|
|
img.src = "./assets/body.png";
|
2023-12-05 15:01:15 +01:00
|
|
|
|
2023-11-15 09:09:13 +01:00
|
|
|
class Render {
|
2023-12-05 15:01:15 +01:00
|
|
|
|
2023-11-15 09:09:13 +01:00
|
|
|
constructor(id, mapsrc) {
|
|
|
|
this.canvas = document.getElementById(id);
|
|
|
|
this.ctx = canvas.getContext("2d");
|
|
|
|
this.players = [];
|
|
|
|
this.mapsrc=mapsrc
|
|
|
|
this.ReloadAff();
|
|
|
|
}
|
|
|
|
|
|
|
|
AddPlayer(player) {
|
2023-12-05 15:01:15 +01:00
|
|
|
this.players.push(player);
|
2023-11-15 09:09:13 +01:00
|
|
|
}
|
|
|
|
|
2023-11-29 15:53:35 +01:00
|
|
|
RemPlayer(id) {
|
2023-12-05 15:01:15 +01:00
|
|
|
for(let i=0;i<this.players.length;i++)
|
|
|
|
{
|
|
|
|
if(this.players[i].id==id)
|
|
|
|
{
|
|
|
|
this.players.splice(i,1);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2023-11-29 15:53:35 +01:00
|
|
|
}
|
|
|
|
|
2023-11-15 09:09:13 +01:00
|
|
|
RenderPlayer(player) {
|
|
|
|
this.ctx.save();
|
|
|
|
this.ctx.translate(player.x, player.y);
|
|
|
|
this.ctx.rotate(player.angle);
|
|
|
|
this.ctx.drawImage(img, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
|
|
|
|
this.ctx.restore();
|
2023-12-06 08:39:00 +01:00
|
|
|
this.ctx.fillStyle = 'white';
|
2023-12-05 15:32:07 +01:00
|
|
|
this.ctx.font="10pt arial";
|
|
|
|
this.ctx.fillText(player.name,player.x-player.name.length*10/3,player.y-playerSize/1.8);
|
2023-11-15 09:09:13 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
ReloadAff() {
|
|
|
|
/*this.ctx.fillStyle = "red";
|
|
|
|
this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
|
|
|
|
*/
|
|
|
|
const fond = new Image();
|
|
|
|
fond.src = this.mapsrc;
|
|
|
|
mapWidth = fond.width
|
|
|
|
mapHeith = fond.height
|
|
|
|
this.ctx.canvas.width = mapWidth
|
|
|
|
this.ctx.canvas.height = mapHeith
|
|
|
|
this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith);
|
|
|
|
this.players.forEach((player) => {
|
|
|
|
this.RenderPlayer(player);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|