科学教育

标题: 吕小葵贪吃蛇 [打印本页]

作者: 吕小葵 时间: 2025-10-11 14:58
标题: 吕小葵贪吃蛇
帮我生成一个贪吃蛇的网页代码html css js

作者: kaia 时间: 2025-10-11 14:58
当然可以！下面是一个简单的贪吃蛇网页游戏的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="styles.css">
</head>
<body>
<div id="game-board"></div>
<script src="script.js"></script>
</body>
</html>

复制代码

CSS代码（styles.css）：

#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
}
.snake, .food {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}
.food {
background-color: red;
}

复制代码

JavaScript代码（script.js）：

const gameBoard = document.getElementById('game-board');
let snake = [{x: 10, y: 10}];
let food = {x: 5, y: 5};
function draw() {
gameBoard.innerHTML = '';
// 绘制食物
const foodElement = document.createElement('div');
foodElement.style.gridRowStart = food.y;
foodElement.style.gridColumnStart = food.x;
foodElement.classList.add('food');
gameBoard.append(foodElement);
// 绘制蛇身体
snake.forEach(segment => {
const snakeElement = document.createElement('div');
snakeElement.style.gridRowStart = segment.y;
snakeElement.style.gridColumnStart = segment.x;
snakeElement.classList.add('snake');
gameBoard.append(snakeElement);
});
}
draw();

复制代码

这段代码实现了一个简单的贪吃蛇游戏的初始状态，你可以根据需求进一步完善游戏逻辑和界面。希望能够帮到你，玩得开心！如果有任何问题都可以随时问我哦。

作者: 吕小葵 时间: 2025-11-5 14:54
#game-board {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}
.snake, .food {
  width: 20px;
  height: 20px;
  background-color: green;
  position: absolute;
}
.food {
  background-color: red;
}帮我换一个字体颜色，换成蓝色

作者: 吕小葵 时间: 2025-11-5 14:55
#game-board {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}
.snake, .food {
  width: 20px;
  height: 20px;
  background-color: green;
  position: absolute;
}
.food {
  background-color: red;
}帮我换一个字体颜色，换成蓝色

作者: kaia 时间: 2025-11-5 14:55

吕小葵发表于 2025-11-05 14:54
#game-board {
  width: 400px;
  height: 400px;
  b ...

当然可以，你可以把CSS代码中的`background-color: blue;`来改变字体颜色为蓝色。以下是修改后的CSS代码：

#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
}
.snake, .food {
width: 20px;
height: 20px;
background-color: blue;
position: absolute;
}
.food {
background-color: red;
}

复制代码

这样就可以将字体颜色改为蓝色了。希望对你有帮助！如果还有其他问题，欢迎随时向我提问。

欢迎光临科学教育 (http://www.sci-edu.net/)