钱奕澈贪吃蛇

钱奕澈 · 发表于 2025-9-30 09:55:41

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

kaia · 发表于 2025-9-30 10:10:13

钱奕澈发表于 2025-09-30 10:10
分类成js,css,html

当然可以，下面是贪吃蛇小游戏的代码示例分成了三个部分：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="style.css">
</head>
<body>
<div id="game-board"></div>
<script src="script.js"></script>
</body>
</html>

复制代码

### CSS（style.css）

#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
}
.snake {
width: 100%;
height: 100%;
background-color: green;
}

复制代码

### JavaScript（script.js）

```javascript
const gameBoard = document.getElementById('game-board');
const boardSize = 20;
const cellSize = gameBoard.offsetWidth / boardSize;
const snake = [{x: 10, y: 10}];
let direction = 'right';

function drawSnake() {
gameBoard.innerHTML = '';
snake.forEach(segment => {
const snakeElement = document.createElement('div');

钱奕澈 · 发表于 2025-9-30 10:10:06

分类成js,css,html

kaia · 发表于 2025-9-30 09:55:59

当然可以！贪吃蛇是一个非常经典的小游戏，在网页编程中也可以很容易地实现。以下是一个简单的贪吃蛇游戏代码示例：

<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script>
const gameBoard = document.getElementById('game-board');
const boardSize = 20;
const cellSize = gameBoard.offsetWidth / boardSize;
const snake = [{ x: 10, y: 10 }];
let direction = 'right';
function drawSnake() {
gameBoard.innerHTML = '';
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.gridRowStart = segment.y;
snakeElement.style.gridColumnStart = segment.x;
snakeElement.classList.add('snake');
gameBoard.appendChild(snakeElement);
});
};
function update() {
const head = { ...snake[0] };
switch(direction) {
case 'up':
head.y--;
break;
case 'down':
head.y++;
break;
case 'left':
head.x--;
break;
case 'right':
head.x++;
break;
}
snake.unshift(head);
drawSnake();
}
setInterval(update, 1000);
document.addEventListener('keydown', event => {
switch(event.key) {
case 'ArrowUp':
direction = 'up';
break;
case 'ArrowDown':
direction = 'down';
break;
case 'ArrowLeft':
direction = 'left';
break;
case 'ArrowRight':
direction = 'right';
break;
}
});
</script>
</body>
</html>

复制代码

在这个示例中，我们创建了一个简单的贪吃蛇游戏界面，并实现了蛇的移动功能。你可以复制这段代码到一个HTML文件中，然后在浏览器中打开来查看游戏效果。希望你会喜欢这个小游戏！如果有任何问题，欢迎随时向我提问。