我正在尝试将蛇编码为JavaScript中的浏览器游戏，用于学校项目，并且我想使用外部.js文件来完成它 - 而不仅仅是在.html中。 我现在的问题是：当我在 html 正文中调用 main 函数时，只有画布被我的脚本修改，而不是蛇部分。
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Snake - The Browser Game</title>
</head>
<body onload='main()'>
<canvas id="gameCanvas">
</canvas>
<script type="text/javascript" src="snake.js"></script>
</body>
</html>
样式.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);
}
我对所有这些东西都很陌生，经过大量谷歌搜索和询问 gpt 后找不到答案......
您需要设置画布的宽度/高度。如果您不指定它们，则默认值为 300x150。由于您的蛇位于 y:200，因此它超出了可见区域。
阅读HTMLCanvasElement：宽度属性和HTMLCanvasElement：高度属性
使用
<canvas id="gameCanvas" width="400" height="400">
</canvas>
你的整条蛇都超出了画布，因为你的画布是 300x150
你必须通过属性改变画布的宽度和高度
更改样式只会拉伸当前像素
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
}]
main()
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);
}#gameCanvas {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<canvas id="gameCanvas" height="400" width="400"></canvas>