【发布时间】：2023-01-10 12:02:19
【问题描述】：
这是我用 JavaScript 创建的贪吃蛇游戏。在我向其中添加开始/重置按钮元素之前，游戏一直在运行。直到机制、乐谱和设计，代码都没有错误。我能理解开始按钮的错误在哪里。如果有人可以纠正它，将会有所帮助。我在下面包含了我的整个 javascript。此外，如果有人能指导我找到我可以了解这些的资源，那将很有帮助
//board
var blockSize = 25;
var rows = 20;
var cols = 20;
var board;
var context;
//snake head
var snakeX = blockSize * 5; //control the size
var snakeY = blockSize * 5;
var velocityX = 0;
var velocityY = 0;
var snakeBody = []; //control the size
//food
var foodX;
var foodY;
var gameOver = false;
// game status
let gameOver = true;
let gameloop;
//score
var score = 0;
window.onload = function() {
board = document.getElementById("board");
context = board.getContext("2d");
// Set the size of the canvas
board.height = rows * blockSize;
board.width = cols * blockSize;
// Add the "Start Game" and "Reset Game" buttons
const startButton = document.createElement("button");
startButton.innerHTML = "Start Game";
startButton.addEventListener("click", startGame);
document.body.appendChild(startButton);
const resetButton = document.createElement("button");
resetButton.innerHTML = "Reset Game";
resetButton.addEventListener("click", resetGame);
document.body.appendChild(resetButton);
}
// Start the game
function startGame() {
// Reset the game state
gameOver = false;
snakeX = blockSize * 5;
snakeY = blockSize * 5;
velocityX = 0;
velocityY = 0;
snakeBody = [];
score = 0;
// Place the initial food
placeFood();
//listen for change in direction
document.addEventListener("keyup", changeDirection);
// Start the game loop
gameLoop = setInterval(update, 1000 / 10);
}
// Reset the game
function resetGame() {
// End the game
clearInterval(gameLoop);
// Reset the game state
gameOver = true;
snakeX = blockSize * 5;
snakeY = blockSize * 5;
velocityX = 0;
velocityY = 0;
snakeBody = [];
score = 0;
}
// Update the game state
function update() {
if (gameOver) {
return;
}
// update();
setInterval(update, 1000 / 10); //100 milliseconds change this to control the speed of snake
}
// Main game loop
function update() {
// End the game if it's over
if (gameOver) {
clearInterval(gameLoop);
return;
}
context.fillStyle = "black";
context.fillRect(0, 0, board.width, board.height);
context.fillStyle = "red";
context.fillRect(foodX, foodY, blockSize, blockSize);
//check if snake has eaten food
if (snakeX == foodX && snakeY == foodY) {
snakeBody.push([foodX, foodY]);
placeFood(); //eat the food
score++;
}
for (let i = snakeBody.length - 1; i > 0; i--) {
snakeBody[i] = snakeBody[i - 1];
}
if (snakeBody.length) {
snakeBody[0] = [snakeX, snakeY];
}
context.fillStyle = "lime";
snakeX += velocityX * blockSize;
snakeY += velocityY * blockSize;
//draw snake
context.fillRect(snakeX, snakeY, blockSize, blockSize);
for (let i = 0; i < snakeBody.length; i++) {
context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize);
}
//check for game over conditions
if (snakeX < 0 || snakeX > cols * blockSize || snakeY < 0 || snakeY > rows * blockSize) {
gameOver = true;
alert("Game Over"); //boundaries conditions
}
for (let i = 0; i < snakeBody.length; i++) {
if (snakeX == snakeBody[i][0] && snakeY == snakeBody[i][1]) {
gameOver = true;
alert("Game Over"); //collision with body
}
}
//update the score display
document.getElementById("score").innerHTML = score;
}
function changeDirection(e) {
if (e.code == "ArrowUp" && velocityY != 1) {
velocityX = 0;
velocityY = -1;
} else if (e.code == "ArrowDown" && velocityY != -1) {
velocityX = 0;
velocityY = 1;
} else if (e.code == "ArrowLeft" && velocityX != 1) {
velocityX = -1;
velocityY = 0;
} else if (e.code == "ArrowRight" && velocityX != -1) {
velocityX = 1;
velocityY = 0;
}
}
function placeFood() {
//(0-1) * cols -> (0-19.9999) -> (0-19) * 25
foodX = Math.floor(Math.random() * cols) * blockSize;
foodY = Math.floor(Math.random() * rows) * blockSize;
}body {
font-family: 'Courier New', Courier, monospace;
text-align: center;
}
#score {
position: relative;
top: 9rem;
}<body>
<h1>Snake</h1>
<canvas id="board"></canvas>
<div id="score">0</div>
</body>【问题讨论】：
标签： javascript css