Hatmos/echoes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout de la partie gameplay pure

Browse Source
This commit is contained in:
Thomas LETELLIER
2026-07-31 02:47:01 +02:00
parent 7edf7b0225
commit 914dbe2368
2 changed files with 84 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -0,0 +1,4 @@
# Echoes
Echoes est un jeu collaboratif, disponible sur navigateur, qui met en scene deux prisonniers d'un complexe industriel abandonne.
Pour s'echapper avant d'etre tues par les fumees toxiques du complexe. Les deux joueurs doivent faire preuve de communication en decrivant les salles et en decryptant les consignes d'evacuation diffuses dans les salles de regroupement.

81
client/index.html
View File

@@ -7,13 +7,26 @@
<body> <body>
<h1>Bonjour !</h1> <h1>Bonjour !</h1>
<p>Ceci est une page statique servie par Express.</p> <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"> <input type="text" id="input" placeholder="message">
<button id="sendBtn">Envoyer</button> <button id="sendBtn">Envoyer</button>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script> <script>
const socket = io(); const socket = io();
let myRole = null;
console.log("Connecte au serveur, id :", socket.id); 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)); socket.on("status", (msg) => console.log("Status :", msg));
document.getElementById("sendBtn").addEventListener("click", () => { document.getElementById("sendBtn").addEventListener("click", () => {
const text = document.getElementById("input").value; const text = document.getElementById("input").value;
@@ -22,6 +35,72 @@
socket.on("message", (data) => { socket.on("message", (data) => {
console.log("message recu du partenaire :", 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> </script>
</body> </body>
</html> </html>