张嫣然

张嫣然 · 发表于 2025-10-14 09:41:02

帮我写一个贪吃蛇代码

张嫣然 · 发表于 2025-11-4 09:39:04

帮我把css提取出来

黄思齐是你爹 · 发表于 2025-10-14 14:21:58

你真棒

kaia · 发表于 2025-10-14 09:41:16

当然可以帮你写一个简单的贪吃蛇游戏代码！我们可以使用HTML、CSS和JavaScript来实现这个游戏。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
}
.snake {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}
.food {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script>
const board = document.getElementById('game-board');
const snake = [{x: 200, y: 200}];
let food = {x: 0, y: 0};
let direction = 'right';
function createSnake() {
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.className = 'snake';
snakeElement.style.left = segment.x + 'px';
snakeElement.style.top = segment.y + 'px';
board.appendChild(snakeElement);
});
}
function createFood() {
food.x = Math.floor(Math.random() * 20) * 20;
food.y = Math.floor(Math.random() * 20) * 20;
const foodElement = document.createElement('div');
foodElement.className = 'food';
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
board.appendChild(foodElement);
}
function moveSnake() {
let headX = snake[0].x;
let headY = snake[0].y;
if (direction === 'right') {
headX += 20;
} else if (direction === 'left') {
headX -= 20;
} else if (direction === 'down') {
headY += 20;
} else if (direction === 'up') {
headY -= 20;
}
const newHead = {x: headX, y: headY};
snake.unshift(newHead);
if (headX === food.x && headY === food.y) {
createFood();
} else {
snake.pop();
}
updateSnake();
}
function updateSnake() {
const snakeElements = document.querySelectorAll('.snake');
snakeElements.forEach((element, index) => {
element.style.left = snake[index].x + 'px';
element.style.top = snake[index].y + 'px';
});
}
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 === 'ArrowDown' || key === 's') && direction !== 'up') {
direction = 'down';
} else if ((key === 'ArrowUp' || key === 'w') && direction !== 'down') {
direction = 'up';
}
}
createSnake();
createFood();
setInterval(moveSnake, 100);
document.addEventListener('keydown', changeDirection);
</script>
</body>
</html>

复制代码

你可以将这段代码复制粘贴到一个HTML文件中，然后在浏览器中打开，就可以开始玩这个简单的贪吃蛇游戏了！游戏板的大小为400x400像素，蛇每隔100毫秒移动一次。通过方向键或WASD控制蛇的移动方向，让蛇吃到红色的食物。祝玩得开心！