植物大战僵尸前端
全部代码：
html部分：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>游戏说明 - 植物大战僵尸</title> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div> <header> <h1> <img src="https://img.icons8.com/color/96/000000/plant-under-sun.png" alt="植物"> 植物大战僵尸 - 游戏说明 <img src="https://img.icons8.com/color/96/000000/zombie.png" alt="僵尸"> </h1> <p>欢迎来到植物大战僵尸！这是一款策略塔防游戏，你需要种植各种植物来抵御僵尸的进攻。</p> </header> <section> <h2><i></i> 游戏目标</h2> <p>你的目标是保护你的房屋免受僵尸入侵。僵尸会从右侧出现并向左移动，试图进入你的房屋。如果僵尸到达最左侧，游戏结束。</p> <p>通过种植植物来攻击、阻挡和消灭僵尸，成功抵御所有僵尸波次即可赢得关卡胜利！</p> </section> <section> <h2><i></i> 如何玩游戏</h2> <ol> <li><strong>开始游戏</strong>：点击右上角的"开始游戏"按钮</li> <li><strong>选择植物</strong>：点击左侧的植物卡片选择要种植的植物</li> <li><strong>种植植物</strong>：点击草坪上的格子来种植选择的植物</li> <li><strong>收集阳光</strong>：点击向日葵产生的阳光或从天而降的阳光来增加阳光数量</li> <li><strong>策略布局</strong>：合理安排植物阵容，抵御不断来袭的僵尸</li> <li><strong>使用铲子</strong>：点击铲子工具可以移除不需要的植物</li> </ol> <p>注意：每种植物都有不同的阳光消耗和冷却时间，合理安排资源是关键！</p> </section> <section> <h2><i></i> 植物图鉴</h2> <p>了解每种植物的特性，合理搭配你的防御阵容：</p> <div> <div> <div> <img src="https://img.icons8.com/color/96/000000/sunflower.png" alt="向日葵"> </div> <div> <h3>向日葵</h3> <div>消耗：50阳光</div> <p>每隔24秒产生25阳光，是阳光经济的基础。</p> </div> </div> <div> <div> <img src="https://img.icons8.com/color/96/000000/pea-shooter.png" alt="豌豆射手"> </div> <div> <h3>豌豆射手</h3> <div>消耗：100阳光</div> <p>每隔1.4秒发射一颗豌豆，攻击直线上的僵尸。</p> </div> </div> <div> <div> <img src="https://img.icons8.com/color/96/000000/wall-nut.png" alt="坚果墙"> </div> <div> <h3>坚果墙</h3> <div>消耗：50阳光</div> <p>高耐久植物，可以阻挡僵尸前进，为攻击植物争取时间。</p> </div> </div> <div> <div> <img src="https://img.icons8.com/color/96/000000/cherry-bomb.png" alt="樱桃炸弹"> </div> <div> <h3>樱桃炸弹</h3> <div>消耗：150阳光</div> <p>种植后立即爆炸，消灭周围3x3范围内的所有僵尸。</p> </div> </div> <div> <div> <img src="https://img.icons8.com/color/96/000000/potato-mine.png" alt="土豆地雷"> </div> <div> <h3>土豆地雷</h3> <div>消耗：25阳光</div> <p>埋在地下，需要时间准备，僵尸踩到会爆炸。</p> </div> </div> <div> <div> <img src="https://img.icons8.com/color/96/000000/snow-pea.png" alt="寒冰射手"> </div> <div> <h3>寒冰射手</h3> <div>消耗：175阳光</div> <p>发射冰冻豌豆，可以减缓僵尸的移动速度。</p> </div> </div> <div> <div> <img src="https://img.icons8.com/color/96/000000/repeater.png" alt="双发射手"> </div> <div> <h3>双发射手</h3> <div>消耗：200阳光</div> <p>一次发射两颗豌豆，是豌豆射手的升级版。</p> </div> </div> </div> </section> <section> <h2><i></i> 僵尸图鉴</h2> <p>了解你的敌人，制定相应的防御策略：</p> <div> <div> <div> <img src="https://img.icons8.com/color/96/000000/zombie.png" alt="普通僵尸"> </div> <div> <h3>普通僵尸</h3> <div>生命值：中等</div> <p>最常见的僵尸类型，移动速度中等。</p> </div> </div> <div> <div> <img src="https://img.icons8.com/color/96/000000/zombie-with-cone.png" alt="路障僵尸"> </div> <div> <h3>路障僵尸</h3> <div>生命值：高</div> <p>头戴路障，比普通僵尸更耐打。</p> </div> </div> <div> <div> <img src="https://img.icons8.com/color/96/000000/zombie-with-bucket.png" alt="铁桶僵尸"> </div> <div> <h3>铁桶僵尸</h3> <div>生命值：非常高</div> <p>头戴铁桶，极其耐打，需要集中火力攻击。</p> </div> </div> </div> </section> <section> <h2><i></i> 游戏技巧与策略</h2> <div> <div> <i></i> </div> <div> <h4>阳光经济优先</h4> <p>游戏前期多种植向日葵，建立稳定的阳光收入来源。建议至少种植3-4棵向日葵后再考虑攻击植物。</p> </div> </div> <div> <div> <i></i> </div> <div> <h4>前排防御很重要</h4> <p>在僵尸出现的前排位置种植坚果墙，为后排的攻击植物争取更多输出时间。</p> </div> </div> <div> <div> <i></i> </div> <div> <h4>合理布置攻击植物</h4> <p>将豌豆射手等攻击植物放在后排，确保它们有足够的安全空间进行攻击。</p> </div> </div> <div> <div> <i></i> </div> <div> <h4>善用樱桃炸弹</h4> <p>当大量僵尸聚集时，使用樱桃炸弹可以瞬间清理一大片区域，化解危机。</p> </div> </div> <div> <div> <i></i> </div> <div> <h4>减速效果显著</h4> <p>寒冰射手的减速效果可以让僵尸在火力范围内停留更久，显著提高击杀效率。</p> </div> </div> </section> <div> <a href="index.html"> <i></i> 返回游戏 </a> </div> </div> </body> </html>css部分：
1：
.instructions-container { max-width: 1000px; margin: 40px auto; background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border: 5px solid var(--accent-yellow); } .instructions-header { text-align: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 3px solid var(--primary-green); } .instructions-header h1 { color: var(--primary-green); font-size: 2.5rem; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 20px; } .instructions-header p { color: #666; font-size: 1.2rem; max-width: 800px; margin: 0 auto; line-height: 1.6; } .instructions-section { margin-bottom: 40px; padding: 25px; background: #F9F9F9; border-radius: 15px; border-left: 5px solid var(--primary-green); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .section-title { color: var(--primary-green); font-size: 1.8rem; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; } .section-title i { color: var(--accent-yellow); } .game-objective { background: #E8F5E9; } .how-to-play { background: #E3F2FD; } .plants-guide { background: #FFF3E0; } .zombies-guide { background: #FFEBEE; } .tips { background: #F3E5F5; } .plant-grid, .zombie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .plant-item, .zombie-item { background: white; border-radius: 10px; padding: 20px; display: flex; align-items: center; gap: 20px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .plant-item:hover, .zombie-item:hover { transform: translateY(-5px); } .plant-icon, .zombie-icon { flex-shrink: 0; } .plant-icon img, .zombie-icon img { width: 80px; height: 80px; object-fit: contain; } .plant-info, .zombie-info { flex: 1; } .plant-name, .zombie-name { color: var(--primary-green); font-size: 1.3rem; font-weight: bold; margin-bottom: 8px; } .zombie-name { color: #C62828; } .plant-cost, .zombie-health { color: #FF9800; font-weight: bold; margin-bottom: 5px; } .zombie-health { color: #F44336; } .plant-desc, .zombie-desc { color: #666; line-height: 1.5; font-size: 0.95rem; } .instructions-list { margin-left: 20px; margin-bottom: 20px; } .instructions-list li { margin-bottom: 12px; line-height: 1.6; color: #555; } .tip-item { background: white; border-radius: 10px; padding: 20px; margin-bottom: 15px; display: flex; align-items: center; gap: 20px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); } .tip-icon { width: 50px; height: 50px; background: var(--accent-yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tip-icon i { color: white; font-size: 1.5rem; } .tip-content { flex: 1; } .tip-content h4 { color: var(--primary-green); margin-bottom: 8px; font-size: 1.2rem; } .back-button { text-align: center; margin-top: 40px; } .back-button a { display: inline-flex; align-items: center; gap: 10px; padding: 15px 40px; background: linear-gradient(to right, var(--primary-green), var(--dark-green)); color: white; text-decoration: none; border-radius: 10px; font-size: 1.2rem; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .back-button a:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); background: linear-gradient(to right, var(--dark-green), var(--primary-green)); } @media (max-width: 768px) { .instructions-container { padding: 20px; margin: 20px; } .instructions-header h1 { font-size: 2rem; } .plant-grid, .zombie-grid { grid-template-columns: 1fr; } .plant-item, .zombie-item { flex-direction: column; text-align: center; gap: 15px; } }代码解析：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 作用：引入https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css，这个链接的作用是为你的网页提供图标字体库。可以使用各种图标
body部分：
css标签：
body { font-family: 'Arial', sans-serif; /* ✅ 整个页面使用Arial字体 */ background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%); /* ✅ 整个页面有渐变绿色背景 */ min-height: 100vh; /* ✅ 页面至少占满整个视口高度 */ overflow-x: hidden; /* ✅ 隐藏水平滚动条 */ color: var(--text-dark); /* ✅ 设置默认文字颜色 */ line-height: 1.6; /* ✅ 设置行高 */ }注意：
background 不会继承body { background: green; /* 只有body有背景，子元素不会自动变绿 */ }color 会继承 font-family 会继承
body { color: red; /* 所有子元素的文字都会变红，除非被子元素覆盖 */ }body { font-family: 'Arial'; /* 所有子元素都会用Arial字体 */ }1.
font-family: 'Arial', sans-serif;作用：
设置页面的默认字体
详细解释：
- 字体顺序：浏览器会按顺序尝试加载字体
- 首选：Arial字体
- 备选：sans-serif（无衬线字体家族）
'Arial', /* 第一选择：如果用户电脑有Arial字体 */ sans-serif /* 备胎：如果没有Arial，用系统默认的无衬线字体 */2.
background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);作用：
创建渐变背景色
详细解析：
- linear-gradient：线性渐变函数
- 从一个颜色平滑过渡到另一个颜色
- 135deg：渐变角度
0deg → 从上到下 90deg → 从左到右 135deg → 从左下到右上（对角线） 180deg → 从下到上颜色分布：
var(--primary-green) 0% /* 开始颜色（左下角） */ var(--dark-green) 100% /* 结束颜色（右上角） */- var()函数：CSS变量
--primary-green和--dark-green在:root中定义- 方便统一修改颜色
3.
min-height: 100vh;作用：
设置最小高度为100%视口高度
min-height vs height：
height: 100vh; /* 固定高度，不能超过视口 */ /*精确等于视口高度 不能超过视口高度 内容多了会溢出*/ min-height: 100vh; /* 最小高度100vh，但可以更高（如果内容多） */ /*至少占满视口 可以超过视口高度 内容多了会自动撑高*/为什么需要这个？
<!-- 假设内容很少 --> <body> <h1>标题</h1> <!-- 如果没有min-height: 100vh; --> <!-- 页面只有标题高度，下面是空白的 --> <!-- 如果有min-height: 100vh; --> <!-- 即使内容少，页面也会占满整个屏幕 --> </body>4.
overflow-x: hidden;作用：
隐藏水平方向的溢出内容
详细解析：
- 应用场景：
- 防止出现水平滚动条
- 当有元素太宽时，直接隐藏而不是让页面变宽
- color属性：设置文字颜色
- 这个样式会继承给所有子元素
继承效果：
body { color: #333; /* 深灰色 */ } /* 所有子元素都会是深灰色，除非被覆盖 */ p { /* 没有单独设置color，所以继承body的#333 */ } .special { color: red; /* 覆盖继承的颜色 */ }6. line-height: 1.6;
作用：
设置行高（文字行间距）
示例：
<div>很宽的内容</div> <!-- 没有overflow-x: hidden; → 出现水平滚动条 --> <!-- 有overflow-x: hidden; → 超出的部分被裁剪 -->5.
color: var(--text-dark);作用：
设置默认文字颜色
详细解析：
overflow属性：
overflow-x: visible; /* 默认，超出部分可见 */ overflow-x: hidden; /* 超出部分隐藏 */ overflow-x: scroll; /* 显示滚动条 */ overflow-x: auto; /* 自动判断是否需要滚动条 */instructions-container：
@media (max-width: 768px) { .instructions-container { padding: 20px; margin: 20px; }1. @media (max-width: 768px)
- 这是媒体查询的开始
- 意思是：当屏幕宽度小于等于768px时，应用括号内的CSS样式
- 768px通常是平板设备和手机的分界点
@media 媒体类型 and (媒体特性) { /* 在这里写CSS样式 */ }2. 大括号 { } 内的内容
- 这里只包含了一个选择器和样式规则
- 但通常可以包含多个CSS规则
3. .instructions-container
- 这是CSS类选择器
- 选择所有具有
class="instructions-container"的HTML元素
4. padding: 20px; 和 margin: 20px;
- padding: 20px; - 设置内边距为20px（元素内容与边框的距离）
- margin: 20px; - 设置外边距为20px（元素与其他元素的距离）
.instructions-header：
.instructions-header { text-align: center; /* 文字水平居中 */ margin-bottom: 40px; /* 底部外边距40px */ padding-bottom: 20px; /* 底部内边距20px */ border-bottom: 3px solid var(--primary-green); /* 底部边框 */ }<i></i>
Font Awesome 就是一个现成的图标库，就像编程中的库函数一样，直接调用
第一个类名：fas
fa= Font Awesome（字体图标库）s= Solid（实心样式）
Font Awesome有不同样式：
<i></i> <!-- 实心星星 ★ --> <i></i> <!-- 空心星星 ☆ --> <i></i> <!-- 品牌图标（Twitter） -->第二个类名：fa-bullseye
fa-= Font Awesome 前缀bullseye= 靶心（图标名称）
就像给人起名字：
fa- bullseye ↓ ↓ 姓氏 名字其他类似的图标：
<i></i> <!-- 靶心 🎯 --> <i></i> <!-- 十字准星 ✛ --> <i></i> <!-- 喇叭 📢 --> <i></i> <!-- 旗子 🚩 -->body第二大部分：
<section> <h2><i></i> 如何玩游戏</h2> <ol> <li><strong>开始游戏</strong>：点击右上角的"开始游戏"按钮</li> <li><strong>选择植物</strong>：点击左侧的植物卡片选择要种植的植物</li> <li><strong>种植植物</strong>：点击草坪上的格子来种植选择的植物</li> <li><strong>收集阳光</strong>：点击向日葵产生的阳光或从天而降的阳光来增加阳光数量</li> <li><strong>策略布局</strong>：合理安排植物阵容，抵御不断来袭的僵尸</li> <li><strong>使用铲子</strong>：点击铲子工具可以移除不需要的植物</li> </ol> <p>注意：每种植物都有不同的阳光消耗和冷却时间，合理安排资源是关键！</p> </section> 框架：
┌─────────────────────────────────────────────────┐ ← section边框 │ section盒子 (浅蓝色背景，绿色左边框) │ │ │ │ ┌─────────────────────────────────────────┐ │ │ │ h2盒子 (flex容器，绿色文字) │ │ │ │ ┌─────────┐ ┌──────────────┐ │ │ │ │ │ i盒子 │ │ 文字内容 │ │ │ │ │ │ 游戏手柄 │ │ "如何玩游戏" │ │ │ │ │ │ 图标🎮 │ │ │ │ │ │ │ └─────────┘ └──────────────┘ │ │ │ │ gap: 15px │ │ │ └─────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────┐ │ │ │ ol盒子 (有序列表容器) │ │ │ │ margin-left: 20px │ │ │ │ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ │ │ li盒子1 (列表项) │ │ │ │ │ │ margin-bottom: 12px │ │ │ │ │ │ ┌─────────┐ ┌──────────────┐ │ │ │ │ │ │ │ strong │ │ 描述文字 │ │ │ │ │ │ │ │ "开始游戏"│ │：点击按钮... │ │ │ │ │ │ │ └─────────┘ └──────────────┘ │ │ │ │ │ └─────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ │ │ li盒子2 (列表项) │ │ │ │ │ │ ┌─────────┐ ┌──────────────┐ │ │ │ │ │ │ │ strong │ │ 描述文字 │ │ │ │ │ │ │ │ "选择植物"│ │：点击卡片... │ │ │ │ │ │ │ └─────────┘ └──────────────┘ │ │ │ │ │ └─────────────────────────────────┘ │ │ │ │ ...（还有4个li盒子）... │ │ │ └─────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────┐ │ │ │ p盒子 (段落) │ │ │ │ "注意：每种植物..." │ │ │ └─────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────┘<div>
.plant-grid, .zombie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));1. grid-template-columns → "网格-模板-列数" 2. repeat() → "重复" 3. auto-fill → "自动填满" 4. minmax(300px, 1fr) → "最小300px，最大1份空间"想象一个书架：
grid-template-columns= "这个书架有几列？"repeat()= "我要重复做某事"auto-fill= "自动摆满，能放几本就放几本"minmax(300px, 1fr)= "每本书至少占300px宽度，但有多余空间就平分"
minmax(300px, 1fr)就是说这个针对的是一列，然后repeat一下
minmax(300px, 1fr) ← 针对一列的规则
◦ 这一列：最小300px，最大1份空间
2. repeat(..., ...) ← 重复应用这个规则
◦ 重复多少次？由auto-fill决定
3. auto-fill ← 自动填满容器
◦ 浏览器：看看能放几列这个规则
.plant-item:hover, .zombie-item:hover { transform: translateY(-5px); }卡片悬停上浮效果
.plant-item:hover, .zombie-item:hover { transform: translateY(-5px); /* ← 这里！向上移动5像素 */ }文字分布：
📦 详细对比表：
| 属性 | 作用对象 | 方向 | 容器要求 | 使用场景 |
|---|---|---|---|---|
text-align: center | 文字和内联元素 | 水平 | 任何块级元素 | 段落居中、按钮居中 |
justify-content: center | flex子项 | 水平（默认） | 必须是 display: flex | 多个元素整体居中 |
align-items: center | flex子项 | 垂直 | 必须是 display: flex | 垂直方向居中 |
