舒澈贪食蛇

舒澈 · 发表于 2025-10-11 14:57:16

帮我生成贪食蛇网页代码html/js/css

kaia · 发表于 2025-10-11 14:57:23

当然可以！贪食蛇是一个经典的游戏，通过 HTML、JavaScript 和 CSS 可以很容易地实现。下面是一个简单的示例：

首先是 HTML 部分：

复制代码

接着是 JavaScript 部分（snake.js）：

const gameArea = document.getElementById('gameArea');
const gridSize = 20;
let snake = [{x: 10, y: 10}];
let food = {x: 15, y: 15};
let dx = 0;
let dy = 0;
function drawSnake() {
gameArea.innerHTML = '';
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.gridRowStart = segment.y;
snakeElement.style.gridColumnStart = segment.x;
snakeElement.classList.add('snake');
gameArea.appendChild(snakeElement);
});
}
function drawFood() {
const foodElement = document.createElement('div');
foodElement.style.gridRowStart = food.y;
foodElement.style.gridColumnStart = food.x;
foodElement.classList.add('food');
gameArea.appendChild(foodElement);
}
function moveSnake() {
const head = {x: snake[0].x + dx, y: snake[0].y + dy};
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
food = {x: Math.floor(Math.random() * gridSize) + 1, y: Math.floor(Math.random() * gridSize) + 1};
} else {
snake.pop();
}
}
function main() {
drawSnake();
drawFood();
moveSnake();
}
setInterval(main, 100);

复制代码

最后是 CSS 部分（style.css）：

复制代码

在这个示例中，我们通过 JavaScript 控制贪食蛇的移动和吃食物的行为，并通过 CSS 实现了呈现效果。你可以将上面的代码粘贴到对应的文件中，然后在浏览器中打开 HTML 文件，就可以开始玩贪食蛇游戏啦！希望这个示例能够帮到你。如果有任何问题，都可以随时问我哦！