简易贪吃蛇
基于HTML+JavaScript的简易贪吃蛇游戏
一、完整代码（保存为 .html 文件直接用浏览器打开即可运行）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简易贪吃蛇</title>
<style>
/* 游戏画布样式 */
#gameCanvas {
border: 2px solid #333;
background-color: #f5f5f5;
display: block;
margin: 20px auto;
}
.info {
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="info">得分：<span id="score">0</span> | 方向键 ↑ ↓ ← → 控制蛇移动</div>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
// 1. 获取画布和上下文对象
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDom = document.getElementById('score');
// 基础配置
const size = 20; // 每个格子大小
const count = canvas.width / size; // 横向格子总数
let score = 0; // 初始化分数
// 2. 蛇的数据：数组存储每一节身体坐标
let snake = [
{x: 5, y: 5}
];
// 食物坐标
let food = {};
// 移动方向
let dir = 'right';
let nextDir = 'right';
// 随机生成食物位置
function createFood() {
return {
x: Math.floor(Math.random() * count),
y: Math.floor(Math.random() * count)
}
}
food = createFood();
// 3. 键盘方向控制监听
document.addEventListener('keydown', e => {
switch(e.key) {
case 'ArrowUp':
if(dir !== 'down') nextDir = 'up';
break;
case 'ArrowDown':
if(dir !== 'up') nextDir = 'down';
break;
case 'ArrowLeft':
if(dir !== 'right') nextDir = 'left';
break;
case 'ArrowRight':
if(dir !== 'left') nextDir = 'right';
break;
}
})
// 4. 游戏主渲染函数
function render() {
dir = nextDir;
// 清空画布
ctx.fillStyle = '#f5f5f5';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 创建蛇新头部
let head = {...snake[0]};
switch(dir) {
case 'up': head.y--; break;
case 'down': head.y++; break;
case 'left': head.x--; break;
case 'right': head.x++; break;
}
// 撞墙判定：游戏结束
if(head.x < 0 || head.y <0 || head.x >= count || head.y >= count) {
alert(`游戏结束！最终得分：${score}`);
location.reload();
return;
}
// 撞到自己判定
for(let item of snake) {
if(item.x === head.x && item.y === head.y) {
alert(`游戏结束！最终得分：${score}`);
location.reload();
return;
}
}
// 新头部加入蛇头部
snake.unshift(head);
// 吃到食物：加分、不删除尾巴（蛇变长）
if(head.x === food.x && head.y === food.y) {
score += 10;
scoreDom.innerText = score;
food = createFood();
} else {
// 没吃到食物：删除尾巴，长度不变
snake.pop();
}
// 绘制蛇身体
ctx.fillStyle = '#2ecc71';
snake.forEach(seg => {
ctx.fillRect(seg.x * size, seg.y * size, size - 1, size - 1);
})
// 绘制食物
ctx.fillStyle = '#e74c3c';
ctx.fillRect(food.x * size, food.y * size, size - 1, size - 1);
}
// 定时循环执行游戏渲染（150ms刷新一次）
setInterval(render, 150);
</script>
</body>
</html>
二、代码详细说明
1. HTML结构部分
<canvas>：画布标签，作为游戏渲染载体，宽高400px，每个格子设置为20px- 页面上方展示实时游戏分数，提示玩家使用方向键控制
2. CSS样式部分
- 设置画布边框、背景色，居中展示游戏区域
- 分数文字居中排版，优化页面视觉效果
3. JavaScript核心逻辑说明
（1）全局基础变量
| 变量 | 作用 |
|---|---|
size | 蛇身体、食物每个方块的像素大小 |
snake | 数组存储蛇所有身体节点坐标，第一个元素为蛇头 |
food | 记录随机生成的食物xy坐标 |
dir / nextDir | 实时移动方向、下一帧移动方向（禁止直接反向撞自己） |
score | 玩家当前得分 |
（2）核心功能函数
-
createFood()随机生成食物 在游戏画布范围内随机生成xy坐标，保证每次吃到食物后刷新食物位置。 -
键盘监听事件
keydown监听上下左右方向键，限制蛇不能直接向反方向移动（例如向右走时不能直接向左掉头，防止瞬间撞到自身）。 -
render()游戏核心循环函数- 每次刷新清空画布，重绘画面
- 根据当前方向生成蛇新头部坐标
- 碰撞检测
- 撞墙：超出画布边界，游戏结束，刷新页面重新开始
- 撞自身：蛇头碰到身体任意节点，游戏结束
- 吃到食物逻辑：分数+10，蛇身体长度+1，重新生成食物
- 未吃到食物：移除蛇尾部，保证蛇长度不变正常移动
- 分别用绿色绘制蛇、红色绘制食物
-
setInterval游戏帧率控制 每150毫秒执行一次画面刷新，控制蛇移动速度，数值越小移动越快。
三、运行方式说明
- 将全部代码复制，新建文本文档粘贴
- 修改文件后缀名：
.txt→.html - 双击文件，用浏览器打开即可开始游戏
- 操控方式：键盘方向键 ↑ ↓ ← → 控制移动，撞墙/撞到自己游戏结束
屿宁
一名热爱技术、专注于分享知识的开发者。如果您喜欢我的文章，欢迎关注并订阅 RSS。
