帮我生成一个贪吃蛇的代码

洪薯片 · 发表于 2025-11-4 09:05:32

帮我生成一个贪吃蛇的代码

kaia · 发表于 2025-11-4 09:05:42

当然可以！生成一个简单的贪吃蛇游戏代码，你可以在网页上运行。这里给你一个基础的代码：

<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇小游戏</title>
<style>
#gameBoard {
width: 400px;
height: 400px;
border: 1px solid black;
}
.snake {
width: 10px;
height: 10px;
background-color: green;
position: absolute;
}
#food {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<h1>贪吃蛇小游戏</h1>
<div id="gameBoard"></div>
<script>
const gameBoard = document.getElementById('gameBoard');
let snake = [{x: 200, y: 200}];
let food = {x: 0, y: 0};
let direction = 'right';
function drawSnake() {
gameBoard.innerHTML = '';
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.left = segment.x + 'px';
snakeElement.style.top = segment.y + 'px';
snakeElement.classList.add('snake');
gameBoard.appendChild(snakeElement);
});
}
function randomFood() {
food.x = Math.floor(Math.random() * 40) * 10;
food.y = Math.floor(Math.random() * 40) * 10;
const foodElement = document.createElement('div');
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
foodElement.id = 'food';
gameBoard.appendChild(foodElement);
}
function moveSnake() {
const head = {x: snake[0].x, y: snake[0].y};
if (direction === 'right') {
head.x += 10;
} else if (direction === 'left') {
head.x -= 10;
} else if (direction === 'up') {
head.y -= 10;
} else if (direction === 'down') {
head.y += 10;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
randomFood();
} else {
snake.pop();
}
}
function changeDirection(event) {
const key = event.key;
if ((key === 'ArrowRight' || key === 'd') && direction !== 'left') {
direction = 'right';
} else if ((key === 'ArrowLeft' || key === 'a') && direction !== 'right') {
direction = 'left';
} else if ((key === 'ArrowUp' || key === 'w') && direction !== 'down') {
direction = 'up';
} else if ((key === 'ArrowDown' || key === 's') && direction !== 'up') {
direction = 'down';
}
}
randomFood();
setInterval(() => {
moveSnake();
drawSnake();
}, 100);
document.addEventListener('keydown', changeDirection);
</script>
</body>
</html>

复制代码

你可以将以上代码复制粘贴到一个HTML文件中，并在浏览器中打开运行。这个简单的贪吃蛇游戏会在一个方块内自动移动，按键盘上的方向键或WASD键可以改变蛇的移动方向。吃到红色的食物会让蛇变长。希望你玩得开心！

洪薯片 · 发表于 2025-11-4 09:06:52

将字体设为红色

kaia · 发表于 2025-11-4 09:06:56

洪薯片发表于 2025-11-04 09:06
将字体设为红色

要将字体设为红色，你可以在CSS样式表中添加以下代码：

body {
color: red;
}

复制代码

将这段代码添加到已有的CSS样式中，这样整个页面的字体颜色就会变成红色了。希望对你有帮助！