ajout de la partie gameplay pure

2026-07-31 02:47:01 +02:00
parent 7edf7b0225
commit 914dbe2368
2 changed files with 84 additions and 1 deletions
--- a/client/index.html
+++ b/client/index.html
@@ -7,13 +7,26 @@
 <body>
  <h1>Bonjour !</h1>
  <p>Ceci est une page statique servie par Express.</p>
+  <canvas id="maze" width="490" height="490" style="border: 1px solid #333; display: none;"></canvas>
  <input type="text" id="input" placeholder="message">
  <button id="sendBtn">Envoyer</button>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
+    let myRole = null;
    console.log("Connecte au serveur, id :", socket.id);
-    socket.on("role", (role) => console.log("Mon rôle :", role));
+    socket.on("role", (role) => {
+      console.log("Mon role :", role);
+      myRole = role;
+      
+      if (role === "explorateur"){
+        canvas.style.display = "block";
+        render();
+      } else {
+        canvas.style.display = "none";
+      }
+    });
+
    socket.on("status", (msg) => console.log("Status :", msg));
    document.getElementById("sendBtn").addEventListener("click", () => {
      const text = document.getElementById("input").value;
@@ -22,6 +35,72 @@
    socket.on("message", (data) => {
      console.log("message recu du partenaire :", data);
    });
+  
+    const maze = [
+      [1,1,1,1,1,1,1],
+      [1,0,0,0,1,0,1],
+      [1,0,1,0,1,0,1],
+      [1,0,1,0,1,0,1],
+      [1,0,1,1,1,0,1],
+      [1,0,0,0,0,0,1],
+      [1,1,2,1,1,2,1],
+    ];
+    
+    const canvas = document.getElementById("maze");
+    const ctx = canvas.getContext("2d");
+    const cellSize = 70;
+    const player = { x : 1, y : 1};
+
+    
+    function drawMaze(){
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      for (let y = 0; y < maze.length; y++){
+        for (let x = 0; x < maze[y].length; x++){
+          if (maze[y][x] === 1)ctx.fillStyle = "#333";
+          else if (maze[y][x] === 2) ctx.fillStyle = "gold";
+          else ctx.fillStyle = "#eee";
+          
+          ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
+        }
+      }
+    }
+
+    function drawPlayer(){
+      ctx.fillStyle = "red";
+      ctx.beginPath();
+      ctx.arc(
+        player.x * cellSize + cellSize / 2,
+        player.y * cellSize + cellSize / 2,
+        cellSize / 3,
+        0, Math.PI * 2
+      );
+      ctx.fill();
+    }
+
+    function render(){
+      drawMaze();
+      drawPlayer();
+    }
+
+    document.addEventListener("keydown", (e) => {
+      if (myRole !== "explorateur") return;
+    
+      let newX = player.x;
+      let newY = player.y;
+
+      if (e.key === "ArrowUp") newY--;
+      else if (e.key === "ArrowDown") newY++;
+      else if (e.key === "ArrowLeft") newX--;
+      else if (e.key === "ArrowRight") newX++;
+      else return;
+
+      if (maze[newY][newX] === 0 || maze[newY][newX] === 2){
+        player.x = newX;
+        player.y = newY;
+        render();
+      }
+    });
  </script>
  </body>
 </html>