107 lines
2.7 KiB
HTML
107 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ma page</title>
|
|
</head>
|
|
<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 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;
|
|
socket.emit("message", text);
|
|
});
|
|
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>
|