map

class.js

@@ -1,5 +1,5 @@
-const mapWidth = 210.;
-const mapHeith = 100.;
+let mapWidth = 210.;
+let mapHeith = 100.;
 const playerSize = 50.;
 const playerSpeed=2.;
 const halfSqrtTwo=0.70710678118;

game.js

@@ -1,4 +1,4 @@
-Renderer = new Render("canvas");
+Renderer = new Render("canvas", "./assets/map/map7_recadr.png");
 
 let players = [new Player(1, 100, 50, "rubiks"),
 			   new Player(2, 500, 70, "atsuyo"),

render.js

@@ -1,8 +1,9 @@
 class Render {
-	constructor(id) {
+	constructor(id, mapsrc) {
 		this.canvas = document.getElementById(id);
 		this.ctx = canvas.getContext("2d");
 		this.players = [];
+		this.mapsrc=mapsrc
 		this.ReloadAff();
 	}
 
@@ -21,9 +22,17 @@ class Render {
 	}
 
 	ReloadAff() {
-		this.ctx.fillStyle = "red";
+		/*this.ctx.fillStyle = "red";
    		this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
-
+		*/
+		console.log(this.ctx.canvas.width)
+		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);
    		})