Обработка ширины/высоты холста html/css ⇐ Html

[Anonymous]

Я пытаюсь написать змею как браузерную игру на Javascript для школьного проекта, и я хочу сделать это с помощью внешнего файла .js, а не только в .html.
Моя проблема теперь в следующем: когда я вызываю основную функцию в своем теле html, мой скрипт изменяет только холст, а не части змеи.
index.html:

Код: Выделить всё

Snake - The Browser Game

style.css:

Код: Выделить всё

#gameCanvas {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

snake.js:

Код: Выделить всё

const board_border = 'black';
const board_background = "white";
const snake_col = 'lightblue';
const snake_border = 'darkblue';

const snakeboard = document.getElementById('gameCanvas');
const snakeboard_ctx = gameCanvas.getContext('2d');

let snake = [{x: 200, y: 200}, {x: 190, y: 200}, {x: 180, y: 200}, {x: 170, y: 200}, {x: 160, y: 200}]

function main(){
clearCanvas();
drawSnake();
}

function clearCanvas(){
snakeboard_ctx.fillStyle = board_background;
snakeboard_ctx.strokestyle = board_border;
snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
}

function drawSnake(){
snake.forEach(drawSnakeparts);
}

function drawSnakeparts(snakePart){
snakeboard.fillStyle = snake_col;
snakeboard.strokeStyle = snake_border;
snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

Я новичок во всем этом, не смог найти ответ после долгих поисков в Google и вопросов gpt...

Подробнее здесь: https://stackoverflow.com/questions/772 ... t-handling