植物大战僵尸前端

全部代码：

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 class="instructions-container">
<header class="instructions-header">
<h1>
<img src="https://www.171host.com/wp-content/uploads/2026/02/20260201051349-697ee10d4322a.png" alt="植物" width="48" height="48">
植物大战僵尸 – 游戏说明
<img src="https://www.171host.com/wp-content/uploads/2026/02/20260201051349-697ee10d4cc9f.png" alt="僵尸" width="48" height="48">
</h1>
<p>欢迎来到植物大战僵尸！这是一款策略塔防游戏，你需要种植各种植物来抵御僵尸的进攻。</p>
</header>

<section class="instructions-section game-objective">
<h2 class="section-title"><i class="fas fa-bullseye"></i> 游戏目标</h2>
<p>你的目标是保护你的房屋免受僵尸入侵。僵尸会从右侧出现并向左移动，试图进入你的房屋。如果僵尸到达最左侧，游戏结束。</p>
<p>通过种植植物来攻击、阻挡和消灭僵尸，成功抵御所有僵尸波次即可赢得关卡胜利！</p>
</section>

<section class="instructions-section how-to-play">
<h2 class="section-title"><i class="fas fa-gamepad"></i> 如何玩游戏</h2>
<ol class="instructions-list">
<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 class="instructions-section plants-guide">
<h2 class="section-title"><i class="fas fa-seedling"></i> 植物图鉴</h2>
<p>了解每种植物的特性，合理搭配你的防御阵容：</p>

<div class="plant-grid">
<div class="plant-item">
<div class="plant-icon">
<img src="https://www.171host.com/wp-content/uploads/2026/02/20260201051349-697ee10d55f51.png" alt="向日葵">
</div>
<div class="plant-info">
<h3 class="plant-name">向日葵</h3>
<div class="plant-cost">消耗：50阳光</div>
<p class="plant-desc">每隔24秒产生25阳光，是阳光经济的基础。</p>
</div>
</div>

<div class="plant-item">
<div class="plant-icon">
<img src="https://img.icons8.com/color/96/000000/pea-shooter.png" alt="豌豆射手">
</div>
<div class="plant-info">
<h3 class="plant-name">豌豆射手</h3>
<div class="plant-cost">消耗：100阳光</div>
<p class="plant-desc">每隔1.4秒发射一颗豌豆，攻击直线上的僵尸。</p>
</div>
</div>

<div class="plant-item">
<div class="plant-icon">
<img src="https://img.icons8.com/color/96/000000/wall-nut.png" alt="坚果墙">
</div>
<div class="plant-info">
<h3 class="plant-name">坚果墙</h3>
<div class="plant-cost">消耗：50阳光</div>
<p class="plant-desc">高耐久植物，可以阻挡僵尸前进，为攻击植物争取时间。</p>
</div>
</div>

<div class="plant-item">
<div class="plant-icon">
<img src="https://img.icons8.com/color/96/000000/cherry-bomb.png" alt="樱桃炸弹">
</div>
<div class="plant-info">
<h3 class="plant-name">樱桃炸弹</h3>
<div class="plant-cost">消耗：150阳光</div>
<p class="plant-desc">种植后立即爆炸，消灭周围3×3范围内的所有僵尸。</p>
</div>
</div>

<div class="plant-item">
<div class="plant-icon">
<img src="https://img.icons8.com/color/96/000000/potato-mine.png" alt="土豆地雷">
</div>
<div class="plant-info">
<h3 class="plant-name">土豆地雷</h3>
<div class="plant-cost">消耗：25阳光</div>
<p class="plant-desc">埋在地下，需要时间准备，僵尸踩到会爆炸。</p>
</div>
</div>

<div class="plant-item">
<div class="plant-icon">
<img src="https://img.icons8.com/color/96/000000/snow-pea.png" alt="寒冰射手">
</div>
<div class="plant-info">
<h3 class="plant-name">寒冰射手</h3>
<div class="plant-cost">消耗：175阳光</div>
<p class="plant-desc">发射冰冻豌豆，可以减缓僵尸的移动速度。</p>
</div>
</div>

<div class="plant-item">
<div class="plant-icon">
<img src="https://img.icons8.com/color/96/000000/repeater.png" alt="双发射手">
</div>
<div class="plant-info">
<h3 class="plant-name">双发射手</h3>
<div class="plant-cost">消耗：200阳光</div>
<p class="plant-desc">一次发射两颗豌豆，是豌豆射手的升级版。</p>
</div>
</div>
</div>
</section>

<section class="instructions-section zombies-guide">
<h2 class="section-title"><i class="fas fa-skull-crossbones"></i> 僵尸图鉴</h2>
<p>了解你的敌人，制定相应的防御策略：</p>

<div class="zombie-grid">
<div class="zombie-item">
<div class="zombie-icon">
<img src="https://www.171host.com/wp-content/uploads/2026/02/20260201051349-697ee10d4cc9f.png" alt="普通僵尸">
</div>
<div class="zombie-info">
<h3 class="zombie-name">普通僵尸</h3>
<div class="zombie-health">生命值：中等</div>
<p class="zombie-desc">最常见的僵尸类型，移动速度中等。</p>
</div>
</div>

<div class="zombie-item">
<div class="zombie-icon">
<img src="https://img.icons8.com/color/96/000000/zombie-with-cone.png" alt="路障僵尸">
</div>
<div class="zombie-info">
<h3 class="zombie-name">路障僵尸</h3>
<div class="zombie-health">生命值：高</div>
<p class="zombie-desc">头戴路障，比普通僵尸更耐打。</p>
</div>
</div>

<div class="zombie-item">
<div class="zombie-icon">
<img src="https://img.icons8.com/color/96/000000/zombie-with-bucket.png" alt="铁桶僵尸">
</div>
<div class="zombie-info">
<h3 class="zombie-name">铁桶僵尸</h3>
<div class="zombie-health">生命值：非常高</div>
<p class="zombie-desc">头戴铁桶，极其耐打，需要集中火力攻击。</p>
</div>
</div>
</div>
</section>

<section class="instructions-section tips">
<h2 class="section-title"><i class="fas fa-lightbulb"></i> 游戏技巧与策略</h2>

<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-sun"></i>
</div>
<div class="tip-content">
<h4>阳光经济优先</h4>
<p>游戏前期多种植向日葵，建立稳定的阳光收入来源。建议至少种植3-4棵向日葵后再考虑攻击植物。</p>
</div>
</div>

<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="tip-content">
<h4>前排防御很重要</h4>
<p>在僵尸出现的前排位置种植坚果墙，为后排的攻击植物争取更多输出时间。</p>
</div>
</div>

<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-crosshairs"></i>
</div>
<div class="tip-content">
<h4>合理布置攻击植物</h4>
<p>将豌豆射手等攻击植物放在后排，确保它们有足够的安全空间进行攻击。</p>
</div>
</div>

<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-bomb"></i>
</div>
<div class="tip-content">
<h4>善用樱桃炸弹</h4>
<p>当大量僵尸聚集时，使用樱桃炸弹可以瞬间清理一大片区域，化解危机。</p>
</div>
</div>

<div class="tip-item">
<div class="tip-icon">
<i class="fas fa-snowflake"></i>
</div>
<div class="tip-content">
<h4>减速效果显著</h4>
<p>寒冰射手的减速效果可以让僵尸在火力范围内停留更久，显著提高击杀效率。</p>
</div>
</div>
</section>

<div class="back-button">
<a href="index.html">
<i class="fas fa-arrow-left"></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', /* 第一选择：如果用户电脑有Arial字体 */
sans-serif /* 备胎：如果没有Arial，用系统默认的无衬线字体 */

2.

background: linear-gradient(135deg,
var(–primary-green) 0%,
var(–dark-green) 100%);

作用：

创建渐变背景色

详细解析：

0deg → 从上到下
90deg → 从左到右
135deg → 从左下到右上（对角线）
180deg → 从下到上

颜色分布：

var(–primary-green) 0% /* 开始颜色（左下角） */
var(–dark-green) 100% /* 结束颜色（右上角） */

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;

作用：

隐藏水平方向的溢出内容

详细解析：

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 class="fas fa-bullseye"></i>

 Font Awesome 就是一个现成的图标库，就像编程中的库函数一样，直接调用

第一个类名：fas

• fa = Font Awesome（字体图标库）

• s = Solid（实心样式）

Font Awesome有不同样式：

<i class="fas fa-star"></i> <!– 实心星星 ★ –>
<i class="far fa-star"></i> <!– 空心星星 ☆ –>
<i class="fab fa-twitter"></i> <!– 品牌图标（Twitter） –>

第二个类名：fa-bullseye

• fa- = Font Awesome 前缀

• bullseye = 靶心（图标名称）

就像给人起名字：

fa- bullseye
↓ ↓
姓氏 名字

其他类似的图标：

<i class="fas fa-bullseye"></i> <!– 靶心 🎯 –>
<i class="fas fa-crosshairs"></i> <!– 十字准星 ✛ –>
<i class="fas fa-bullhorn"></i> <!– 喇叭 📢 –>
<i class="fas fa-flag"></i> <!– 旗子 🚩 –>

body第二大部分：

<section class="instructions-section how-to-play">
<h2 class="section-title"><i class="fas fa-gamepad"></i> 如何玩游戏</h2>
<ol class="instructions-list">
<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 class="plant-grid">

.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像素 */
}

文字分布：

📦 详细对比表：