Skip to content
Snippets Groups Projects

Resolve "Define Object for Cell"

Merged Resolve "Define Object for Cell"
5-rooms into main
Merged jjd358 requested to merge 5-rooms into main
Compare
and
4 files
+ 423
− 230
Compare changes
  • Side-by-side
  • Inline

Files

public/game.html 0 → 100644
+ 141
− 0
<!doctype html>
<html lang="en">
<head>
<title>WebSocket Example</title>
</head>
<body>
<h1>WebSocket Client</h1>
<input type="text" id="messageInput" placeholder="Type a message..." />
<button id="sendButton">Send</button>
<div id="messages"></div>
<div id="game">
<canvas id="gameCanvas" width="800" height="600"></canvas>
</div>
<script>
let pathParts = window.location.pathname.split("/");
let roomId = pathParts[pathParts.length - 1];
const joinMessage = { type: "join", data: `${roomId}` };
let moveMessage = { type: "move", data: "up", pid: 0 };
const socket = new WebSocket("ws://127.0.0.1:3001", `${roomId}`);
const canvas = document.getElementById("gameCanvas");
const width = canvas.width;
const height = canvas.height;
let gameBoardHandler = (event) => {
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "white";
let board = event.data;
console.log(board);
widthStep = width / board[0].length;
heightStep = height / board.length;
for (let i = 0; i < board.length; i++) {
for (let j = 0; j < board[i].length; j++) {
if (board[i][j].type === 0) {
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
}
if (board[i][j].type === 1) {
ctx.fillStyle = "red";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
ctx.fillStyle = "white";
}
if (board[i][j].type === 2) {
ctx.fillStyle = "red";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
ctx.fillStyle = "white";
}
if (board[i][j].type === 3) {
ctx.fillStyle = "blue";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
ctx.fillStyle = "white";
}
}
}
};
let newUserHandler = (event) => {
moveMessage.pid = event.data;
};
socket.addEventListener("open", () => {
console.log("Connected to server");
socket.send(JSON.stringify(joinMessage));
});
socket.addEventListener("message", (event) => {
try {
let msg = JSON.parse(event.data);
if (msg.type === "gameBoard") {
gameBoardHandler(msg);
} else if (msg.type === "newUser") {
newUserHandler(msg);
} else {
const messages = document.getElementById("messages");
const messageElement = document.createElement("div");
messageElement.innerText = event.data;
messages.appendChild(messageElement);
}
} catch {
console.log(event.data);
}
});
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowUp") {
moveMessage.data = "up";
socket.send(JSON.stringify(moveMessage));
}
if (event.key === "ArrowDown") {
moveMessage.data = "down";
socket.send(JSON.stringify(moveMessage));
}
if (event.key === "ArrowLeft") {
moveMessage.data = "left";
socket.send(JSON.stringify(moveMessage));
}
if (event.key === "ArrowRight") {
moveMessage.data = "right";
socket.send(JSON.stringify(moveMessage));
}
});
document.getElementById("sendButton").addEventListener("click", () => {
const messageInput = document.getElementById("messageInput");
const message = messageInput.value;
socket.send(message);
messageInput.value = "";
});
</script>
</body>
</html>