当前位置：首页 > news >正文

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

news 来源：原创 2025/6/7 5:07:27

下面是一个简单的记忆卡片配对游戏的完整代码，使用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');}});
}