Implement canvas move width player in the center

client/public/build/main.bundle.js

@@ -60,8 +60,12 @@ var Player = /*#__PURE__*/function () {
     }
   }, {
     key: "move",
-    value: function move(ctx) {
+    value: function move(ctx, mouseX, mouseY) {
       // Déplacer le cercle en fonction de la direction
+      if (mouseX > ctx.canvas.width / 2 - this.radius && mouseX < ctx.canvas.width / 2 + this.radius && mouseY > ctx.canvas.height / 2 - this.radius && mouseY < ctx.canvas.height / 2 + this.radius) {
+        return;
+      }
+      console.log(mouseX, ctx.canvas.width / 2);
       this.x += this.direction.x * this.speed;
       this.y += this.direction.y * this.speed;
       if (this.x < this.radius) this.x = this.radius;
@@ -213,7 +217,7 @@ var canvas = document.querySelector(".map");
 var ctx = canvas.getContext("2d");
 canvas.width = document.documentElement.clientWidth;
 canvas.height = document.documentElement.clientHeight;
-ctx.width = 2000;
+ctx.width = 2300;
 ctx.height = 2000;
 window.addEventListener("resize", function (e) {
   e.preventDefault();
@@ -277,11 +281,7 @@ document.addEventListener("keyup", function (event) {
       break;
   }
 });
-canvas.addEventListener("mousemove", function (event) {
-  var mouseX = event.offsetX;
-  var mouseY = event.offsetY;
-  player.moveTo(mouseX, mouseY);
-});
+var rect = canvas.getBoundingClientRect();
 var sushis = [];
 for (var i = 0; i < 400; i++) {
   var x = Math.random() * ctx.width;
@@ -289,22 +289,36 @@ for (var i = 0; i < 400; i++) {
   var test = new _Ressources_js__WEBPACK_IMPORTED_MODULE_1__.Sushi(x, y, 5);
   sushis.push(test);
 }
+var mouseX;
+var mouseY;
+canvas.addEventListener("mousemove", function (event) {
+  event.preventDefault();
+  mouseX = event.clientX;
+  mouseY = event.clientY;
+  player.moveTo(mouseX, mouseY);
+});
 function update() {
+  ctx.save();
   ctx.clearRect(0, 0, ctx.width, ctx.height);
   ctx.beginPath();
-  ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height);
+
   // Déplacer le joueur en fonction de la direction
   var cameraX = canvas.width / 2 - player.x;
   var cameraY = canvas.height / 2 - player.y;
-  //ctx.translate(cameraX, cameraY);
+  ctx.translate(cameraX, cameraY);
   // Déplacer le contexte pour centrer la caméra ssur le joueur
   // Dessiner le joueur et les autres éléments du jeu
+  ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height);
   sushis.forEach(function (sushi) {
     sushi.draw(ctx);
   });
-  player.draw(ctx, image);
-  player.move(ctx);
+
+  //player.move(ctx);
   player.eatSushi(sushis);
+  player.draw(ctx, image);
+  player.move(ctx, mouseX, mouseY);
+  ctx.restore();
+
   // Déplacer le contexte pour centrer la caméra sur le joueur
   //ctx.translate(-cameraX, -cameraY);
   requestAnimationFrame(update);

client/src/Player.js

@@ -43,8 +43,17 @@ class Player {
     });
   }
 
-  move(ctx) {
+  move(ctx, mouseX, mouseY) {
     // Déplacer le cercle en fonction de la direction
+    if (
+      mouseX > ctx.canvas.width / 2 - this.radius &&
+      mouseX < ctx.canvas.width / 2 + this.radius &&
+      mouseY > ctx.canvas.height / 2 - this.radius &&
+      mouseY < ctx.canvas.height / 2 + this.radius
+    ) {
+      return;
+    }
+    console.log(mouseX, ctx.canvas.width / 2);
     this.x += this.direction.x * this.speed;
     this.y += this.direction.y * this.speed;
 
@@ -62,7 +71,6 @@ class Player {
     const directionY = y - this.y;
 
     const distance = Math.sqrt(directionX ** 2 + directionY ** 2);
-
     this.direction.x = directionX / distance;
     this.direction.y = directionY / distance;
   }

client/src/main.js

@@ -6,7 +6,7 @@ const ctx = canvas.getContext("2d");
 
 canvas.width = document.documentElement.clientWidth;
 canvas.height = document.documentElement.clientHeight;
-ctx.width = 2000;
+ctx.width = 2300;
 ctx.height = 2000;
 
 window.addEventListener("resize", (e) => {
@@ -68,12 +68,7 @@ document.addEventListener("keyup", (event) => {
   }
 });
 
-canvas.addEventListener("mousemove", (event) => {
-  const mouseX = event.offsetX;
-  const mouseY = event.offsetY;
-
-  player.moveTo(mouseX, mouseY);
-});
+const rect = canvas.getBoundingClientRect();
 
 let sushis = [];
 
@@ -84,22 +79,39 @@ for (let i = 0; i < 400; i++) {
   sushis.push(test);
 }
 
+let mouseX;
+let mouseY;
+
+canvas.addEventListener("mousemove", (event) => {
+  event.preventDefault();
+  mouseX = event.clientX;
+  mouseY = event.clientY;
+
+  player.moveTo(mouseX, mouseY);
+});
+
 function update() {
+  ctx.save();
   ctx.clearRect(0, 0, ctx.width, ctx.height);
   ctx.beginPath();
-  ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height);
+
   // Déplacer le joueur en fonction de la direction
   const cameraX = canvas.width / 2 - player.x;
   const cameraY = canvas.height / 2 - player.y;
-  //ctx.translate(cameraX, cameraY);
+  ctx.translate(cameraX, cameraY);
   // Déplacer le contexte pour centrer la caméra ssur le joueur
   // Dessiner le joueur et les autres éléments du jeu
+  ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height);
   sushis.forEach((sushi) => {
     sushi.draw(ctx);
   });
-  player.draw(ctx, image);
-  player.move(ctx);
+
+  //player.move(ctx);
   player.eatSushi(sushis);
+  player.draw(ctx, image);
+  player.move(ctx, mouseX, mouseY);
+  ctx.restore();
+
   // Déplacer le contexte pour centrer la caméra sur le joueur
   //ctx.translate(-cameraX, -cameraY);
   requestAnimationFrame(update);