黄景铄贪吃蛇游戏

黄景铄 · 发表于 2025-9-30 09:53:27

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

kaia · 发表于 2025-9-30 09:53:37

当创建一个贪吃蛇游戏网页时，我们需要使用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>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#game-board {
width: 400px;
height: 400px;
border: 2px solid black;
position: relative;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script>
const board = document.getElementById('game-board');
const boardWidth = 20;
const boardHeight = 20;
const blockSize = 20;
const snake = [{x: 10, y: 10}];
let food = {x: 5, y: 5};
let dx = 1;
let dy = 0;
function draw() {
board.innerHTML = '';
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.gridArea = `${segment.y + 1} / ${segment.x + 1}`;
snakeElement.style.width = `${blockSize}px`;
snakeElement.style.height = `${blockSize}px`;
snakeElement.style.backgroundColor = 'green';
board.appendChild(snakeElement);
});
const foodElement = document.createElement('div');
foodElement.style.gridArea = `${food.y + 1} / ${food.x + 1}`;
foodElement.style.width = `${blockSize}px`;
foodElement.style.height = `${blockSize}px`;
foodElement.style.backgroundColor = 'red';
board.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() * boardWidth);
food.y = Math.floor(Math.random() * boardHeight);
} else {
snake.pop();
}
}
function gameLoop() {
update();
draw();
setTimeout(gameLoop, 200);
}
document.addEventListener('keydown', event => {
const key = event.key;
switch(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;
}
});
gameLoop();
</script>
</body>
</html>

复制代码

你可以将这段代码复制粘贴到一个新建的HTML文件中，然后保存并在浏览器中打开，就可以看到一个简单的贪吃蛇游戏啦！记得按方向键控制蛇的移动，尽量让蛇吃到红色的食物哦！希望你玩得开心！

黄景铄 · 发表于 2025-9-30 10:02:32

帮我分别生成HTML,CSS,JS

kaia · 发表于 2025-9-30 10:02:45

黄景铄发表于 2025-09-30 10:02
帮我分别生成HTML,CSS,JS

当创建一个贪吃蛇游戏的网页时，我们需要使用HTML、CSS和JavaScript来实现。以下是分别生成HTML、CSS、JavaScript的代码：

### HTML文件（index.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="styles.css">
</head>
<body>
<div id="game-board"></div>
<script src="script.js"></script>
</body>
</html>

复制代码

### CSS文件（styles.css）：

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#game-board {
width: 400px;
height: 400px;
border: 2px solid black;
position: relative;
}

复制代码

### JavaScript文件（script.js）：

const board = document.getElementById('game-board');
const boardWidth = 20;
const boardHeight = 20;
const blockSize = 20;
const snake = [{x: 10, y: 10}, {x: 10, y: 11}];
let food = {x: 5, y: 5};
let dx = 1;
let dy = 0;
function draw() {
board.innerHTML = '';
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.gridArea = `${segment.y + 1} / ${segment.x + 1}`;
snakeElement.style.width = `${blockSize}px`;
snakeElement.style.height = `${blockSize}px`;
snakeElement.style.backgroundColor = 'green';
board.appendChild(snakeElement);
});
const foodElement = document.createElement('div');
foodElement.style.gridArea = `${food.y + 1} / ${food.x + 1}`;
foodElement.style.width = `${blockSize}px`;
foodElement.style.height = `${blockSize}px`;
foodElement.style.backgroundColor = 'red';
board.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() * boardWidth);
food.y = Math.floor(Math.random() * boardHeight);
} else {
snake.pop();
}
}
function gameLoop() {
update();
draw();
setTimeout(gameLoop, 200);
}
document.addEventListener('keydown', event => {
const key = event.key;
switch(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;
}
});
gameLoop();

复制代码

将这些代码分别保存到名为index.html、styles.css和script.js的文件中。然后在浏览器中打开index.html文件，你就可以玩这个简单的贪吃蛇游戏啦！希望你喜欢！