HTML/CSS Canvas ширина/обработка высоты ⇐ Html

[Anonymous]

Я пытаюсь кодировать Snake как Browsercame в JavaScript для школьного проекта, и я хочу сделать это с помощью внешнего файла .js - не только в .html.
Моя проблема сейчас: когда я называю основную функцию в своем HTML -корпусе, только Canvas изменяется с помощью моего скрипта, а не SnakeParts. />

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

Snake - The Browser Game








< /code>
style.css:
#gameCanvas {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
< /code>
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);
}

Я довольно новичок во всем этом, не смог найти ответ после большого количества гуглей и спросить GPT ...

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