Skip to content
Snippets Groups Projects
Commit 70c27976 authored by ys678's avatar ys678
Browse files

Added snakehead center feature and added xy coordinate for player's location

parent 62ca1099
No related branches found
No related tags found
1 merge request!11Test of collision&growing
......@@ -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>
......@@ -37,54 +37,89 @@
let board = event.data;
console.log(board);
widthStep = width / board[0].length;
heightStep = height / board.length;
// 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 === 0) {
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(
j * widthStep + 1,
i * heightStep + 1,
renderX * widthStep + 1,
renderY * heightStep + 1,
widthStep - 2,
heightStep - 2,
heightStep - 2
);
}
if (board[i][j].type === 1) {
if (cell.type === 1) {
ctx.fillStyle = "red";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
renderX * widthStep + 1,
renderY * heightStep + 1,
widthStep - 2,
heightStep - 2,
heightStep - 2
);
ctx.fillStyle = "white";
}
if (board[i][j].type === 2) {
if (cell.type === 2) {
ctx.fillStyle = "red";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
renderX * widthStep + 1,
renderY * heightStep + 1,
widthStep - 2,
heightStep - 2,
heightStep - 2
);
ctx.fillStyle = "white";
}
if (board[i][j].type === 3) {
if (cell.type === 3) {
ctx.fillStyle = "blue";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
renderX * widthStep + 1,
renderY * heightStep + 1,
widthStep - 2,
heightStep - 2,
heightStep - 2
);
ctx.fillStyle = "white";
}
if (board[i][j].type === 4) {
if (cell.type === 4) {
ctx.fillStyle = "yellow";
ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
renderX * widthStep + 1,
renderY * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment