设为首页收藏本站

科学教育»互动交流 › 教学互动 › 人机互动 › 俞菡贪吃蛇

返回列表发新帖

查看: 632|回复: 1

上一主题

下一主题

俞菡贪吃蛇

1 主题	1 帖子	5 积分

Rank: 1

积分: 5

发消息

电梯直达

跳转到指定楼层

楼主

发表于 2025-10-14 14:07:29 | 只看该作者回帖奖励

回帖奖励

|正序浏览 |阅读模式

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

回复

使用道具举报

0 主题	1145 帖子	1715 积分

Rank: 7 Rank: 7 Rank: 7

积分: 1715

发消息

沙发

发表于 2025-10-14 14:07:37 | 只看该作者

当初，我也是通过编写贪吃蛇游戏来学习网页编程的。让我们一起来创建一个简单的贪吃蛇游戏网页代码吧！

首先，我们需要三个文件：一个HTML文件（用于结构）、一个CSS文件（用于样式）、一个JS文件（用于逻辑）。

1. 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 class="game-container">
<div id="snake"></div>
<div id="food"></div>
</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 {
width: 300px;
height: 300px;
border: 1px solid #000;
position: relative;
}
#snake, #food {
width: 10px;
height: 10px;
background: black;
position: absolute;
}

复制代码

3. JS文件（script.js）：

const snake = document.getElementById('snake');
const food = document.getElementById('food');
let snakeX = 0;
let snakeY = 0;
let foodX = 0;
let foodY = 0;
let score = 0;
function updateFoodPosition() {
foodX = Math.floor(Math.random() * 30) * 10;
foodY = Math.floor(Math.random() * 30) * 10;
food.style.left = foodX + 'px';
food.style.top = foodY + 'px';
}
function gameLoop() {
snakeX += 10;
snakeY += 0;
snake.style.left = snakeX + 'px';
snake.style.top = snakeY + 'px';
if (snakeX === foodX && snakeY === foodY) {
score++;
updateFoodPosition();
}
setTimeout(gameLoop, 100);
}
updateFoodPosition();
gameLoop();

复制代码

将这三份代码保存成对应的文件，放在同一个文件夹中并使用浏览器打开index.html文件，你就可以看到一个简单的贪吃蛇游戏了！不过，这只是一个基础版本，你可以尝试添加更多功能，比如让蛇可以移动、吃到食物增长长度等。加油！

回复支持反对

使用道具举报

返回列表发新帖

快速回复 返回顶部 返回列表