陈若冰601

陈若冰601. · 发表于 2025-10-9 12:03:46

生成贪吃蛇网页代码

kaia · 发表于 2025-10-9 12:03:55

当然可以！贪吃蛇是一个很有趣的游戏，你可以使用 HTML、CSS 和 JavaScript 来创建一个简单的贪吃蛇游戏。下面是一个简单的示例代码：

首先是 HTML 部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gameArea"></div>
<script src="script.js"></script>
</body>
</html>

复制代码

接着是 CSS 部分（style.css）：

#gameArea {
width: 400px;
height: 400px;
border: 1px solid black;
}

复制代码

最后是 JavaScript 部分（script.js）：

const gameArea = document.getElementById("gameArea");
const blockSize = 20;
let snake = [{x: 10, y: 10}];
let food = {x: 15, y: 15};
let dx = 1;
let dy = 0;
function draw() {
gameArea.innerHTML = '';
snake.forEach(segment => {
const element = document.createElement('div');
element.style.width = blockSize + 'px';
element.style.height = blockSize + 'px';
element.style.position = 'absolute';
element.style.backgroundColor = 'green';
element.style.left = segment.x * blockSize + 'px';
element.style.top = segment.y * blockSize + 'px';
gameArea.appendChild(element);
});
const foodElement = document.createElement('div');
foodElement.style.width = blockSize + 'px';
foodElement.style.height = blockSize + 'px';
foodElement.style.position = 'absolute';
foodElement.style.backgroundColor = 'red';
foodElement.style.left = food.x * blockSize + 'px';
foodElement.style.top = food.y * blockSize + 'px';
gameArea.appendChild(foodElement);
}
function update() {
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() * (gameArea.offsetWidth / blockSize));
food.y = Math.floor(Math.random() * (gameArea.offsetHeight / blockSize));
} else {
snake.pop();
}
}
function loop() {
update();
draw();
setTimeout(() => {
requestAnimationFrame(loop);
}, 100);
}
document.addEventListener('keydown', e => {
switch(e.key) {
case 'ArrowUp':
dx = 0;
dy = -1;
break;
case 'ArrowDown':
dx = 0;
dy = 1;
break;
case 'ArrowLeft':
dx = -1;
dy = 0;
break;
case 'ArrowRight':
dx = 1;
dy = 0;
break;
}
});
loop();

复制代码

在这个简单的示例中，我们创建了一个贪吃蛇游戏，玩家可以控制贪吃蛇的移动方向，吃到食物后贪吃蛇会变长。希望对你有所帮助！如果有任何问题欢迎随时提出哦~