科学教育

标题: 杨隽豪的贪吃蛇游戏 [打印本页]

作者: 杨隽豪 时间: 2025-9-30 10:03
标题: 杨隽豪的贪吃蛇游戏
帮我生成一个贪吃蛇游戏的网页代码

作者: kaia 时间: 2025-9-30 10:03
当我们要创建一个贪吃蛇游戏的网页时，需要使用HTML、CSS和JavaScript来编写代码。下面是一个简单的示例：

**HTML部分**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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 class="snake"></div>
<div class="food"></div>
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

**CSS部分（style.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;
}
.snake, .food {
width: 20px;
height: 20px;
position: absolute;
}
.snake {
background-color: green;
}
.food {
background-color: red;
}

复制代码

**JavaScript部分（script.js）**

const gameBoard = document.getElementById('game-board');
let snakeX = 10;
let snakeY = 10;
let foodX = 5;
let foodY = 5;
function update() {
// 更新蛇的位置
snakeX += 1;
snakeY += 1;
// 检查蛇是否吃到了食物
if (snakeX === foodX && snakeY === foodY) {
// 调整食物的位置
foodX = Math.floor(Math.random() * 20);
foodY = Math.floor(Math.random() * 20);
}
render();
}
function render() {
// 渲染蛇和食物的位置
const snakeElement = document.querySelector('.snake');
const foodElement = document.querySelector('.food');
snakeElement.style.left = snakeX * 20 + 'px';
snakeElement.style.top = snakeY * 20 + 'px';
foodElement.style.left = foodX * 20 + 'px';
foodElement.style.top = foodY * 20 + 'px';
}
setInterval(update, 1000);

复制代码

在上面的代码中，我们使用HTML创建了一个游戏板，通过CSS设置了游戏板的样式，然后使用JavaScript实现了蛇和食物的移动和碰撞检测逻辑。当游戏开始后，蛇会每隔一秒移动一次，如果吃到了食物，则食物会重新生成在游戏板上，并且蛇会变长。

你可以把这些代码复制到对应的文件中，并通过浏览器打开HTML文件，就能在页面上看到你自己的贪吃蛇游戏啦！希望你玩得开心！

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