动态宠物HTML网页制作代码大全，如何快速上手？-网页设计-锦华智联科技

我们将创建一个名为 "小萌宠之家" 的网页,它包含以下核心功能：

（图片来源网络，侵删）

宠物展示区：显示宠物的形象、名字、状态（心情、饥饿度等）。
互动功能区：喂食、玩耍、洗澡、睡觉等按钮,可以与宠物互动。
动态效果：宠物会根据互动做出不同的动画（如吃、开心、睡觉）,状态条会实时变化。
数据持久化：使用 localStorage 保存宠物状态，即使刷新页面,数据也不会丢失。

最终效果预览

我们将实现一个类似下图效果的网页：

第一部分：项目结构与基础HTML

我们需要创建三个基本文件：index.html (结构), style.css (样式), 和 script.js (逻辑)。

创建项目文件夹

在你的电脑上创建一个新文件夹，virtual-pet,然后在里面创建以下三个空文件：

index.html
style.css
script.js

编写 `index.html` (网页骨架)

这个文件定义了网页的结构，包括宠物显示区域、状态条和互动按钮。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">小萌宠之家</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入一个图标库，让按钮更美观 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <h1>我的虚拟宠物</h1>
        <!-- 宠物信息展示区 -->
        <div class="pet-info">
            <h2 id="pet-name">小可爱</h2>
            <div id="pet-container">
                <!-- 宠物形象，用CSS绘制或使用图片 -->
                <div id="pet" class="pet">
                    <div class="pet-face">
                        <div class="pet-eyes"></div>
                        <div class="pet-mouth"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 宠物状态条 -->
        <div class="status-container">
            <div class="status-bar">
                <span class="status-label"><i class="fas fa-heart"></i> 心情</span>
                <div class="bar-bg">
                    <div id="mood-bar" class="bar-fill mood-fill"></div>
                </div>
                <span id="mood-value">100</span>
            </div>
            <div class="status-bar">
                <span class="status-label"><i class="fas fa-drumstick-bite"></i> 饱食度</span>
                <div class="bar-bg">
                    <div id="hunger-bar" class="bar-fill hunger-fill"></div>
                </div>
                <span id="hunger-value">100</span>
            </div>
            <div class="status-bar">
                <span class="status-label"><i class="fas fa-soap"></i> 清洁度</span>
                <div class="bar-bg">
                    <div id="clean-bar" class="bar-fill clean-fill"></div>
                </div>
                <span id="clean-value">100</span>
            </div>
        </div>
        <!-- 互动按钮区 -->
        <div class="actions">
            <button id="feed-btn" class="action-btn">
                <i class="fas fa-cookie-bite"></i> 喂食
            </button>
            <button id="play-btn" class="action-btn">
                <i class="fas fa-gamepad"></i> 玩耍
            </button>
            <button id="clean-btn" class="action-btn">
                <i class="fas fa-shower"></i> 洗澡
            </button>
            <button id="sleep-btn" class="action-btn">
                <i class="fas fa-bed"></i> 睡觉
            </button>
        </div>
        <!-- 消息提示区 -->
        <div id="message-box" class="message-box"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

第二部分：样式设计 `style.css`

这个文件负责美化我们的网页,让它看起来更生动有趣。

/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
body {
    font-family: 'Comic Neue', cursive;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: #333;
}
.container {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 500px;
    width: 90%;
}
h1 {
    color: #ff6b6b;
    margin-bottom: 20px;
}
.pet-info h2 {
    color: #4ecdc4;
    margin-bottom: 10px;
}
/* 宠物样式 */
#pet-container {
    margin: 20px auto;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#pet {
    width: 150px;
    height: 150px;
    background-color: #ffd93d;
    border-radius: 50%;
    position: relative;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
#pet:hover {
    transform: scale(1.05);
}
.pet-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pet-eyes {
    display: flex;
    justify-content: space-around;
    width: 60px;
    margin: 0 auto 15px;
}
.pet-eyes::before,
.pet-eyes::after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-color: #333;
    border-radius: 50%;
}
.pet-mouth {
    width: 40px;
    height: 20px;
    border-bottom: 3px solid #333;
    border-radius: 0 0 40px 40px;
    margin: 0 auto;
}
/* 动画效果 */
#pet.eating {
    animation: eat 0.5s ease-in-out;
}
#pet.playing {
    animation: play 0.5s ease-in-out;
}
#pet.cleaning {
    animation: clean 0.5s ease-in-out;
}
#pet.sleeping .pet-eyes::before,
#pet.sleeping .pet-eyes::after {
    height: 3px;
    margin-top: 6px;
}
#pet.sleeping .pet-mouth {
    border-bottom: none;
    border-top: 3px solid #333;
    border-radius: 40px 40px 0 0;
    width: 30px;
    margin-top: 10px;
}
@keyframes eat {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(0.95) rotate(-5deg); }
}
@keyframes play {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-10deg); }
    75% { transform: scale(1.1) rotate(10deg); }
}
@keyframes clean {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
/* 状态条样式 */
.status-container {
    margin: 20px 0;
}
.status-bar {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.status-label {
    width: 80px;
    text-align: left;
    font-size: 1.1em;
    color: #555;
}
.bar-bg {
    flex-grow: 1;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 10px;
}
.bar-fill {
    height: 100%;
    width: 100%; /* 初始宽度为100% */
    transition: width 0.5s ease-in-out;
}
.mood-fill { background-color: #ff6b6b; }
.hunger-fill { background-color: #4ecdc4; }
.clean-fill { background-color: #95e1d3; }
.status-value {
    width: 40px;
    font-weight: bold;
    color: #333;
}
/* 按钮样式 */
.actions {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
}
.action-btn {
    padding: 12px 20px;
    font-size: 1.1em;
    border: none;
    border-radius: 50px;
    background-color: #ff6b6b;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}
.action-btn:hover {
    background-color: #ff5252;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}
.action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* 消息提示框 */
.message-box {
    margin-top: 20px;
    padding: 10px;
    border-radius: 10px;
    background-color: #e8f5e9;
    color: #2e7d32;
    font-weight: bold;
    min-height: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.message-box.show {
    opacity: 1;
}

第三部分：交互逻辑 `script.js`

这是网页的灵魂，它负责处理所有用户交互、更新宠物状态、保存数据等。

// script.js
document.addEventListener('DOMContentLoaded', () => {
    // --- 1. 获取DOM元素 ---
    const pet = document.getElementById('pet');
    const petName = document.getElementById('pet-name');
    const moodBar = document.getElementById('mood-bar');
    const hungerBar = document.getElementById('hunger-bar');
    const cleanBar = document.getElementById('clean-bar');
    const moodValue = document.getElementById('mood-value');
    const hungerValue = document.getElementById('hunger-value');
    const cleanValue = document.getElementById('clean-value');
    const messageBox = document.getElementById('message-box');
    const feedBtn = document.getElementById('feed-btn');
    const playBtn = document.getElementById('play-btn');
    const cleanBtn = document.getElementById('clean-btn');
    const sleepBtn = document.getElementById('sleep-btn');
    // --- 2. 宠物状态对象 ---
    let petStats = {
        mood: 100,
        hunger: 100,
        cleanliness: 100
    };
    // --- 3. 初始化宠物状态 ---
    function loadPetStats() {
        const savedStats = localStorage.getItem('virtualPetStats');
        if (savedStats) {
            petStats = JSON.parse(savedStats);
            updateUI();
        }
    }
    // --- 4. 更新UI界面 ---
    function updateUI() {
        // 更新状态条
        moodBar.style.width = `${petStats.mood}%`;
        hungerBar.style.width = `${petStats.hunger}%`;
        cleanBar.style.width = `${petStats.cleanliness}%`;
        // 更新数值
        moodValue.textContent = petStats.mood;
        hungerValue.textContent = petStats.hunger;
        cleanValue.textContent = petStats.cleanliness;
        // 保存到localStorage
        localStorage.setItem('virtualPetStats', JSON.stringify(petStats));
    }
    // --- 5. 显示消息 ---
    function showMessage(text) {
        messageBox.textContent = text;
        messageBox.classList.add('show');
        setTimeout(() => {
            messageBox.classList.remove('show');
        }, 2000);
    }
    // --- 6. 宠物互动函数 ---
    function feed() {
        if (petStats.hunger >= 100) {
            showMessage("小可爱已经吃饱了，不能再吃了！");
            return;
        }
        pet.classList.add('eating');
        petStats.hunger = Math.min(100, petStats.hunger + 20);
        petStats.mood = Math.min(100, petStats.mood + 5);
        updateUI();
        showMessage("喂食成功！小可爱很开心。");
        setTimeout(() => pet.classList.remove('eating'), 500);
    }
    function play() {
        if (petStats.mood >= 100) {
            showMessage("小可爱现在非常开心，想休息一下了。");
            return;
        }
        if (petStats.hunger < 30 || petStats.cleanliness < 30) {
            showMessage("小可爱又饿又不干净，没心情玩！");
            return;
        }
        pet.classList.add('playing');
        petStats.mood = Math.min(100, petStats.mood + 20);
        petStats.hunger = Math.max(0, petStats.hunger - 10);
        petStats.cleanliness = Math.max(0, petStats.cleanliness - 10);
        updateUI();
        showMessage("玩耍真开心！但是消耗了一些体力。");
        setTimeout(() => pet.classList.remove('playing'), 500);
    }
    function clean() {
        if (petStats.cleanliness >= 100) {
            showMessage("小可爱已经非常干净了！");
            return;
        }
        pet.classList.add('cleaning');
        petStats.cleanliness = Math.min(100, petStats.cleanliness + 30);
        petStats.mood = Math.min(100, petStats.mood + 5);
        updateUI();
        showMessage("洗完澡真舒服！小可爱感觉清爽多了。");
        setTimeout(() => pet.classList.remove('cleaning'), 500);
    }
    function sleep() {
        pet.classList.add('sleeping');
        petStats.mood = Math.min(100, petStats.mood + 15);
        petStats.hunger = Math.max(0, petStats.hunger - 5);
        updateUI();
        showMessage("Zzz... 小可爱正在睡觉，恢复精力中...");
        setTimeout(() => pet.classList.remove('sleeping'), 3000); // 睡觉动画持续3秒
    }
    // --- 7. 绑定按钮事件 ---
    feedBtn.addEventListener('click', feed);
    playBtn.addEventListener('click', play);
    cleanBtn.addEventListener('click', clean);
    sleepBtn.addEventListener('click', sleep);
    // --- 8. 状态自然衰减 ---
    // 每隔一段时间，宠物的状态会自然下降
    setInterval(() => {
        petStats.mood = Math.max(0, petStats.mood - 1);
        petStats.hunger = Math.max(0, petStats.hunger - 2);
        petStats.cleanliness = Math.max(0, petStats.cleanliness - 1);
        updateUI();
        // 检查宠物状态，如果太差则显示警告
        if (petStats.hunger === 0) {
            showMessage("警告：小可爱快饿坏了！快给它喂食吧！");
        }
        if (petStats.cleanliness === 0) {
            showMessage("警告：小可爱太脏了，快给它洗澡！");
        }
        if (petStats.mood === 0) {
            showMessage("警告：小可爱非常不开心，陪它玩玩吧！");
        }
    }, 10000); // 每10秒衰减一次
    // --- 9. 启动应用 ---
    loadPetStats();
});

第四部分：如何运行和扩展

如何运行？

将上述三段代码分别复制到 index.html, style.css, script.js 文件中。
确保这三个文件都在同一个 virtual-pet 文件夹内。
用浏览器（如 Chrome, Firefox, Edge）打开 index.html 文件即可看到效果。

如何扩展和改进？

这个项目是一个很好的起点,你可以在此基础上进行很多有趣的扩展：

添加更多宠物：
- 在 index.html 中为不同宠物创建不同的 div 结构，并用CSS设计不同外观（如猫、狗、龙）。
- 在 script.js 中添加一个宠物选择功能,切换时改变显示的宠物和状态数据。
引入图片/SVG：
- 用可爱的宠物图片或SVG图形替换掉我们用CSS绘制的简单圆形。
- 为不同的动作（吃、睡、玩）准备多张图片,实现更丰富的帧动画。
增加更多互动：
- 商店系统：添加一个商店，可以购买食物、玩具等物品。
- 经验值/等级系统：每次互动增加经验值，达到一定数值后升级,解锁新功能或外观。
- 迷你游戏：点击“玩耍”按钮时,可以弹出一个简单的反应速度游戏。
- 自定义宠物：允许用户给宠物改名、选择颜色或配件。
美化界面：
- 使用更复杂的CSS动画和过渡效果。
- 添加背景音乐和音效（使用HTML5的 <audio> 标签）。
- 设计响应式布局,让网页在手机上也能完美显示。
后端集成：
- 如果想让数据在多台设备间同步，可以将 localStorage 替换为与服务器（如 Firebase）的交互,实现真正的在线宠物。

这份“代码大全”为你提供了一个功能完整、结构清晰的动态宠物网页，希望它能激发你的创造力,祝你制作愉快！

动态宠物HTML网页制作代码大全，如何快速上手？