web贪吃蛇小游戏介绍
一、项目概述
“贪吃蛇”是一个简单而有趣的项目。它基于 HTML、CSS 和 JavaScript 构建，运用了 Tailwind CSS 进行样式设计，为玩家提供了一个经典贪吃蛇游戏的现代版本。玩家通过控制蛇的移动方向，吃掉随机生成的食物，使蛇不断变长，同时要避免撞到墙壁或自己的身体。游戏还设有难度调整功能，增加了游戏的趣味性和挑战性。
二、项目结构与技术栈
1. HTML 结构
HTML 文件 snake-game.html 是整个项目的基础，它负责搭建游戏的页面结构。以下是部分关键 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简约贪吃蛇</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 其他头部信息 -->
</head>
<body class="bg-darker min-h-screen flex flex-col items-center justify-center p-4 font-game text-light overflow-x-hidden">
<!-- 背景装饰 -->
<div class="fixed inset-0 -z-10 opacity-10">
<div class="absolute top-10 left-10 w-64 h-64 rounded-full bg-primary/30 blur-3xl"></div>
<div class="absolute bottom-10 right-10 w-80 h-80 rounded-full bg-secondary/30 blur-3xl"></div>
<div class="absolute top-1/2 left-1/4 w-40 h-40 rounded-full bg-accent/30 blur-3xl"></div>
</div>
<div class="w-full max-w-3xl flex flex-col items-center">
<header class="w-full text-center mb-8 relative">
<h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-primary mb-2 text-shadow text-glow tracking-tight">
<span class="inline-block transform hover:scale-105 transition-transform duration-300">简</span>
<span class="inline-block transform hover:scale-105 transition-transform duration-300">约</span>
<span class="inline-block transform hover:scale-105 transition-transform duration-300">贪</span>
<span class="inline-block transform hover:scale-105 transition-transform duration-300">吃</span>
<span class="inline-block transform hover:scale-105 transition-transform duration-300">蛇</span>
</h1>
<p class="text-light/70 text-[clamp(1rem,2vw,1.2rem)] max-w-2xl mx-auto">
控制蛇移动，吃掉食物，避开墙壁和自己的身体，挑战最高分！
</p>
</header>
<main class="w-full flex flex-col md:flex-row gap-8">
<div class="w-full md:w-2/3 relative">
<div class="game-gradient rounded-2xl shadow-2xl p-3 mb-6 relative overflow-hidden">
<canvas id="gameCanvas" class="w-full aspect-square rounded-xl bg-dark/70"></canvas>
</div>
<div class="flex justify-center gap-4 mt-4">
<button id="startBtn" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-lg flex items-center justify-center button-pulse">
<i class="fa fa-play mr-2"></i> 开始游戏
</button>
<button id="pauseBtn" class="bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-lg flex items-center justify-center" disabled>
<i class="fa fa-pause mr-2"></i> 暂停游戏
</button>
<button id="resetBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-medium py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-lg flex items-center justify-center">
<i class="fa fa-refresh mr-2"></i> 重置游戏
</button>
</div>
</div>
<div class="w-full md:w-1/3 glass-effect rounded-2xl p-6 shadow-xl border border-white/10">
<div class="mb-6">
<h2 class="text-2xl font-bold text-primary mb-3 flex items-center">
<i class="fa fa-trophy mr-3 text-secondary"></i> 游戏数据
</h2>
<div class="space-y-4">
<div class="bg-dark/50 rounded-xl p-4 flex justify-between items-center hover-lift">
<span class="text-light/80 flex items-center">
<i class="fa fa-star text-yellow-400 mr-2"></i> 当前得分:
</span>
<span id="score" class="text-3xl font-bold text-secondary">0</span>
</div>
<div class="bg-dark/50 rounded-xl p-4 flex justify-between items-center hover-lift">
<span class="text-light/80 flex items-center">
<i class="fa fa-crown text-yellow-500 mr-2"></i> 最高分:
</span>
<span id="highScore" class="text-3xl font-bold text-primary">0</span>
</div>
<div class="bg-dark/50 rounded-xl p-4 flex justify-between items-center hover-lift">
<span class="text-light/80 flex items-center">
<i class="fa fa-bolt text-accent mr-2"></i> 蛇长:
</span>
<span id="snakeLength" class="text-3xl font-bold text-accent">3</span>
</div>
</div>
</div>
<div class="mb-6">
<h2 class="text-2xl font-bold text-primary mb-3 flex items-center">
<i class="fa fa-info-circle mr-3 text-secondary"></i> 游戏说明
</h2>
<ul class="text-light/80 space-y-3">
<li class="flex items-start">
<i class="fa fa-keyboard-o text-primary mt-1 mr-3"></i>
<span>使用方向键或WASD控制蛇的移动</span>
</li>
<li class="flex items-start">
<i class="fa fa-apple text-primary mt-1 mr-3"></i>
<span>吃到食物增加分数和蛇的长度</span>
</li>
<li class="flex items-start">
<i class="fa fa-ban text-primary mt-1 mr-3"></i>
<span>撞到墙壁或自己的身体游戏结束</span>
</li>
<li class="flex items-start">
<i class="fa fa-pause text-primary mt-1 mr-3"></i>
<span>游戏暂停时可以调整难度</span>
</li>
</ul>
</div>
<div>
<h2 class="text-2xl font-bold text-primary mb-3 flex items-center">
<i class="fa fa-bolt mr-3 text-secondary"></i> 游戏难度
</h2>
<div class="bg-dark/50 rounded-xl p-4 hover-lift">
<div class="flex items-center justify-between mb-3">
<span class="text-light/80">速度级别:</span>
<div class="flex items-center">
<button id="speedDown" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-l-lg transition-all duration-300">
<i class="fa fa-minus"></i>
</button>
<span id="speedValue" class="bg-dark/80 px-6 py-3 text-lg font-medium">中等</span>
<button id="speedUp" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-r-lg transition-all duration-300">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="w-full bg-dark/70 rounded-full h-2.5">
<div id="speedBar" class="bg-gradient-to-r from-green-400 via-yellow-400 to-red-500 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
</div>
</div>
</main>
<footer class="w-full mt-10 text-center text-light/50 text-sm">
<p>© 2025 简约贪吃蛇 | 使用键盘或屏幕按钮控制 | 享受游戏乐趣</p>
</footer>
</div>
<script>
// JavaScript 代码
</script>
</body>
</html>这段代码创建了游戏的整体布局，包括标题、游戏画布、控制按钮、游戏数据显示区、游戏说明和难度调整区等。使用了 Tailwind CSS 类名进行样式设计，使页面具有响应式布局和美观的外观。
2. CSS 样式
通过 Tailwind CSS 和自定义样式，为游戏界面添加了丰富的视觉效果。例如，使用渐变背景、阴影、动画等：
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.text-glow {
text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
.game-gradient {
background: linear-gradient(135deg, #2C3E50 0%, #1A202C 100%);
}
.button-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
}
}
.food-pulse {
animation: food-pulse 1.5s infinite;
}
@keyframes food-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(255, 152, 0, 0.7);
}
}
.snake-head {
border-radius: 4px;
}
.snake-body {
border-radius: 3px;
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
}
</style>这些样式规则定义了游戏界面的各种效果，如按钮的脉冲动画、食物的缩放动画、玻璃效果等，增强了游戏的视觉吸引力。
3. JavaScript 逻辑
JavaScript 代码负责游戏的核心逻辑，包括蛇的移动、食物的生成、碰撞检测、游戏状态管理等。以下是部分关键 JavaScript 代码及其解释：
初始化游戏
function initGame() {
// 清空蛇和食物
snake = [];
food = {};
specialFood = null;
// 设置蛇的初始位置和方向
const centerX = Math.floor((canvas.width / 2) / gridSize) * gridSize;
const centerY = Math.floor((canvas.height / 2) / gridSize) * gridSize;
snake = [
{x: centerX, y: centerY},
{x: centerX - gridSize, y: centerY},
{x: centerX - gridSize * 2, y: centerY}
];
direction = 'right';
nextDirection = 'right';
score = 0;
scoreElement.textContent = score;
updateSnakeLength();
// 生成第一个食物
generateFood();
// 绘制初始状态
draw();
}initGame 函数用于初始化游戏状态，包括清空蛇和食物数组，设置蛇的初始位置和方向，重置分数，生成第一个食物，并绘制游戏的初始状态。
移动蛇
function moveSnake() {
// 更新方向
direction = nextDirection;
// 获取蛇头位置
const head = {x: snake[0].x, y: snake[0].y};
// 根据方向移动蛇头
switch (direction) {
case 'up':
head.y -= gridSize;
break;
case 'down':
head.y += gridSize;
break;
case 'left':
head.x -= gridSize;
break;
case 'right':
head.x += gridSize;
break;
}
// 检查是否吃到普通食物
let ateFood = false;
if (head.x === food.x && head.y === food.y) {
// 增加分数
score += 10;
scoreElement.textContent = score;
// 更新最高分
if (score > highScore) {
highScore = score;
highScoreElement.textContent = highScore;
localStorage.setItem('snakeHighScore', highScore);
}
// 生成新食物
generateFood();
ateFood = true;
}
// 检查是否吃到特殊食物
if (specialFood && head.x === specialFood.x && head.y === specialFood.y) {
// 增加更多分数
score += 50;
scoreElement.textContent = score;
// 更新最高分
if (score > highScore) {
highScore = score;
highScoreElement.textContent = highScore;
localStorage.setItem('snakeHighScore', highScore);
}
// 移除特殊食物
specialFood = null;
if (specialFoodTimer) {
clearTimeout(specialFoodTimer);
specialFoodTimer = null;
}
ateFood = true;
}
if (!ateFood) {
// 如果没吃到食物，移除尾部
snake.pop();
} else {
// 吃到食物后更新蛇长度
updateSnakeLength();
}
// 检查碰撞
if (checkCollision(head)) {
gameOver();
return;
}
// 添加新头部
snake.unshift(head);
// 绘制游戏
draw();
}moveSnake 函数是游戏的核心逻辑之一，它根据当前方向移动蛇头，检查蛇是否吃到食物（普通食物或特殊食物），如果吃到食物则增加分数、更新最高分、生成新食物并更新蛇的长度；如果没吃到食物则移除蛇的尾部。最后检查蛇是否发生碰撞，如果碰撞则游戏结束，否则添加新的蛇头并重新绘制游戏。
检查碰撞
function checkCollision(head) {
// 检查是否碰到墙壁
if (
head.x < 0 ||
head.x >= canvas.width ||
head.y < 0 ||
head.y >= canvas.height
) {
return true;
}
// 检查是否碰到自己
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
return true;
}
}
return false;
}checkCollision 函数用于检查蛇头是否碰到墙壁或自己的身体，如果碰到则返回 true，表示游戏结束。
三、游戏特色
1. 特殊食物机制
游戏中有 20% 的概率生成特殊食物，特殊食物会在 10 秒后消失。吃到特殊食物可以获得 50 分，比普通食物的 10 分更多，增加了游戏的趣味性和挑战性。
2. 难度调整功能
玩家可以通过点击“+”和“-”按钮来调整游戏速度，速度级别分为“很慢”、“慢”、“中等”、“快”、“很快”。游戏速度的调整会实时更新速度条的显示，并在游戏运行时动态更新游戏循环的间隔时间。
3. 本地存储最高分
游戏使用 localStorage 来保存玩家的最高分，即使关闭浏览器或刷新页面，最高分也不会丢失，激励玩家不断挑战自己的记录。
四、总结
“贪吃蛇”小游戏是一个简单而有趣的项目，它通过 HTML、CSS 和 JavaScript 实现了经典贪吃蛇游戏的核心功能，并添加了一些现代的视觉效果和特色机制。对于初学者来说，这个项目是一个很好的学习示例，可以帮助他们了解 HTML、CSS、JavaScript 的基本用法，以及如何使用 Canvas 元素进行图形绘制和动画实现。同时，项目的代码结构清晰，易于理解和扩展，开发者可以根据自己的需求添加更多的功能和特色，如不同的游戏模式、关卡设计等。
