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

项芯悦 · 发表于 2025-9-30 15:29:32

[backcolor=var(--chat-bg-color,transparent)][color=var(--s-color-text-secondary)][backcolor=var(--chat-bg-color,transparent)][color=var(--s-color-text-secondary)][color=var(--s-color-text-secondary)][backcolor=var(--s-color-bg-trans)]帮我生成一个贪吃蛇的代码

[backcolor=var(--chat-bg-color,transparent)][color=var(--s-color-text-secondary)][color=var(--s-color-text-tertiary,rgba(0,0,0,0.4))]

[color=var(--s-color-text-secondary)][backcolor=var(--s-color-bg-trans)]帮我生成一个贪吃蛇的代码

[backcolor=var(--chat-bg-color,transparent)][color=var(--s-color-text-secondary)][color=var(--s-color-text-tertiary,rgba(0,0,0,0.4))]

kaia · 发表于 2025-9-30 15:29:46

嗨！我很乐意帮助你生成一个贪吃蛇游戏的代码。在网页编程中，我们通常使用HTML、CSS和JavaScript来创建交互式的游戏。下面是一个简单的贪吃蛇游戏代码示例：

<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.snake {
width: 10px;
height: 10px;
background-color: green;
position: absolute;
}
.food {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script>
const gameBoard = document.getElementById('game-board');
let snake = [{ x: 200, y: 200 }];
let food = { x: 0, y: 0 };
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 drawFood() {
const foodElement = document.createElement('div');
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
foodElement.classList.add('food');
gameBoard.appendChild(foodElement);
}
function moveSnake() {
const head = { x: snake[0].x, y: snake[0].y };
switch (direction) {
case 'up':
head.y -= 10;
break;
case 'down':
head.y += 10;
break;
case 'left':
head.x -= 10;
break;
case 'right':
head.x += 10;
break;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
createFood();
} else {
snake.pop();
}
}
function createFood() {
food.x = Math.floor(Math.random() * 40) * 10;
food.y = Math.floor(Math.random() * 40) * 10;
}
drawFood();
drawSnake();
let direction = 'right';
window.addEventListener('keydown', e => {
switch(e.key) {
case 'ArrowUp':
direction = 'up';
break;
case 'ArrowDown':
direction = 'down';
break;
case 'ArrowLeft':
direction = 'left';
break;
case 'ArrowRight':
direction = 'right';
break;
}
});
setInterval(() => {
moveSnake();
drawFood();
drawSnake();
}, 100);
</script>
</body>
</html>

复制代码

你可以将这段代码复制粘贴到一个HTML文件中，并在浏览器中打开以查看贪吃蛇游戏。玩家可以通过键盘的方向键控制蛇的移动方向，每吃到一个食物，蛇的长度会增加。希望这个代码能帮助你理解如何创建贪吃蛇游戏！如果有任何问题，都可以随时向我提问哦！