<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.particle {
position: absolute;
width: 8px;
height: 8px;
background: #ffd700;
border-radius: 50%;
pointer-events: none;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes glow {
from { opacity: 0.4; }
to { opacity: 0.8; }
}
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}
.energy-core {
transition: all 0.3s ease;
}
.energy-core:hover {
transform: scale(1.05);
}
.energy-core:active {
transform: scale(0.95);
}
</style>
</head>
<body class="bg-gradient-to-br from-purple-600 via-blue-600 to-indigo-700 min-h-screen text-gray-800">
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- 头部统计区域 -->
<header class="bg-white/95 backdrop-blur-lg rounded-2xl p-6 mb-6 shadow-2xl border border-white/20">
<h1 class="text-3xl font-bold text-center text-gray-700 mb-4">能量核心收集者</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-4 text-white text-center">
<span class="text-sm opacity-90 block">能量核心</span>
<span id="energyCount" class="text-2xl font-bold block">0</span>
</div>
<div class="bg-gradient-to-r from-green-500 to-teal-600 rounded-xl p-4 text-white text-center">
<span class="text-sm opacity-90 block">每秒产量</span>
<span id="energyPerSecond" class="text-2xl font-bold block">0</span>
</div>
<div class="bg-gradient-to-r from-orange-500 to-red-600 rounded-xl p-4 text-white text-center">
<span class="text-sm opacity-90 block">游戏时间</span>
<span id="gameTime" class="text-2xl font-bold block">00:00:00</span>
</div>
</div>
</header>
<!-- 主游戏区域 -->
<main class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- 点击区域 -->
<section class="bg-white/95 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-white/20 text-center">
<div class="energy-core w-64 h-64 bg-gradient-to-br from-yellow-400 via-orange-500 to-red-600 rounded-full mx-auto mb-6 cursor-pointer relative shadow-lg"
id="energyCore">
<div class="absolute inset-0 bg-gradient-to-br from-yellow-400 via-orange-500 to-red-600 rounded-full blur-xl opacity-60 animate-glow"></div>
<div class="absolute inset-0 border-4 border-white/50 rounded-full animate-pulse"></div>
<div class="relative z-10 flex items-center justify-center h-full">
<i class="fas fa-bolt text-6xl text-white"></i>
</div>
</div>
<div class="text-center">
<span id="clickValue" class="text-2xl font-bold text-white bg-black/30 px-4 py-2 rounded-full transition-all duration-1000 opacity-0 transform -translate-y-5">+1</span>
</section>
<!-- 升级区域 -->
<section class="bg-white/95 backdrop-blur-lg rounded-2xl p-6 shadow-2xl border border-white/20">
<h2 class="text-2xl font-bold text-gray-700 mb-6 text-center">自动化升级</h2>
<div class="grid gap-4" id="upgradesGrid">
<!-- 升级项目将通过JavaScript动态生成 -->
</div>
</section>
</main>
<!-- 统计和成就区域 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- 游戏统计 -->
<section class="bg-white/95 backdrop-blur-lg rounded-2xl p-6 shadow-2xl border border-white/20">
<h2 class="text-2xl font-bold text-gray-700 mb-6 text-center">游戏统计</h2>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl p-4 text-white text-center">
<h3 class="text-sm font-semibold mb-2">总收集量</h3>
<p id="totalCollected" class="text-xl font-bold">0</p>
</div>
<div class="bg-gradient-to-r from-blue-500 to-cyan-600 rounded-xl p-4 text-white text-center">
<h3 class="text-sm font-semibold mb-2">总点击次数</h3>
<p id="totalClicks" class="text-xl font-bold">0</p>
</div>
<div class="bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl p-4 text-white text-center">
<h3 class="text-sm font-semibold mb-2">最高产量</h3>
<p id="highestProduction" class="text-xl font-bold">0/秒</p>
</div>
<div class="bg-gradient-to-r from-orange-500 to-amber-600 rounded-xl p-4 text-white text-center">
<h3 class="text-sm font-semibold mb-2">升级总数</h3>
<p id="totalUpgrades" class="text-xl font-bold">0</p>
</div>
</div>
</section>
<!-- 成就区域 -->
<section class="bg-white/95 backdrop-blur-lg rounded-2xl p-6 shadow-2xl border border-white/20">
<h2 class="text-2xl font-bold text-gray-700 mb-6 text-center">成就系统</h2>
<div class="grid gap-4" id="achievementsGrid">
<!-- 成就项目将通过JavaScript动态生成 -->
</div>
</section>
</div>
<!-- 科技树区域 -->
<section class="bg-white/95 backdrop-blur-lg rounded-2xl p-6 shadow-2xl border border-white/20 mb-6">
<h2 class="text-2xl font-bold text-gray-700 mb-6 text-center">科技发展</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="techTree">
<!-- 科技树节点将通过JavaScript动态生成 -->
</div>
</section>
<!-- 控制面板 -->
<footer class="bg-white/95 backdrop-blur-lg rounded-2xl p-6 shadow-2xl border border-white/20">
<div class="flex justify-center gap-4">
<button id="saveGame" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 active:scale-95">
<i class="fas fa-save mr-2"></i>
保存游戏
</button>
<button id="resetGame" class="bg-gradient-to-r from-red-500 to-pink-600 text-white px-6 py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 active:scale-95">
<i class="fas fa-redo mr-2"></i>
重置游戏
</button>
</div>
</footer>
</div>
<script>
class EnergyCoreGame {
constructor() {
this.energy = 0;
this.totalCollected = 0;
this.totalClicks = 0;
this.energyPerClick = 1;
this.energyPerSecond = 0;
this.gameStartTime = Date.now();
this.highestProduction = 0;
// 升级系统
this.upgrades = [
{
id: 'autoClicker',
name: '自动点击器',
description: '基础自动化设备',
baseCost: 15,
production: 0.5,
level: 0,
maxLevel: 20,
icon: 'fa-robot',
color: 'from-blue-400 to-cyan-500'
},
{
id: 'energyDrill',
name: '能量钻机',
description: '高效能量采集',
baseCost: 100,
production: 2,
level: 0,
maxLevel: 15,
icon: 'fa-mountain',
color: 'from-green-400 to-emerald-500'
},
{
id: 'quantumReactor',
name: '量子反应堆',
description: '高级量子设备',
baseCost: 500,
production: 5,
level: 0,
maxLevel: 10,
icon: 'fa-atom',
color: 'from-purple-400 to-pink-500'
},
{
id: 'singularityCore',
name: '奇点核心',
description: '终极能量源',
baseCost: 2000,
production: 15,
level: 0,
maxLevel: 5,
icon: 'fa-infinity',
color: 'from-orange-400 to-red-500'
},
{
id: 'timeWarpDevice',
name: '时空扭曲装置',
description: '操控时间流速',
baseCost: 5000,
production: 25,
level: 0,
maxLevel: 8,
icon: 'fa-clock',
color: 'from-indigo-400 to-purple-500'
},
{
id: 'multiverseConnector',
name: '多元宇宙连接器',
description: '连接平行宇宙',
baseCost: 15000,
production: 60,
level: 0,
maxLevel: 5,
icon: 'fa-globe-americas',
color: 'from-teal-400 to-cyan-500'
},
{
id: 'darkMatterExtractor',
name: '暗物质提取器',
description: '提取暗物质能量',
baseCost: 50000,
production: 150,
level: 0,
maxLevel: 3,
icon: 'fa-meteor',
color: 'from-gray-400 to-blue-500'
},
{
id: 'energyDuplicationMatrix',
name: '能量复制矩阵',
description: '复制现有能量',
baseCost: 100000,
production: 300,
level: 0,
maxLevel: 2,
icon: 'fa-copy',
color: 'from-yellow-400 to-orange-500'
},
{
id: 'ultimateSingularityEngine',
name: '终极奇点引擎',
description: '宇宙终极能源',
baseCost: 500000,
production: 1000,
level: 0,
maxLevel: 1,
icon: 'fa-star',
color: 'from-red-400 to-pink-500'
}
];
// 成就系统
this.achievements = [
{
id: 'first_million',
name: '百万富翁',
description: '累计收集100万能量',
target: 1000000,
unlocked: false,
icon: 'fa-money-bill-wave'
},
{
id: 'click_master',
name: '点击达人',
description: '完成1万次点击',
target: 10000,
unlocked: false,
icon: 'fa-mouse-pointer'
},
{
id: 'upgrade_expert',
name: '升级专家',
description: '总升级等级达到50级',
target: 50,
unlocked: false,
icon: 'fa-cogs'
},
{
id: 'automation_king',
name: '自动化之王',
description: '每秒产量达到100',
target: 100,
unlocked: false,
icon: 'fa-crown'
},
{
id: 'speed_demon',
name: '速度恶魔',
description: '每秒产量达到500',
target: 500,
unlocked: false,
icon: 'fa-bolt'
}
];
// 科技树
this.techTree = [
{
id: 'basic_automation',
name: '基础自动化',
description: '解锁基础自动化设备',
requirements: [],
unlocked: false,
effects: ['自动点击器基础产量+1']
},
{
id: 'energy_efficiency',
name: '能源效率',
description: '提升所有设备能源利用效率',
requirements: ['basic_automation'],
unlocked: false,
effects: ['所有设备产量提升20%']
},
{
id: 'quantum_technology',
name: '量子技术',
description: '解锁高级量子设备',
requirements: ['energy_efficiency'],
unlocked: false,
effects: ['量子反应堆效率提升50%']
}
];
this.activeEvents = [];
this.eventChance = 0.01;
this.tempDisabledUpgrade = null;
this.init();
}
init() {
this.loadGame();
this.setupEventListeners();
this.renderAllSections();
this.startGameLoop();
this.updateDisplay();
}
setupEventListeners() {
const energyCore = document.getElementById('energyCore');
energyCore.addEventListener('click', () => this.collectEnergy());
document.getElementById('saveGame').addEventListener('click', () => this.saveGame());
document.getElementById('resetGame').addEventListener('click', () => {
if (confirm('确定要重置游戏吗？所有进度都将丢失！')) {
this.resetGame();
}
});
}
collectEnergy() {
this.energy += this.energyPerClick;
this.totalCollected += this.energyPerClick;
this.totalClicks++;
this.showClickEffect();
this.checkAchievements();
this.updateDisplay();
}
showClickEffect() {
const clickValue = document.getElementById('clickValue');
clickValue.textContent = '+' + this.energyPerClick;
clickValue.style.opacity = '1';
clickValue.style.transform = 'translateY(0)';
this.createParticles();
setTimeout(() => {
clickValue.style.opacity = '0';
clickValue.style.transform = 'translateY(-20px)';
}, 1000);
}
createParticles() {
const energyCore = document.getElementById('energyCore');
const rect = energyCore.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
for (let i = 0; i < 5; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = centerX + 'px';
particle.style.top = centerY + 'px';
const angle = Math.random() * Math.PI * 2;
const distance = 50 + Math.random() * 100;
const targetX = centerX + Math.cos(angle) * distance;
const targetY = centerY + Math.sin(angle) * distance;
document.body.appendChild(particle);
setTimeout(() => {
particle.style.transition = 'all 0.8s ease-out';
particle.style.left = targetX + 'px';
particle.style.top = targetY + 'px';
particle.style.opacity = '0';
}, 10);
setTimeout(() => {
particle.remove();
}, 1000);
}
}
buyUpgrade(upgradeId) {
const upgrade = this.upgrades.find(u => u.id === upgradeId);
if (!upgrade || upgrade.level >= upgrade.maxLevel) return;
const cost = this.calculateUpgradeCost(upgrade);
if (this.energy >= cost) {
this.energy -= cost;
upgrade.level++;
this.calculateEnergyPerSecond();
this.updateDisplay();
this.renderUpgrades();
this.checkAchievements();
}
}
calculateUpgradeCost(upgrade) {
return Math.floor(upgrade.baseCost * Math.pow(1.5, upgrade.level));
}
calculateEnergyPerSecond() {
this.energyPerSecond = this.upgrades.reduce((total, upgrade) => {
return total + (upgrade.level * upgrade.production);
}, 0);
if (this.energyPerSecond > this.highestProduction) {
this.highestProduction = this.energyPerSecond;
}
}
startGameLoop() {
setInterval(() => {
this.energy += this.energyPerSecond / 10;
this.totalCollected += this.energyPerSecond / 10;
this.updateDisplay();
this.checkRandomEvents();
}, 100);
}
checkRandomEvents() {
if (Math.random() < this.eventChance) {
this.triggerRandomEvent();
}
}
triggerRandomEvent() {
const events = [
{
name: '能量风暴',
duration: 30000,
effect: () => { this.energyPerSecond *= 2; },
cleanup: () => { this.energyPerSecond /= 2; }
},
{
name: '设备故障',
duration: 15000,
effect: () => {
const randomUpgrade = this.upgrades[Math.floor(Math.random() * this.upgrades.length)];
this.tempDisabledUpgrade = randomUpgrade.id;
},
cleanup: () => {
this.tempDisabledUpgrade = null;
}
}
];
const event = events[Math.floor(Math.random() * events.length)];
this.activateEvent(event);
}
activateEvent(event) {
this.activeEvents.push(event);
event.effect();
this.showNotification('随机事件：' + event.name + '！');
setTimeout(() => {
event.cleanup();
this.activeEvents = this.activeEvents.filter(e => e !== event);
}, event.duration);
}
checkAchievements() {
this.achievements.forEach(achievement => {
if (!achievement.unlocked) {
let conditionMet = false;
switch(achievement.id) {
case 'first_million':
conditionMet = this.totalCollected >= achievement.target;
break;
case 'click_master':
conditionMet = this.totalClicks >= achievement.target;
break;
case 'upgrade_expert':
const totalUpgradeLevels = this.upgrades.reduce((sum, upgrade) => sum + upgrade.level, 0);
conditionMet = totalUpgradeLevels >= achievement.target;
break;
case 'automation_king':
conditionMet = this.energyPerSecond >= achievement.target;
break;
case 'speed_demon':
conditionMet = this.energyPerSecond >= achievement.target;
break;
}
if (conditionMet) {
achievement.unlocked = true;
this.showNotification('成就解锁：' + achievement.name + '！');
this.renderAchievements();
}
}
});
}
getAchievementProgress(achievement) {
let current = 0;
switch(achievement.id) {
case 'first_million':
current = this.totalCollected;
break;
case 'click_master':
current = this.totalClicks;
break;
case 'upgrade_expert':
current = this.upgrades.reduce((sum, upgrade) => sum + upgrade.level, 0);
break;
case 'automation_king':
current = this.energyPerSecond;
break;
case 'speed_demon':
current = this.energyPerSecond;
break;
}
return Math.min(100, Math.floor((current / achievement.target) * 100));
}
updateDisplay() {
document.getElementById('energyCount').textContent = Math.floor(this.energy).toLocaleString();
document.getElementById('energyPerSecond').textContent = this.energyPerSecond.toFixed(1);
document.getElementById('totalCollected').textContent = Math.floor(this.totalCollected).toLocaleString();
document.getElementById('totalClicks').textContent = this.totalClicks.toLocaleString();
document.getElementById('highestProduction').textContent = this.highestProduction.toFixed(1) + '/秒';
document.getElementById('totalUpgrades').textContent = this.upgrades.reduce((sum, upgrade) => sum + upgrade.level, 0);
this.updateGameTime();
}
updateGameTime() {
const elapsed = Date.now() - this.gameStartTime;
const hours = Math.floor(elapsed / 3600000);
const minutes = Math.floor((elapsed % 3600000) / 60000);
const seconds = Math.floor((elapsed % 60000) / 1000);
document.getElementById('gameTime').textContent =
hours.toString().padStart(2, '0') + ':' +
minutes.toString().padStart(2, '0') + ':' +
seconds.toString().padStart(2, '0');
}
renderAllSections() {
this.renderUpgrades();
this.renderAchievements();
this.renderTechTree();
}
renderUpgrades() {
const upgradesGrid = document.getElementById('upgradesGrid');
upgradesGrid.innerHTML = '';
this.upgrades.forEach(upgrade => {
const cost = this.calculateUpgradeCost(upgrade);
const canAfford = this.energy >= cost;
const isMaxed = upgrade.level >= upgrade.maxLevel;
const upgradeElement = document.createElement('div');
upgradeElement.className = 'bg-gradient-to-r ' + upgrade.color + ' rounded-xl p-4 cursor-pointer transition-all duration-300 hover:scale-105 active:scale-95';
if (upgrade.level > 0) upgradeElement.classList.add('ring-2', 'ring-white');
if (isMaxed) upgradeElement.classList.add('opacity-50');
upgradeElement.innerHTML = `
<div class="flex items-center justify-between mb-2">
<i class="${upgrade.icon} text-2xl text-white"></i>
<span class="text-white font-bold">${upgrade.name}</span>
<span class="text-white/80 text-sm">Lv.${upgrade.level}/${upgrade.maxLevel}</span>
</div>
<div class="text-white/90 text-sm mb-2">${upgrade.description}</div>
<div class="flex justify-between items-center">
<span class="text-white font-semibold">+${upgrade.production}/秒</span>
<span class="text-white/80 text-sm">${isMaxed ? '已满级' : cost.toLocaleString() + ' 能量'}</span>
</div>
`;
if (!isMaxed) {
upgradeElement.addEventListener('click', () => this.buyUpgrade(upgrade.id));
}
if (!canAfford && !isMaxed) {
upgradeElement.classList.add('opacity-50');
}
upgradesGrid.appendChild(upgradeElement);
});
}
renderAchievements() {
const achievementsGrid = document.getElementById('achievementsGrid');
if (!achievementsGrid) return;
achievementsGrid.innerHTML = this.achievements.map(achievement => `
<div class="bg-gradient-to-r from-blue-400 to-purple-500 rounded-xl p-4 transition-all duration-300 ${achievement.unlocked ? 'ring-2 ring-green-400' : ''}">
<div class="flex items-center gap-3 mb-2">
<i class="${achievement.icon} text-2xl ${achievement.unlocked ? 'text-yellow-400' : 'text-gray-400'}"></i>
<div class="flex-1">
<h4 class="font-bold ${achievement.unlocked ? 'text-white' : 'text-gray-600'}">${achievement.name}</h4>
<p class="text-sm ${achievement.unlocked ? 'text-white/90' : 'text-gray-500'}">${achievement.description}</p>
</div>
</div>
<div class="flex items-center justify-between">
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-green-400 h-2 rounded-full" style="width: ${this.getAchievementProgress(achievement)}%"></div>
</div>
<span class="text-sm ${achievement.unlocked ? 'text-white' : 'text-gray-500'}" id="progress-${achievement.id}"></div>
</div>
</div>
`).join('');
}
renderTechTree() {
const techTreeElement = document.getElementById('techTree');
if (!techTreeElement) return;
techTreeElement.innerHTML = this.techTree.map(tech => `
<div class="bg-gradient-to-r from-indigo-400 to-purple-500 rounded-xl p-4 text-center transition-all duration-300 ${tech.unlocked ? 'ring-2 ring-yellow-400' : 'opacity-50'}">
<h4 class="font-bold text-white mb-2">${tech.name}</h4>
<p class="text-white/80 text-sm mb-3">${tech.description}</p>
<div class="space-y-1">
${tech.effects.map(effect => `<span class="text-white/70 text-xs block">${effect}</span>`).join('')}
</div>
`).join('');
}
saveGame() {
const gameData = {
energy: this.energy,
totalCollected: this.totalCollected,
totalClicks: this.totalClicks,
upgrades: this.upgrades,
achievements: this.achievements,
techTree: this.techTree,
gameStartTime: this.gameStartTime,
highestProduction: this.highestProduction
};
localStorage.setItem('energyCoreGame', JSON.stringify(gameData));
this.showNotification('游戏进度已保存！');
}
loadGame() {
const savedData = localStorage.getItem('energyCoreGame');
if (savedData) {
const gameData = JSON.parse(savedData);
this.energy = gameData.energy || 0;
this.totalCollected = gameData.totalCollected || 0;
this.totalClicks = gameData.totalClicks || 0;
this.upgrades = gameData.upgrades || this.upgrades;
this.achievements = gameData.achievements || this.achievements;
this.techTree = gameData.techTree || this.techTree;
this.gameStartTime = gameData.gameStartTime || Date.now();
this.highestProduction = gameData.highestProduction || 0;
this.calculateEnergyPerSecond();
}
}
resetGame() {
this.energy = 0;
this.totalCollected = 0;
this.totalClicks = 0;
this.energyPerSecond = 0;
this.gameStartTime = Date.now();
this.highestProduction = 0;
this.upgrades.forEach(upgrade => {
upgrade.level = 0;
});
this.achievements.forEach(achievement => {
achievement.unlocked = false;
});
this.techTree.forEach(tech => {
tech.unlocked = false;
});
localStorage.removeItem('energyCoreGame');
this.updateDisplay();
this.renderAllSections();
this.showNotification('游戏已重置！');
}
showNotification(message) {
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-3 rounded-xl font-bold shadow-2xl z-50 animate-float';
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 3000);
}
}
// 初始化游戏
document.addEventListener('DOMContentLoaded', () => {
new EnergyCoreGame();
});
</script>
</body>
</html>
<code_end>
这个HTML文件整合了完整的能量核心收集游戏，包含点击收集、自动化升级、成就系统、科技树发展和随机事件等丰富功能。游戏采用现代化UI设计，具有响应式布局，支持数据持久化保存。
gf24160
LV 6
@
2025-10-31 13:29:50