- js24012 的博客
电池点击器
-
js24012
LV 5
@
2026-3-18 17:40:51
电池点击器
请把在几个放在同一个文件夹里
<!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 href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
background: linear-gradient(to right, #a1c4fd, #c2e9fb);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.battery-icon {
transition: transform 0.2s ease;
}
.battery-icon:hover {
transform: scale(1.1);
}
.click-effect {
position: absolute;
width: 30px;
height: 30px;
pointer-events: none;
animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-100px); }
}
.upgrade-card {
transition: all 0.3s ease;
}
.upgrade-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.progress-bar {
height: 8px;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
transition: width 0.3s ease;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
<header class="w-full max-w-6xl text-center mb-6">
<h1 class="text-4xl font-bold text-gray-800">🔋 电池点击器</h1>
<p class="text-gray-600 mt-2">点击电池充电，升级设备提升效率！</p>
</header>
<main class="w-full max-w-6xl bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-6 mb-8">
<div class="text-center">
<div class="text-5xl font-extrabold text-blue-600" id="score">0</div>
<div class="text-gray-600 mt-1">总电量</div>
</div>
<div class="relative cursor-pointer battery-icon" id="battery">
<img src="https://cdn-icons-png.flaticon.com/512/3081/3081559.png" alt="可点击的电池图标" class="w-32 h-32 mx-auto">
</div>
<div class="text-center">
<div class="text-2xl font-semibold text-green-600" id="perClick">+1 每次点击</div>
<div class="text-gray-600 mt-1">当前效率</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">💾 存档管理</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<button class="py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition flex items-center justify-center" onclick="saveGame()">
<i class="fas fa-save mr-2"></i>保存游戏
</button>
<button class="py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition flex items-center justify-center" onclick="loadGame()">
<i class="fas fa-download mr-2">加载游戏
</button>
<button class="py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition flex items-center justify-center" onclick="resetGame()">
<i class="fas fa-trash-alt mr-2"></i>重置游戏
</button>
</div>
<div class="bg-gray-100 p-4 rounded-lg mb-6">
<div class="flex justify-between items-center mb-2">
<span class="text-gray-700">存档安全等级</span>
<span class="text-green-600 font-bold" id="securityLevel">高</span>
</div>
<div class="progress-bar bg-gray-300">
<div class="progress-fill bg-green-500" style="width: 100%"></div>
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">🔋 升级商店</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="upgrade-card bg-blue-50 p-4 rounded-lg shadow">
<h3 class="font-semibold text-gray-800">🔋 基础电池</h3>
<p class="text-sm text-gray-600 mt-1">每次点击 +1</p>
<div class="mt-2 text-sm text-gray-500">等级: <span id="basicBatteryLevel">0</span></div>
<button class="mt-2 w-full py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition" onclick="upgradeBattery()">升级 (<span id="basicBatteryCost">10</span>)</button>
</div>
<div class="upgrade-card bg-green-50 p-4 rounded-lg shadow">
<h3 class="font-semibold text-gray-800">⚡ 自动充电器</h3>
<p class="text-sm text-gray-600 mt-1">每秒 +5</p>
<div class="mt-2 text-sm text-gray-500">数量: <span id="autoChargerCount">0</span></div>
<button class="mt-2 w-full py-2 bg-green-500 text-white rounded hover:bg-green-600 transition" onclick="buyAutoCharger()">购买 (<span id="autoChargerCost">50</span>)</button>
</div>
<div class="upgrade-card bg-purple-50 p-4 rounded-lg shadow">
<h3 class="font-semibold text-gray-800">🔋 超级电池</h3>
<p class="text-sm text-gray-600 mt-1">每次点击 +10</p>
<div class="mt-2 text-sm text-gray-500">数量: <span id="superBatteryCount">0</span></div>
<button class="mt-2 w-full py-2 bg-purple-500 text-white rounded hover:bg-purple-600 transition" onclick="buySuperBattery()">购买 (<span id="superBatteryCost">200</span>)</button>
</div>
<div class="upgrade-card bg-yellow-50 p-4 rounded-lg shadow">
<h3 class="font-semibold text-gray-800">👵 老太婆</h3>
<p class="text-sm text-gray-600 mt-1">每秒 +1</p>
<div class="mt-2 text-sm text-gray-500">数量: <span id="grandmaCount">0</span></div>
<button class="mt-2 w-full py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition" onclick="buyGrandma()">购买 (<span id="grandmaCost">15</span>)</button>
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">📊 生产统计</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-blue-100 p-4 rounded-lg">
<div class="text-lg font-semibold text-blue-800">手动点击</div>
<div class="text-2xl font-bold text-blue-600" id="manualProduction">0</div>
<div class="text-sm text-gray-600">总产量</div>
</div>
<div class="bg-green-100 p-4 rounded-lg">
<div class="text-lg font-semibold text-green-800">自动充电器</div>
<div class="text-2xl font-bold text-green-600" id="autoChargerProduction">0</div>
<div class="text-sm text-gray-600">每秒产量</div>
</div>
<div class="bg-purple-100 p-4 rounded-lg">
<div class="text-lg font-semibold text-purple-800">超级电池</div>
<div class="text-2xl font-bold text-purple-600" id="superBatteryProduction">0</div>
<div class="text-sm text-gray-600">每秒产量</div>
</div>
<div class="bg-yellow-100 p-4 rounded-lg">
<div class="text-lg font-semibold text-yellow-800">老太婆</div>
<div class="text-2xl font-bold text-yellow-600" id="grandmaProduction">0</div>
<div class="text-sm text-gray-600">每秒产量</div>
</div>
</div>
</div>
</main>
<footer class="w-full max-w-6xl text-center text-gray-600 text-sm">
© 2026 电池点击器游戏 | 点击越多，能量越强！
</footer>
<script src="script.js"></script>
</body>
</html>
// 游戏数据
let gameData = {
score: 0,
perClick: 1,
manualProduction: 0,
lastSaveTime: Date.now(),
// 升级数据
upgrades: {
basicBattery: { level: 0, baseCost: 10, costMultiplier: 1.15 },
autoCharger: { count: 0, baseCost: 50, costMultiplier: 1.15, production: 5 },
superBattery: { count: 0, baseCost: 200, costMultiplier: 1.15, production: 10 },
grandma: { count: 0, baseCost: 15, costMultiplier: 1.15, production: 1 }
}
};
// DOM 元素
const scoreElement = document.getElementById('score');
const perClickElement = document.getElementById('perClick');
const batteryElement = document.getElementById('battery');
const manualProductionElement = document.getElementById('manualProduction');
const autoChargerProductionElement = document.getElementById('autoChargerProduction');
const superBatteryProductionElement = document.getElementById('superBatteryProduction');
const grandmaProductionElement = document.getElementById('grandmaProduction');
// 加密密钥（实际应用中应更复杂）
const ENCRYPTION_KEY = "BatteryClicker2026!@#";
// 简单的加密函数
function encryptData(data) {
try {
// 转换为JSON字符串
const jsonString = JSON.stringify(data);
// 添加时间戳和随机盐值
const timestamp = Date.now().toString();
const salt = Math.random().toString(36).substring(2, 10);
// 混合数据
const mixedData = `${jsonString}|${timestamp}|${salt}`;
// 简单的字符替换加密
let encrypted = '';
for (let i = 0; i < mixedData.length; i++) {
const charCode = mixedData.charCodeAt(i) + ENCRYPTION_KEY.charCodeAt(i % ENCRYPTION_KEY.length);
encrypted += String.fromCharCode(charCode);
}
// Base64编码（避免特殊字符问题）
return btoa(encodeURIComponent(encrypted));
} catch (error) {
console.error('加密失败:', error);
return null;
}
}
// 解密函数
function decryptData(encryptedData) {
try {
// Base64解码
const decoded = decodeURIComponent(atob(encryptedData));
// 解密字符
let decrypted = '';
for (let i = 0; i < decoded.length; i++) {
const charCode = decoded.charCodeAt(i) - ENCRYPTION_KEY.charCodeAt(i % ENCRYPTION_KEY.length);
decrypted += String.fromCharCode(charCode);
}
// 分离数据
const parts = decrypted.split('|');
if (parts.length < 3) {
throw new Error('数据格式错误');
}
const jsonString = parts[0];
const timestamp = parseInt(parts[1]);
const salt = parts[2];
// 验证时间戳（防止过期数据）
const currentTime = Date.now();
if (currentTime - timestamp > 30 * 24 * 60 * 60 * 1000) { // 30天过期
throw new Error('存档已过期');
}
// 解析JSON
return JSON.parse(jsonString);
} catch (error) {
console.error('解密失败:', error);
return null;
}
}
// 更新显示
function updateDisplay() {
scoreElement.textContent = Math.floor(gameData.score);
perClickElement.textContent = `+${gameData.perClick} 每次点击`;
manualProductionElement.textContent = gameData.manualProduction;
// 更新升级成本显示
document.getElementById('basicBatteryCost').textContent = Math.ceil(getUpgradeCost('basicBattery'));
document.getElementById('autoChargerCost').textContent = Math.ceil(getUpgradeCost('autoCharger'));
document.getElementById('superBatteryCost').textContent = Math.ceil(getUpgradeCost('superBattery'));
document.getElementById('grandmaCost').textContent = Math.ceil(getUpgradeCost('grandma'));
// 更新等级和数量显示
document.getElementById('basicBatteryLevel').textContent = gameData.upgrades.basicBattery.level;
document.getElementById('autoChargerCount').textContent = gameData.upgrades.autoCharger.count;
document.getElementById('superBatteryCount').textContent = gameData.upgrades.superBattery.count;
document.getElementById('grandmaCount').textContent = gameData.upgrades.grandma.count;
// 更新生产统计
autoChargerProductionElement.textContent = gameData.upgrades.autoCharger.count * gameData.upgrades.autoCharger.production;
superBatteryProductionElement.textContent = gameData.upgrades.superBattery.count * gameData.upgrades.superBattery.production;
grandmaProductionElement.textContent = gameData.upgrades.grandma.count * gameData.upgrades.grandma.production;
}
// 计算升级成本
function getUpgradeCost(upgradeType) {
const upgrade = gameData.upgrades[upgradeType];
return upgrade.baseCost * Math.pow(upgrade.costMultiplier, upgrade.count || upgrade.level);
}
// 点击事件
batteryElement.addEventListener('click', (e) => {
gameData.score += gameData.perClick;
gameData.manualProduction += gameData.perClick;
updateDisplay();
// 创建点击特效
const effect = document.createElement('div');
effect.className = 'click-effect text-green-500 font-bold';
effect.textContent = `+${gameData.perClick}`;
effect.style.left = `${e.clientX - 15}px`;
effect.style.top = `${e.clientY - 15}px`;
document.body.appendChild(effect);
setTimeout(() => {
effect.remove();
}, 1000);
});
// 升级基础电池
function upgradeBattery() {
const cost = getUpgradeCost('basicBattery');
if (gameData.score >= cost) {
gameData.score -= cost;
gameData.upgrades.basicBattery.level += 1;
gameData.perClick += 1;
updateDisplay();
} else {
alert("电量不足！");
}
}
// 购买自动充电器
function buyAutoCharger() {
const cost = getUpgradeCost('autoCharger');
if (gameData.score >= cost) {
gameData.score -= cost;
gameData.upgrades.autoCharger.count += 1;
updateDisplay();
} else {
alert("电量不足！");
}
}
// 购买超级电池
function buySuperBattery() {
const cost = getUpgradeCost('superBattery');
if (gameData.score >= cost) {
gameData.score -= cost;
gameData.upgrades.superBattery.count += 1;
updateDisplay();
} else {
alert("电量不足！");
}
}
// 购买老太婆
function buyGrandma() {
const cost = getUpgradeCost('grandma');
if (gameData.score >= cost) {
gameData.score -= cost;
gameData.upgrades.grandma.count += 1;
updateDisplay();
} else {
alert("电量不足！");
}
}
// 自动生产逻辑
function autoProduction() {
let production = 0;
production += gameData.upgrades.autoCharger.count * gameData.upgrades.autoCharger.production;
production += gameData.upgrades.superBattery.count * gameData.upgrades.superBattery.production;
production += gameData.upgrades.grandma.count * gameData.upgrades.grandma.production;
gameData.score += production;
updateDisplay();
}
// 保存游戏
function saveGame() {
try {
gameData.lastSaveTime = Date.now();
<!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 href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
background: linear-gradient(to right, #a1c4fd, #c2e9fb);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.battery-icon {
transition: transform 0.2s ease;
}
.battery-icon:hover {
transform: scale(1.1);
}
.click-effect {
position: absolute;
width: 30px;
height: 30px;
pointer-events: none;
animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-100px); }
}
.upgrade-card {
transition: all 0.3s ease;
}
.upgrade-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.achievement {
transition: all 0.3s ease;
}
.achievement.unlocked {
background-color: #fffbeb;
border-color: #f59e0b;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
<header class="w-full max-w-6xl text-center mb-6">
<h1 class="text-4xl font-bold text-gray-800">🔋 电池点击器</h1>
<p class="text-gray-600 mt-2">点击电池充电，升级设备提升效率！</p>
</header>
<main class="w-full max-w-6xl bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-6 mb-8">
<div class="text-center">
<div class="text-5xl font-extrabold text-blue-600" id="score">0</div>
<div class="text-gray-600 mt-1">总电量</div>
</div>
<div class="relative cursor-pointer battery-icon" id="battery">
<img src="https://cdn-icons-png.flaticon.com/512/3081/3081559.png" alt="可点击的电池图标" class="w-32 h-32 mx-auto">
</div>
<div class="text-center">
<div class="text-2xl font-semibold text-green-600" id="perClick">+1 每次点击</div>
<div class="text-gray-600 mt-1">当前效率</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">🔋 升级商店</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="upgrade-card bg-blue-50 p-4 rounded-lg shadow">
<h3 class="font-semibold text-gray-800">🔋 基础电池</h3>
<p class="text-sm text-gray-600 mt-1">每次点击 +1</p>
<div class="mt-2 text-sm text-gray-500">等级: <span id="basicBatteryLevel">0</span></div>
<button class="mt-2 w-full py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition" onclick="upgradeBattery()">升级 (<span id="basicBatteryCost">10</span>)</button>
</div>
<div class="upgrade-card bg-green-50 p-4 rounded-lg shadow">
<h3 class="font-semibold text-gray-800">⚡ 自动充电器</h3>
<p class="text-sm text-gray-600 mt-1">每秒 +5</p>
<div class="mt-2 text-sm text-gray-500">数量: <span id="autoChargerCount">0</span></div>
<button class="mt-2 w-full py-2 bg-green-500 text-white rounded hover:bg-green-600 transition" onclick="buyAutoCharger()">购买 (<span id="autoChargerCost">50</span>)</button>
</div>
<div class="upgrade-card bg-purple-50 p-4 rounded-lg shadow">
<h3 class="font-semibold text-gray-800">🔋 超级电池</h3>
<p class="text-sm text-gray-600 mt-1">每次点击 +10</p>
<div class="mt-2 text-sm text-gray-500">数量: <span id="superBatteryCount">0</span></div>
<button class="mt-2 w-full py-2 bg-purple-500 text-white rounded hover:bg-purple-600 transition" onclick="buySuperBattery()">购买 (<span id="superBatteryCost">200</span>)</button>
</div>
<div class="upgrade-card bg-yellow-50 p-4 rounded-lg shadow">
<h3 class="font-semibold text-gray-800">👵 老太婆</h3>
<p class="text-sm text-gray-600 mt-1">每秒 +1</p>
<div class="mt-2 text-sm text-gray-500">数量: <span id="grandmaCount">0</span></div>
<button class="mt-2 w-full py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition" onclick="buyGrandma()">购买 (<span id="grandmaCost">15</span>)</button>
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">📊 生产统计</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-blue-100 p-4 rounded-lg">
<div class="text-lg font-semibold text-blue-800">手动点击</div>
<div class="text-2xl font-bold text-blue-600" id="manualProduction">0</div>
<div class="text-sm text-gray-600">总产量</div>
</div>
<div class="bg-green-100 p-4 rounded-lg">
<div class="text-lg font-semibold text-green-800">自动充电器</div>
<div class="text-2xl font-bold text-green-600" id="autoChargerProduction">0</div>
<div class="text-sm text-gray-600">每秒产量</div>
</div>
<div class="bg-purple-100 p-4 rounded-lg">
<div class="text-lg font-semibold text-purple-800">超级电池</div>
<div class="text-2xl font-bold text-purple-600" id="superBatteryProduction">0</div>
<div class="text-sm text-gray-600">每秒产量</div>
</div>
<div class="bg-yellow-100 p-4 rounded-lg">
<div class="text-lg font-semibold text-yellow-800">老太婆</div>
<div class="text-2xl font-bold text-yellow-600" id="grandmaProduction">0</div>
<div class="text-sm text-gray-600">每秒产量</div>
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">🏆 成就系统</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="achievementsContainer">
<!-- 成就将通过JavaScript动态生成 -->
</div>
</div>
</main>
<footer class="w-full max-w-6xl text-center text-gray-600 text-sm">
© 2026 电池点击器游戏 | 点击越多，能量越强！
</footer>
<script src="script.js"></script>
</body>
</html>
let score = 0;
let perClick = 1;
let manualProduction = 0;
// 升级数据
let upgrades = {
basicBattery: { level: 0, baseCost: 10, costMultiplier: 1.15 },
autoCharger: { count: 0, baseCost: 50, costMultiplier: 1.15, production: 5 },
superBattery: { count: 0, baseCost: 200, costMultiplier: 1.15, production: 10 },
grandma: { count: 0, baseCost: 15, costMultiplier: 1.15, production: 1 }
};
// 成就系统
let achievements = [
{ id: 1, name: "初学者", description: "获得100电量", threshold: 100, unlocked: false },
{ id: 2, name: "电力工人", description: "获得1000电量", threshold: 1000, unlocked: false },
{ id: 3, name: "电池大师", description: "获得10000电量", threshold: 10000, unlocked: false },
{ id: 4, name: "老太婆助手", description: "拥有5个老太婆", threshold: 5, type: "grandma", unlocked: false },
{ id: 5, name: "自动化工厂", description: "拥有10个自动充电器", threshold: 10, type: "autoCharger", unlocked: false }
];
// DOM 元素
const scoreElement = document.getElementById('score');
const perClickElement = document.getElementById('perClick');
const batteryElement = document.getElementById('battery');
const manualProductionElement = document.getElementById('manualProduction');
const autoChargerProductionElement = document.getElementById('autoChargerProduction');
const superBatteryProductionElement = document.getElementById('superBatteryProduction');
const grandmaProductionElement = document.getElementById('grandmaProduction');
const achievementsContainer = document.getElementById('achievementsContainer');
// 初始化成就显示
function initAchievements() {
achievementsContainer.innerHTML = '';
achievements.forEach(achievement => {
const achievementElement = document.createElement('div');
achievementElement.className = `achievement p-4 rounded-lg border-2 border-gray-200 ${achievement.unlocked ? 'unlocked' : ''}`;
achievementElement.innerHTML = `
<div class="font-semibold text-gray-800">${achievement.name}</div>
<div class="text-sm text-gray-600 mt-1">${achievement.description}</div>
<div class="text-xs mt-2 ${achievement.unlocked ? 'text-green-600' : 'text-gray-500'}">
${achievement.unlocked ? '✅ 已解锁' : '🔒 未解锁'}
</div>
`;
achievementsContainer.appendChild(achievementElement);
});
}
// 检查成就
function checkAchievements() {
achievements.forEach(achievement => {
if (!achievement.unlocked) {
if (achievement.type) {
if (upgrades[achievement.type].count >= achievement.threshold) {
achievement.unlocked = true;
showAchievementNotification(achievement.name);
}
} else {
if (score >= achievement.threshold) {
achievement.unlocked = true;
showAchievementNotification(achievement.name);
}
}
}
});
initAchievements();
}
// 显示成就通知
function showAchievementNotification(name) {
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 bg-yellow-500 text-white p-4 rounded-lg shadow-lg z-50';
notification.innerHTML = `🎉 成就解锁: ${name}`;
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 3000);
}
// 更新显示
function updateDisplay() {
scoreElement.textContent = Math.floor(score);
perClickElement.textContent = `+${perClick} 每次点击`;
manualProductionElement.textContent = manualProduction;
// 更新升级成本显示
document.getElementById('basicBatteryCost').textContent = Math.ceil(getUpgradeCost('basicBattery'));
document.getElementById('autoChargerCost').textContent = Math.ceil(getUpgradeCost('autoCharger'));
document.getElementById('superBatteryCost').textContent = Math.ceil(getUpgradeCost('superBattery'));
document.getElementById('grandmaCost').textContent = Math.ceil(getUpgradeCost('grandma'));
// 更新等级和数量显示
document.getElementById('basicBatteryLevel').textContent = upgrades.basicBattery.level;
document.getElementById('autoChargerCount').textContent = upgrades.autoCharger.count;
document.getElementById('superBatteryCount').textContent = upgrades.superBattery.count;
document.getElementById('grandmaCount').textContent = upgrades.grandma.count;
// 更新生产统计
autoChargerProductionElement.textContent = upgrades.autoCharger.count * upgrades.autoCharger.production;
superBatteryProductionElement.textContent = upgrades.superBattery.count * upgrades.superBattery.production;
grandmaProductionElement.textContent = upgrades.grandma.count * upgrades.grandma.production;
// 检查成就
checkAchievements();
}
// 计算升级成本
function getUpgradeCost(upgradeType) {
const upgrade = upgrades[upgradeType];
return upgrade.baseCost * Math.pow(upgrade.costMultiplier, upgrade.count || upgrade.level);
}
// 点击事件
batteryElement.addEventListener('click', (e) => {
score += perClick;
manualProduction += perClick;
updateDisplay();
// 创建点击特效
const effect = document.createElement('div');
effect.className = 'click-effect text-green-500 font-bold';
effect.textContent = `+${perClick}`;
effect.style.left = `${e.clientX - 15}px`;
effect.style.top = `${e.clientY - 15}px`;
document.body.appendChild(effect);
setTimeout(() => {
effect.remove();
}, 1000);
});
// 升级基础电池
function upgradeBattery() {
const cost = getUpgradeCost('basicBattery');
if (score >= cost) {
score -= cost;
upgrades.basicBattery.level += 1;
perClick += 1;
updateDisplay();
} else {
alert("电量不足！");
}
}
// 购买自动充电器
function buyAutoCharger() {
const cost = getUpgradeCost('autoCharger');
if (score >= cost) {
score -= cost;
upgrades.autoCharger.count += 1;
updateDisplay();
} else {
alert("电量不足！");
}
}
// 购买超级电池
function buySuperBattery() {
const cost = getUpgradeCost('superBattery');
if (score >= cost) {
score -= cost;
upgrades.superBattery.count += 1;
updateDisplay();
} else {
alert("电量不足！");
}
}
// 购买老太婆
function buyGrandma() {
const cost = getUpgradeCost('grandma');
if (score >= cost) {
score -= cost;
upgrades.grandma.count += 1;
updateDisplay();
} else {
alert("电量不足！");
}
}
// 自动生产逻辑
function autoProduction() {
let production = 0;
production += upgrades.autoCharger.count * upgrades.autoCharger.production;
production += upgrades.superBattery.count * upgrades.superBattery.production;
production += upgrades.grandma.count * upgrades.grandma.production;
score += production;
updateDisplay();
}
// 每秒自动生产
setInterval(autoProduction, 1000);
// 初始化显示
updateDisplay();
initAchievements();