【HTML+CSS】你的第一个电子宠物开代码

news2024/10/5 3:20:27

创建一个电子宠物项目是一个有趣的前端开发练习，可以帮你熟悉HTML、CSS和JavaScript。下面是一个简单的指南，帮助你开始这个项目：

1. 项目规划

首先，你需要规划你的电子宠物项目。决定你的电子宠物将有哪些特性，比如：

显示宠物的图像
宠物的饥饿度和健康度
喂食和玩耍的功能
宠物成长和变化

2. 设计界面

使用HTML和CSS来设计你的电子宠物界面。你可以使用如下的简单结构：

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子宠物</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="pet-container">
        <img id="pet-image" src="pet.png" alt="电子宠物">
        <div id="pet-stats">
            <p>饥饿度: <span id="hunger">100</span></p>
            <p>健康度: <span id="health">100</span></p>
        </div>
        <button id="feed">喂食</button>
        <button id="play">玩耍</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

#pet-container {
    text-align: center;
}

#pet-image {
    width: 200px;
    height: auto;
}

#pet-stats p {
    margin: 5px;
}

button {
    margin: 5px;
    padding: 10px;
}

3. 添加交互

使用JavaScript来添加交互性。你需要创建一些函数来处理喂食和玩耍的逻辑。

JavaScript (script.js)

let hunger = 100;
let health = 100;

document.getElementById('feed').addEventListener('click', function() {
    hunger -= 10;
    if (hunger < 0) hunger = 0;
    document.getElementById('hunger').textContent = hunger;
    health += 5;
    if (health > 100) health = 100;
    document.getElementById('health').textContent = health;
});

document.getElementById('play').addEventListener('click', function() {
    hunger += 10;
    if (hunger > 100) hunger = 100;
    document.getElementById('hunger').textContent = hunger;
    health -= 5;
    if (health < 0) health = 0;
    document.getElementById('health').textContent = health;
});