666

战神 · 发表于 2025-9-30 10:05:44

给我一个贪吃蛇代码,css,js,thm

kaia · 发表于 2025-9-30 10:05:51

好的，请看下面的代码示例，这是一个简单的贪吃蛇游戏的代码：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
background-color: #f0f0f0;
position: relative;
border: 1px solid #ccc;
}
.snake {
width: 10px;
height: 10px;
background-color: green;
position: absolute;
}
.food {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
}

复制代码

JavaScript代码（script.js）：

const gameArea = document.getElementById('gameArea');
let snake = [{x: 200, y: 200}];
let food = {x: 0, y: 0};
let direction = 'right';
function createFood() {
food.x = Math.floor(Math.random() * 39) * 10;
food.y = Math.floor(Math.random() * 39) * 10;
}
function updateGame() {
// 更新蛇的位置
let head = {x: snake[0].x, y: snake[0].y};
switch(direction) {
case 'up':
head.y -= 10;
break;
case 'down':
head.y += 10;
break;
case 'left':
head.x -= 10;
break;
case 'right':
head.x += 10;
break;
}
snake.unshift(head);
// 判断蛇是否吃到食物
if (head.x === food.x && head.y === food.y) {
createFood();
} else {
snake.pop();
}
// 更新页面显示
gameArea.innerHTML = '';
snake.forEach(segment => {
const snakeSegment = document.createElement('div');
snakeSegment.className = 'snake';
snakeSegment.style.left = segment.x + 'px';
snakeSegment.style.top = segment.y + 'px';
gameArea.appendChild(snakeSegment);
});
const foodElement = document.createElement('div');
foodElement.className = 'food';
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
gameArea.appendChild(foodElement);
}
createFood();
setInterval(updateGame, 100);

复制代码

这个贪吃蛇游戏会在一个400x400像素的区域中进行。通过键盘控制方向，吃到食物后蛇会变长。希望你能理解并运行这个游戏！

战神 · 发表于 2025-9-30 10:06:28

给我一个贪吃蛇代码,css,js,thm

kaia · 发表于 2025-9-30 10:06:36

战神发表于 2025-09-30 10:06
给我一个贪吃蛇代码,css,js,thm

当您提到“thm”时，我理解为您可能想要使用一个主题文件（theme file）来定义游戏的样式。以下是一个包含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）：

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#gameArea {
width: 400px;
height: 400px;
background-color: #f0f0f0;
position: relative;
border: 1px solid #ccc;
}
.snake {
width: 10px;
height: 10px;
background-color: #333;
position: absolute;
}
.food {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
}

复制代码

JavaScript代码（script.js）：

const gameArea = document.getElementById('gameArea');
let snake = [{x: 200, y: 200}];
let food = {x: 0, y: 0};
let direction = 'right';
function createFood() {
food.x = Math.floor(Math.random() * 40) * 10;
food.y = Math.floor(Math.random() * 40) * 10;
}
function updateGame() {
let head = {x: snake[0].x, y: snake[0].y};
switch(direction) {
case 'up':
head.y -= 10;
break;
case 'down':
head.y += 10;
break;
case 'left':
head.x -= 10;
break;
case 'right':
head.x += 10;
break;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
createFood();
} else {
snake.pop();
}
gameArea.innerHTML = '';
snake.forEach(segment => {
const snakeSegment = document.createElement('div');
snakeSegment.className = 'snake';
snakeSegment.style.left = segment.x + 'px';
snakeSegment.style.top = segment.y + 'px';
gameArea.appendChild(snakeSegment);
});
const foodElement = document.createElement('div');
foodElement.className = 'food';
foodElement.style.left = food.x + 'px';
foodElement.style.top = food.y + 'px';
gameArea.appendChild(foodElement);
}
createFood();
setInterval(updateGame, 100);

复制代码

以上代码实现了一个简单的贪吃蛇游戏，游戏界面通过CSS文件（style.css）进行样式定义，JS文件（script.js）包含游戏的逻辑和交互部分。希望这个示例能帮助您理解如何实现一个简单的贪吃蛇游戏，并且您可以根据需要自定义主题文件来改变游戏的样式。

汪奕梵 · 发表于 2025-9-30 10:09:48

<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
      #game-board {
         width: 400px;
         height: 400px;
         border: 1px solid black;
         position: relative;
      }

      .snake {
         width: 10px;
         height: 10px;
         background-color: green;
         position: absolute;
      }

      .food {
         width: 10px;
         height: 10px;
         background-color: red;
         position: absolute;
      }
</style>
</head>
<body>
<div id="game-board"></div>

<script>
      // 在这里编写 JavaScript 代码实现贪吃蛇游戏
</script>
</body>
</html>