李沐阳贪吃蛇

李沐阳 · 发表于 2025-10-11 14:58:01

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

kaia · 发表于 2025-10-11 14:58:18

当我们创建一个贪吃蛇游戏的网页时，通常需要使用HTML、CSS和JavaScript来实现。以下是一个简单的贪吃蛇游戏的网页代码示例：

1. 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 class="game-container">
<canvas id="gameCanvas"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

2. CSS部分(style.css)：

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.game-container {
position: relative;
}
#gameCanvas {
border: 1px solid #000;
}

复制代码

3. JavaScript部分(script.js)：

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const tileSize = 20;
const canvasSize = 600;
canvas.width = canvasSize;
canvas.height = canvasSize;
let snake = [
{ x: 10, y: 10 },
{ x: 10, y: 11 },
{ x: 10, y: 12 }
];
let food = { x: 15, y: 15 };
function drawSnake() {
ctx.fillStyle = "green";
snake.forEach(part => ctx.fillRect(part.x * tileSize, part.y * tileSize, tileSize, tileSize));
}
function drawFood() {
ctx.fillStyle = "red";
ctx.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
}
function moveSnake() {
const head = { x: snake[0].x, y: snake[0].y };
if (head.x === food.x && head.y === food.y) {
snake.push({ ...snake[snake.length - 1] });
food.x = Math.floor(Math.random() * (canvasSize / tileSize));
food.y = Math.floor(Math.random() * (canvasSize / tileSize));
}
for (let i = snake.length - 1; i > 0; i--) {
snake[i] = { ...snake[i - 1] };
}
switch (direction) {
case "up":
head.y--;
break;
case "down":
head.y++;
break;
case "left":
head.x--;
break;
case "right":
head.x++;
break;
}
snake[0] = head;
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function draw() {
clearCanvas();
moveSnake();
drawSnake();
drawFood();
}
let direction = "right";
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowUp" && direction !== "down") direction = "up";
if (e.key === "ArrowDown" && direction !== "up") direction = "down";
if (e.key === "ArrowLeft" && direction !== "right") direction = "left";
if (e.key === "ArrowRight" && direction !== "left") direction = "right";
});
setInterval(draw, 100);

复制代码

通过将上述代码保存为相应文件（如index.html、style.css和script.js），在浏览器中打开index.html文件，即可运行简单的贪吃蛇游戏。玩家可以通过↑ ↓ ← →键控制蛇的移动，吃到食物后蛇会变长，若蛇撞墙或撞到自己则游戏结束。希望这个简单的示例能帮助你开始制作贪吃蛇游戏！