简易植物大战僵尸游戏 JavaScript版之html

可以玩的游戏，不是静态页面，css和JavaScript在主页的另外两篇中，此篇会大概讲解css和JavaScript的各个部分的作用，由于担心篇幅过长，所以此篇只展示html文件

html文件：

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="style.css">
    <script src="script.js" defer></script>
</head>

<body>
    <div class="container">
        <header>
            <h1>植物大战僵尸</h1>
            <p>通过实践学习HTML、CSS和JavaScript</p>
        </header>

        <div class="game-info">
            <div class="info-item">
                <div class="info-label">阳光</div>
                <div id="sun-count" class="info-value">150</div>
            </div>
            <div class="info-item">
                <div class="info-label">波数</div>
                <div id="wave-count" class="info-value">1/5</div>
            </div>
            <div class="info-item">
                <div class="info-label">存活僵尸</div>
                <div id="zombie-count" class="info-value">0</div>
            </div>
            <div class="info-item">
                <div class="info-label">生命值</div>
                <div id="health-count" class="info-value">5</div>
            </div>
        </div>

        <div class="game-area">
            <div class="plant-selection">
                <h2>植物选择</h2>
                <div class="plant-card" data-plant="sunflower" data-cost="50">
                    <div class="plant-icon" style="background-color: #ffd700;">🌻</div>
                    <div class="plant-name">向日葵</div>
                    <div class="plant-cost">50阳光</div>
                    <div class="plant-hp">血量: 5</div>
                </div>
                <div class="plant-card" data-plant="peashooter" data-cost="100">
                    <div class="plant-icon" style="background-color: #7cb879;">🌱</div>
                    <div class="plant-name">豌豆射手</div>
                    <div class="plant-cost">100阳光</div>
                    <div class="plant-hp">血量: 10</div>
                </div>
                <div class="plant-card" data-plant="wallnut" data-cost="50">
                    <div class="plant-icon" style="background-color: #8b4513;">🥜</div>
                    <div class="plant-name">坚果墙</div>
                    <div class="plant-cost">50阳光</div>
                    <div class="plant-hp">血量: 25</div>
                </div>
            </div>

            <div class="game-board">
                <div class="house"></div>
                <div class="lawn" id="lawn"></div>
                <div class="controls">
                    <button id="start-btn">开始游戏</button>
                    <button id="reset-btn">重新开始</button>
                </div>
            </div>
        </div>

        <div class="instructions">
            <h3>正确的游戏规则</h3>
            <ul>
                <li><strong>核心规则：</strong>
                    <ul>
                        <li>✓ 只有向日葵生产阳光</li>
                        <li>✓ 豌豆射手只攻击，不生产阳光</li>
                        <li>✓ 坚果墙只防御，不攻击</li>
                        <li>✓ 点击阳光收集阳光</li>
                        <li>✓ 僵尸到达最左侧房屋才失败</li>
                    </ul>
                </li>
                <li><strong>植物功能：</strong>
                    <ul>
                        <li>🌻向日葵：每10秒产生25阳光</li>
                        <li>🌱豌豆射手：每2秒发射豌豆</li>
                        <li>🥜坚果墙：高血量阻挡僵尸</li>
                    </ul>
                </li>
            </ul>
        </div>

        <footer>
            <p>植物大战僵尸学习项目 | 正确规则实现版</p>
        </footer>
    </div>

    <div id="message" class="message">
        <h2 id="message-title">游戏结束</h2>
        <p id="message-text"></p>
        <button id="restart-btn">重新开始</button>
    </div>

    <script src="game.js"></script>
</body>

</html>

下面开始重要部分讲解：

html 复制代码

<link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>

引入style.css文件和script.js

defer详讲：

1.1 什么是 `defer`？

defer 是 <script> 标签的一个布尔属性，它告诉浏览器：

"下载这个脚本，但等到HTML文档完全解析完成后再执行"

html 复制代码

<!-- 传统方式：立即执行，阻塞渲染 -->
<script src="script.js"></script>

<!-- 使用defer：延迟执行，不阻塞渲染 -->
<script src="script.js" defer></script>

1.2 `defer` 的核心特点

异步下载：不阻塞HTML解析
延迟执行：HTML解析完成后才执行
保持顺序 ：多个defer脚本按文档顺序执行
DOM就绪：执行时DOM已完全构建

html 复制代码

1. 下载HTML
   ↓
2. 解析HTML（构建DOM树）
   ↓ ← defer脚本在此阶段下载，但不执行
3. DOMContentLoaded事件
   ↓ ← defer脚本在此阶段执行
4. 页面完全加载（包括图片等资源）

body部分：

css 复制代码

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

这是响应式网页设计中最常用的布局容器样式，用于创建居中的内容区域

max-width的优势：

响应式：在小屏幕上自动缩小
灵活性：内容不会超出1200px，但可以更小
可读性：在大屏幕上限制行长度，提高阅读体验

工作方式：

小屏幕时：自动缩小，占满可用空间
大屏幕时：最多只显示1200px宽，居中显示

所以不会出现水平滚动条

盒子框架划分：

HTML结构：

html 复制代码

<div class="container">
    <header>  <!-- 这个header在.container里面 -->
        <h1>植物大战僵尸</h1>
    </header>
</div>

html 复制代码

 <header>
       <h1>植物大战僵尸</h1>
       <p>通过实践学习HTML、CSS和JavaScript</p>
 </header>

css 复制代码

header {
    text-align: center;
    padding: 15px;
    background-color: #4a7c3a;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

css 复制代码

.container {
    max-width: 1200px;  /* ← 限制最大宽度为1200px */
    margin: 0 auto;     /* ← 水平居中 */
    padding: 10px;
}

header {
    /* header在.container内部，所以被限制了宽度 */
    text-align: center;
    padding: 15px;
    background-color: #4a7c3a;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

视觉化效果：

css 复制代码

+----------------------------------------------------------+
| 浏览器窗口（例如1920px宽）                               |
|                                                          |
|     空白区域       +----------------+      空白区域      |
|                   |   .container    |                    |
|                   |   max:1200px    |                    |
|                   | +------------+  |                    |
|                   | |   header   |  | ← 只有中间部分      |
|                   | +------------+  |                    |
|                   +----------------+                    |
|                                                          |
+----------------------------------------------------------+

gameinfo部分：

盒子框架：

html：

html 复制代码

<div class="game-info">
            <div class="info-item">
                <div class="info-label">阳光</div>
                <div id="sun-count" class="info-value">150</div>
            </div>
            <div class="info-item">
                <div class="info-label">波数</div>
                <div id="wave-count" class="info-value">1/5</div>
            </div>
            <div class="info-item">
                <div class="info-label">存活僵尸</div>
                <div id="zombie-count" class="info-value">0</div>
            </div>
            <div class="info-item">
                <div class="info-label">生命值</div>
                <div id="health-count" class="info-value">5</div>
            </div>
        </div>

css：

css 复制代码

.game-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    background-color: #3a6b2a;
    padding: 10px 20px;
    border-radius: 10px;
}

大盒子框架：弹性布局，两端对齐，外边距（距离下一个模块盒子15px），背景色，内边距，圆角

css 复制代码

.info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

内部的小盒子：4个，弹性布局，内容竖着排列(交叉轴），交叉轴内容沿交叉轴居中

css 复制代码

.info-label {
    font-size: 0.9rem;
    color: #ccc;
}

小字体

css 复制代码

.info-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffd700;
}

大字体，粗体

game-area部分：

盒子框架：

css 复制代码

.game-area {
    display: flex;
    gap: 20px;
}

大框架，大盒子里面有两个盒子，间隙gap为20px

第一个小盒子框架

html 复制代码

 <div class="plant-selection">
                <h2>植物选择</h2>
                <div class="plant-card" data-plant="sunflower" data-cost="50">
                    <div class="plant-icon" style="background-color: #ffd700;">🌻</div>
                    <div class="plant-name">向日葵</div>
                    <div class="plant-cost">50阳光</div>
                    <div class="plant-hp">血量: 5</div>
                </div>
                <div class="plant-card" data-plant="peashooter" data-cost="100">
                    <div class="plant-icon" style="background-color: #7cb879;">🌱</div>
                    <div class="plant-name">豌豆射手</div>
                    <div class="plant-cost">100阳光</div>
                    <div class="plant-hp">血量: 10</div>
                </div>
                <div class="plant-card" data-plant="wallnut" data-cost="50">
                    <div class="plant-icon" style="background-color: #8b4513;">🥜</div>
                    <div class="plant-name">坚果墙</div>
                    <div class="plant-cost">50阳光</div>
                    <div class="plant-hp">血量: 25</div>
                </div>
            </div>

css 复制代码

.plant-selection {
    width: 200px;
    background-color: #3a6b2a;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

固定宽度（不随大小屏幕变化），背景色，圆角，内边，阴影效果

css 复制代码

.plant-selection h2 {
    text-align: center;
    margin-bottom: 15px;
    color: #ffd700;
    font-size: 1.5rem;
}

内容居中，下外边距，颜色，字体大小

选择植物的盒子：

html 复制代码

<div class="plant-card" data-plant="sunflower" data-cost="50">
                    <div class="plant-icon" style="background-color: #ffd700;">🌻</div>
                    <div class="plant-name">向日葵</div>
                    <div class="plant-cost">50阳光</div>
                    <div class="plant-hp">血量: 5</div>
                </div>

css 复制代码

.plant-card {
    background-color: #4a7c3a;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    text-align: center;
}

背景，圆角，内边距，下外边距，cursor: pointer; transition: all 0.2s; border: 2px solid transparent;单独出一篇文章，内容居中

后续在下一篇

简易植物大战僵尸游戏 JavaScript版之html

html文件：

下面开始重要部分讲解：

defer详讲：

1.1 什么是 defer？

1.2 defer 的核心特点

body部分：

头部header制作的实现：

gameinfo部分：

game-area部分：

盒子框架：

第一个小盒子框架

选择植物的盒子：

1.1 什么是 `defer`？

1.2 `defer` 的核心特点