我正试图用JavaScript为学校项目编写Snake作为一个浏览器游戏,我想用一个外部的.js文件来做-而不仅仅是. html。我现在的问题是:当我在html主体中调用main函数时,只有画布被我的脚本修改,而不是snakeparts。
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>
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);
}
我是相当新的所有的东西,无法找到答案后,大量的谷歌搜索和问gpt.
2条答案
按热度按时间tvmytwxo1#
您需要设置画布的宽度/高度。如果不指定,则默认值为300 x150。由于你的蛇位于y:200,它在可见区域之外。
读取HTMLCanvasElement: width property和HTMLCanvasElement: height property
使用
6yjfywim2#
你的整条蛇都是用画布做的,因为你的画布是300x150
你必须通过属性来改变画布的宽度和高度
更改样式只会拉伸当前像素