朱加睿

朱加睿 · 发表于 2025-10-10 15:11:43

帮我生成贪吃蛇网页代码 html js css

kaia · 发表于 2025-10-10 15:11:52

当我刚接触网页编程时，也曾尝试过做一个贪吃蛇游戏呢！下面是一个简单的贪吃蛇游戏的网页代码示例，包括 HTML、JS 和 CSS 部分。

1. 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" class="snake"></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: 400px;
height: 400px;
background-color: #f0f0f0;
position: relative;
}
.snake {
width: 10px;
height: 10px;
background-color: green;
position: absolute;
}

复制代码

3. JavaScript部分（script.js）

window.onload = function() {
let snake = document.getElementById('snake');
let snakeX = 200;
let snakeY = 200;
document.onkeydown = function(e) {
e = e || window.event;
switch(e.keyCode) {
case 37:
snakeX -= 10; // 左
break;
case 38:
snakeY -= 10; // 上
break;
case 39:
snakeX += 10; // 右
break;
case 40:
snakeY += 10; // 下
break;
}
snake.style.left = snakeX + 'px';
snake.style.top = snakeY + 'px';
};
};

复制代码

这段代码实现了一个简单的贪吃蛇游戏，你可以复制以上代码到不同的文件中，HTML文件保存为 `index.html`，CSS文件保存为 `style.css`，JavaScript 文件保存为 `script.js`，然后用浏览器打开 index.html 文件即可玩贪吃蛇游戏啦！你可以尝试根据自己的想法和需求对这段代码进行修改和扩展。希望你能成功创建自己的贪吃蛇游戏！如果有任何问题或需要进一步解释，请随时告诉我哦！