html+css+js趣味小游戏~Cookie Clicker放置休闲（附源码）

news2025/6/8 8:31:19

下面是一个简单的记忆卡片配对游戏的完整代码，使用HTML、CSS和JavaScript实现：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie Clicker 简化版</title>
</head>
<body>
    <h1>Cookie Clicker</h1>
    <img id="cookie" src="https://img.icons8.com/color/480/cookie.png" alt="Cookie">
    <div id="counter">饼干数量: 0</div>
    <div id="upgrades">
        <div class="upgrade" data-upgrade="cursor" data-cost="15" data-multiplier="1">
            <h3>鼠标 (15)</h3>
            <p>每秒生产 1 饼干</p>
        </div>
        <div class="upgrade" data-upgrade="grandma" data-cost="100" data-multiplier="5">
            <h3>奶奶 (100)</h3>
            <p>每秒生产 5 饼干</p>
        </div>
        <div class="upgrade" data-upgrade="farm" data-cost="500" data-multiplier="20">
            <h3>农场 (500)</h3>
            <p>每秒生产 20 饼干</p>
        </div>
    </div>

</body>
</html>

css

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #FFE4B5;
    font-family: Arial, sans-serif;
}
#cookie {
    width: 200px;
    height: 200px;
    cursor: pointer;
    transition: transform 0.1s;
}

JavaScript

let cookies = 0;
let cookiesPerSecond = 0;
const cookieElement = document.getElementById('cookie');
const counterElement = document.getElementById('counter');
const upgrades = document.querySelectorAll('.upgrade');

// 点击饼干增加数量
cookieElement.addEventListener('click', () => {
    cookies++;
    updateCounter();
});

// 更新饼干计数显示
function updateCounter() {
    counterElement.textContent = `饼干数量: ${cookies}`;
}

// 检查是否可以购买升级项
function checkUpgrades() {
    upgrades.forEach(upgrade => {
        const cost = parseInt(upgrade.getAttribute('data-cost'));
        if (cookies >= cost) {
            upgrade.classList.remove('locked');
        } else {
            upgrade.classList.add('locked');
        }
    });
}