Skip to content
Snippets Groups Projects

Test of collision&growing

Closed Test of collision&growing
test-of-collision&growing into main
Closed jjd358 requested to merge test-of-collision&growing into main
Compare
and
2 files
+ 104
− 69
Compare changes
  • Side-by-side
  • Inline

Files

public/game.html
+ 102
− 67
@@ -5,7 +5,7 @@
</head>
<body>
<h1>WebSocket Client</h1>
<h1>WebSocket Client <span id="coordinates">(0, 0)</span></h1>
<input type="text" id="messageInput" placeholder="Type a message..." />
<button id="sendButton">Send</button>
<div id="messages"></div>
@@ -27,72 +27,107 @@
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";
}
if (board[i][j].type === 4) {
ctx.fillStyle = "yellow";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
ctx.fillStyle = "white";
}
}
}
};
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);
// head position
let snakeHead = null;
for (let i = 0; i < board.length; i++) {
for (let j = 0; j < board[i].length; j++) {
if (board[i][j].type === 1) {
snakeHead = board[i][j];
break;
}
}
if (snakeHead) break;
}
if (!snakeHead) {
console.error("No snake head found!");
return;
}
// Update the coordinates
let coordinatesElement = document.getElementById("coordinates");
coordinatesElement.textContent = `(${snakeHead.x}, ${snakeHead.y})`;
// Calculate the view window around the snake's head
const viewSize = 10;
const halfViewSize = Math.floor(viewSize / 2);
const startX = Math.max(0, snakeHead.x - halfViewSize);
const startY = Math.max(0, snakeHead.y - halfViewSize);
const endX = Math.min(board[0].length, snakeHead.x + halfViewSize + 1);
const endY = Math.min(board.length, snakeHead.y + halfViewSize + 1);
widthStep = width / viewSize;
heightStep = height / viewSize;
// Only the 10x10 area around the snake's head
for (let i = startY; i < endY; i++) {
for (let j = startX; j < endX; j++) {
let cell = board[i][j];
let renderX = j - startX;
let renderY = i - startY;
if (cell.type === 0) {
ctx.fillRect(
renderX * widthStep + 1,
renderY * heightStep + 1,
widthStep - 2,
heightStep - 2
);
}
if (cell.type === 1) {
ctx.fillStyle = "red";
ctx.fillRect(
renderX * widthStep + 1,
renderY * heightStep + 1,
widthStep - 2,
heightStep - 2
);
ctx.fillStyle = "white";
}
if (cell.type === 2) {
ctx.fillStyle = "red";
ctx.fillRect(
renderX * widthStep + 1,
renderY * heightStep + 1,
widthStep - 2,
heightStep - 2
);
ctx.fillStyle = "white";
}
if (cell.type === 3) {
ctx.fillStyle = "blue";
ctx.fillRect(
renderX * widthStep + 1,
renderY * heightStep + 1,
widthStep - 2,
heightStep - 2
);
ctx.fillStyle = "white";
}
if (cell.type === 4) {
ctx.fillStyle = "yellow";
ctx.fillRect(
renderX * widthStep + 1,
renderY * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
ctx.fillStyle = "white";
}
}
}
};
let newUserHandler = (event) => {
moveMessage.pid = event.data;