由豆包编程生成的挂机升级游戏
文章目录
- 一、视频地址
- 二、完整源码
一、视频地址
点击查看视频版
全程由AI生成，不写一行代码，提示词巨长，但是数值调一下，还是可以玩的。
二、完整源码
新建一个 a.html 文件，把下面的代码，拷贝到文件里，用 浏览器 打开就可以丸辣！
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>挂机升级游戏</title><!-- 引入Tailwind CSS --><script src="https://cdn.tailwindcss.com"></script><!-- 引入Font Awesome --><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><!-- 配置Tailwind自定义颜色和字体 --><script>tailwind.config = {theme: {extend: {colors: {primary: '#4F46E5', // 主色调：深紫色secondary: '#10B981', // 辅助色：绿色（用于经验条）accent: '#F59E0B', // 强调色：橙色（用于按钮）dark: '#1E293B',light: '#F8FAFC',debug: '#EF4444', // 调试按钮颜色：红色scene: '#06B6D4', // 场景相关颜色：青色inventory: '#8B5CF6', // 背包相关颜色：紫色item: '#10B981', // 物品相关颜色：绿色equipment: '#D946EF', // 装备相关颜色：粉色weapon: '#F97316', // 武器颜色：橙色armor: '#60A5FA', // 防具颜色：蓝色monster: '#DC2626', // 怪物相关颜色：深红色// 属性颜色hp: '#EF4444', // 生命：红色mp: '#3B82F6', // 内力：蓝色attack: '#F97316', // 攻击：橙色defense: '#A3E635', // 防御：浅绿色hit: '#EC4899', // 命中：粉色dodge: '#8B5CF6', // 闪避：紫色crit: '#F59E0B', // 暴击：金色critDef: '#60A5FA' // 暴防：浅蓝色},fontFamily: {game: ['"Press Start 2P"', 'cursive', 'sans-serif']}}}}</script><!-- 自定义工具类 --><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.text-shadow {text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.animate-pulse-slow {animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;}.animate-float {animation: float 3s ease-in-out infinite;}.btn-disabled {opacity: 0.6;cursor: not-allowed;transform: none !important;box-shadow: none !important;}.scene-card {transition: all 0.3s ease;}.scene-card-unlocked:hover {transform: translateY(-5px);box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.3);}.scene-card-current {border-color: #F59E0B !important;box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);}.scene-image-container {background-color: #1e293b; /* 深色背景，避免加载时闪白 */overflow: hidden;position: relative;}.scene-image {opacity: 0;transition: opacity 0.5s ease-in-out, transform 0.7s ease-out;}.scene-image-loaded {opacity: 1;}.current-scene-background {position: relative;height: 160px;overflow: hidden;}.current-scene-background::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(to bottom, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.85));z-index: 1;}.current-scene-bg-image {width: 100%;height: 100%;object-fit: cover;transition: transform 15s ease;transform: scale(1.05);}.current-scene-bg-image:hover {transform: scale(1.15);}.current-scene-info {position: absolute;bottom: 0;left: 0;right: 0;padding: 1rem;z-index: 2;}.inventory-slot {width: 60px;height: 60px;background-color: rgba(30, 41, 59, 0.6);border: 2px solid rgba(139, 92, 246, 0.3);border-radius: 4px;transition: all 0.2s ease;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;cursor: pointer;}.inventory-slot:hover {border-color: rgba(139, 92, 246, 0.8);background-color: rgba(30, 41, 59, 0.8);}.inventory-slot-locked {filter: grayscale(100%);opacity: 0.7;}.inventory-slot-locked::before {content: "";position: absolute;width: 100%;height: 1px;background-color: rgba(255, 255, 255, 0.5);transform: rotate(-45deg);}.inventory-slot-empty::after {content: "";width: 4px;height: 4px;background-color: rgba(255, 255, 255, 0.1);border-radius: 50%;}.item-quantity {position: absolute;bottom: 2px;right: 2px;background-color: rgba(0, 0, 0, 0.7);color: white;font-size: 10px;font-weight: bold;padding: 1px 4px;border-radius: 2px;}.item-level {position: absolute;top: 2px;left: 2px;background-color: rgba(79, 70, 229, 0.7);color: white;font-size: 10px;font-weight: bold;padding: 1px 4px;border-radius: 2px;}.slot-unlock-level {position: absolute;bottom: 2px;left: 2px;background-color: rgba(245, 158, 11, 0.7);color: #1e293b;font-size: 9px;font-weight: bold;padding: 1px 3px;border-radius: 2px;}.item-tooltip {position: absolute;background-color: rgba(15, 23, 42, 0.95);border: 1px solid rgba(139, 92, 246, 0.5);border-radius: 4px;padding: 6px 8px;z-index: 100;width: 200px;font-size: 12px;pointer-events: none;opacity: 0;transition: opacity 0.2s ease;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);}.item-tooltip-title {font-weight: bold;margin-bottom: 3px;border-bottom: 1px dashed rgba(255, 255, 255, 0.2);padding-bottom: 3px;}.tooltip-weapon {color: #F97316;}.tooltip-armor {color: #60A5FA;}.tooltip-item {color: #10B981;}.tooltip-monster {color: #DC2626;}.item-tooltip-level {color: #93c5fd;font-size: 11px;margin-bottom: 3px;}.item-tooltip-description {color: #e2e8f0;margin-bottom: 3px;}.item-tooltip-effect {color: #a7f3d0;font-size: 11px;}.scene-drops {font-size: 11px;margin-top: 4px;padding-top: 4px;border-top: 1px dashed rgba(255, 255, 255, 0.1);}.drop-item {display: inline-block;margin-right: 6px;margin-bottom: 3px;padding: 1px 4px;background-color: rgba(15, 23, 42, 0.5);border-radius: 3px;white-space: nowrap;}.drop-chance {color: #a7f3d0;font-size: 10px;}.floating-item {position: absolute;pointer-events: none;z-index: 1000;animation: float-to-inventory 1s cubic-bezier(0.2, 0.8, 0.2, 1);}.stat-bar {height: 8px;border-radius: 4px;transition: width 0.5s ease-out;}.attribute-boost {animation: pulse 1s infinite;}.equipment-slot {width: 80px;height: 80px;background-color: rgba(30, 41, 59, 0.6);border-radius: 6px;transition: all 0.2s ease;display: flex;flex-direction: column;align-items: center;justify-content: center;overflow: hidden;position: relative;cursor: pointer;}.equipment-slot:hover {background-color: rgba(30, 41, 59, 0.8);transform: translateY(-3px);}.equipment-slot-weapon {border: 2px solid rgba(249, 115, 22, 0.5);}.equipment-slot-weapon:hover {border-color: rgba(249, 115, 22, 0.8);}.equipment-slot-armor {border: 2px solid rgba(96, 165, 250, 0.5);}.equipment-slot-armor:hover {border-color: rgba(96, 165, 250, 0.8);}.equipment-slot-empty {opacity: 0.5;}.equipment-slot-name {font-size: 10px;margin-top: 5px;text-align: center;}.equipment-equipped {position: absolute;top: 3px;right: 3px;color: #10B981;font-size: 12px;}.equipment-comparison {margin-top: 5px;padding-top: 5px;border-top: 1px dashed rgba(255, 255, 255, 0.2);}.comparison-better {color: #10B981;}.comparison-worse {color: #EF4444;}.comparison-same {color: #94A3B8;}/* 战斗相关样式 */.battle-container {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(15, 23, 42, 0.95);z-index: 10;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px;}.battle-participant {display: flex;align-items: center;justify-content: space-between;width: 100%;max-width: 400px;margin-bottom: 30px;}.battle-avatar {width: 80px;height: 80px;border-radius: 50%;overflow: hidden;border: 3px solid;}.player-avatar {border-color: #4F46E5;}.monster-avatar {border-color: #DC2626;}.battle-info {flex: 1;margin: 0 20px;}.battle-hp-bar {height: 10px;background-color: #374151;border-radius: 5px;overflow: hidden;margin-top: 5px;}.battle-hp-fill {height: 100%;transition: width 0.5s ease;}.player-hp {background-color: #10B981;}.monster-hp {background-color: #EF4444;}.battle-log {background-color: rgba(15, 23, 42, 0.8);border: 1px solid #4B5563;border-radius: 8px;width: 100%;max-width: 400px;height: 150px;overflow-y: auto;padding: 10px;margin-bottom: 20px;}.battle-log-entry {margin-bottom: 5px;font-size: 14px;animation: fadeIn 0.5s ease;}.damage-text {color: #EF4444;}.heal-text {color: #10B981;}.miss-text {color: #94A3B8;}.crit-text {color: #F59E0B;font-weight: bold;}.battle-timer {position: absolute;top: 20px;right: 20px;background-color: rgba(15, 23, 42, 0.8);border: 1px solid #4B5563;border-radius: 5px;padding: 5px 10px;color: #F59E0B;}.monster-indicator {position: absolute;top: 10px;right: 10px;background-color: rgba(220, 38, 38, 0.8);color: white;padding: 3px 8px;border-radius: 20px;font-size: 12px;display: flex;align-items: center;gap: 5px;z-index: 2;}.encounter-timer {position: absolute;top: 10px;left: 10px;background-color: rgba(30, 41, 59, 0.8);color: white;padding: 3px 8px;border-radius: 20px;font-size: 12px;display: flex;align-items: center;gap: 5px;z-index: 2;}}@keyframes float {0% { transform: translateY(0px); }50% { transform: translateY(-10px); }100% { transform: translateY(0px); }}@keyframes float-to-inventory {0% {opacity: 1;transform: scale(1) rotate(0deg);}50% {opacity: 0.8;transform: scale(0.8) rotate(15deg);}100% {opacity: 0;transform: scale(0.5) rotate(30deg);}}@keyframes fadeIn {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }}</style><!-- 额外的字体 --><link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-dark to-slate-800 min-h-screen text-light flex flex-col items-center justify-start pt-10 pb-20 px-4"><!-- 调试按钮区域 - 包含重置等级和快速升级按钮 --><div class="mb-6 flex flex-wrap gap-3"><button id="reset-btn" class="bg-debug hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-debug/30 active:scale-95 flex items-center justify-center gap-2"><i class="fa fa-refresh"></i><span>重置等级（调试用）</span></button><button id="quick-level-up-btn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-purple-500/30 active:scale-95 flex items-center justify-center gap-2"><i class="fa fa-level-up"></i><span>快速升级（调试用）</span></button><button id="force-encounter-btn" class="bg-monster hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-monster/30 active:scale-95 flex items-center justify-center gap-2"><i class="fa fa-bug"></i><span>强制遇怪（调试用）</span></button></div><!-- 游戏标题 --><header class="mb-10 text-center"><h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-primary drop-shadow-lg mb-2 animate-pulse-slow"><i class="fa fa-gamepad mr-3"></i>挂机升级</h1><p class="text-slate-400 text-lg">积累经验，探索场景，收集宝物，击败怪物，不断变强！</p></header><!-- 主游戏面板 --><main class="w-full max-w-4xl bg-slate-900/80 backdrop-blur-sm rounded-2xl shadow-2xl shadow-primary/20 overflow-hidden border border-primary/30 mb-8 relative"><!-- 遇怪计时器 --><div id="encounter-timer" class="encounter-timer hidden"><i class="fa fa-clock-o"></i><span>下次遇怪: <span id="next-encounter-time">30</span>秒</span></div><!-- 当前场景背景图和信息 --><div class="current-scene-background"><img id="current-scene-bg" src="" alt="当前场景背景" class="current-scene-bg-image"><div class="current-scene-info"><p class="text-white font-medium text-lg">当前场景: <span id="current-scene-name" class="text-scene font-bold">剑阁</span><span class="mx-2">|</span>场景加成: <span id="scene-bonus" class="text-green-400 font-bold">1.0x</span></p></div></div><!-- 头像面板 --><div class="p-6 md:p-8 flex flex-col md:flex-row items-center gap-8"><!-- 卡通头像 --><div class="relative"><div class="w-36 h-36 md:w-48 md:h-48 rounded-full bg-gradient-to-br from-primary to-purple-400 p-1 shadow-lg animate-float"><img src="https://picsum.photos/200/200?random=1" alt="卡通游戏角色头像" class="w-full h-full object-cover rounded-full border-2 border-white/30"></div><!-- 等级徽章 --><div class="absolute -bottom-2 -right-2 bg-accent text-dark rounded-full w-14 h-14 md:w-16 md:h-16 flex items-center justify-center text-xl md:text-2xl font-bold shadow-lg border-2 border-slate-900"><span id="level-display">1</span></div></div><!-- 信息面板 --><div class="w-full md:w-auto flex-1 text-center md:text-left"><h2 class="text-2xl md:text-3xl font-bold mb-4 text-white">勇者玩家</h2><!-- 经验值显示 --><div class="mb-6"><div class="flex justify-between mb-2"><span class="text-slate-300">当前经验</span><span id="current-exp" class="text-secondary font-semibold">0</span><span class="text-slate-400">/</span><span id="required-exp" class="text-slate-300">100</span></div><!-- 经验条 --><div class="h-4 bg-slate-700 rounded-full overflow-hidden"><div id="exp-bar" class="h-full bg-gradient-to-r from-secondary to-emerald-400 w-0 transition-all duration-300 ease-out"></div></div></div><div class="mb-4"><div class="flex justify-between mb-2"><span class="text-slate-300">战斗力</span><span id="combat-power" class="text-amber-400 font-semibold">0</span></div><div class="h-2 bg-slate-700 rounded-full overflow-hidden"><div id="power-bar" class="h-full bg-gradient-to-r from-amber-400 to-yellow-500 w-0 transition-all duration-300 ease-out"></div></div></div><!-- 经验获取速率 --><div class="bg-slate-800/60 rounded-lg p-3 mb-4"><p class="text-slate-300"><i class="fa fa-bolt text-yellow-400 mr-2"></i>经验获取速率: <span id="exp-rate" class="text-green-400 font-semibold">1 经验/秒</span></p></div><!-- 背包和场景信息 --><div class="bg-slate-800/60 rounded-lg p-3 mb-4"><p class="text-slate-300"><i class="fa fa-briefcase text-inventory mr-2"></i>已解锁背包格子: <span id="unlocked-slots-count" class="text-inventory font-semibold">5/25</span><span class="mx-2">|</span><i class="fa fa-map-o text-scene mr-2"></i>已解锁场景: <span id="unlocked-scenes-count" class="text-scene font-semibold">1/20</span></p></div><!-- 按钮区域 - 调整为两行布局以容纳四个按钮 --><div class="grid grid-cols-2 gap-3"><!-- 第一行按钮 --><button id="gain-exp-btn" class="bg-accent hover:bg-amber-500 text-dark font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-accent/20 active:scale-95 flex items-center justify-center gap-2"><i class="fa fa-plus-circle"></i><span>获得经验</span></button><button id="level-up-btn" class="bg-primary hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-primary/20 active:scale-95 flex items-center justify-center gap-2 btn-disabled" disabled><i class="fa fa-arrow-up"></i><span>升级</span></button><!-- 第二行按钮 --><button id="inventory-btn" class="bg-inventory hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-inventory/20 active:scale-95 flex items-center justify-center gap-2 btn-disabled" disabled><i class="fa fa-briefcase"></i><span>背包</span></button><button id="switch-scene-btn" class="bg-scene hover:bg-cyan-500 text-dark font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-scene/20 active:scale-95 flex items-center justify-center gap-2 btn-disabled" disabled><i class="fa fa-map-o"></i><span>场景</span></button></div><!-- 属性和装备按钮 --><div class="mt-3 grid grid-cols-2 gap-3"><button id="stats-btn" class="bg-primary hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-primary/20 active:scale-95 flex items-center justify-center gap-2 btn-disabled" disabled><i class="fa fa-bar-chart"></i><span>属性</span></button><button id="equipment-btn" class="bg-equipment hover:bg-pink-600 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-equipment/20 active:scale-95 flex items-center justify-center gap-2 btn-disabled" disabled><i class="fa fa-shield"></i><span>装备</span></button></div></div></div><!-- 提示区域 --><div id="level-up-notification" class="hidden bg-gradient-to-r from-primary to-purple-600 text-white text-center py-4 px-6 animate-bounce"><h3 class="text-xl font-bold">恭喜升级！</h3><p>你现在是 <span id="new-level" class="font-bold text-yellow-300">2</span> 级了！<span id="slot-unlocked-message" class="block mt-1 text-sm">解锁了1个背包格子！</span></p></div><div id="not-enough-exp" class="hidden bg-gradient-to-r from-red-500 to-rose-600 text-white text-center py-3 px-6"><p>经验不足，无法升级！</p></div><div id="reset-notification" class="hidden bg-gradient-to-r from-debug to-rose-600 text-white text-center py-3 px-6"><p>等级已重置为初始状态！</p></div><div id="scene-unlocked-notification" class="hidden bg-gradient-to-r from-scene to-blue-500 text-white text-center py-3 px-6 animate-pulse"><p>恭喜解锁新场景: <span id="unlocked-scene-name" class="font-bold">敦煌</span>！</p></div><div id="scene-switched-notification" class="hidden bg-gradient-to-r from-scene to-blue-500 text-white text-center py-3 px-6"><p>已切换到场景: <span id="switched-scene-name" class="font-bold">敦煌</span></p></div><div id="inventory-unlocked-notification" class="hidden bg-gradient-to-r from-inventory to-purple-500 text-white text-center py-3 px-6 animate-pulse"><p>恭喜解锁背包功能！点击背包按钮查看物品</p></div><div id="stats-unlocked-notification" class="hidden bg-gradient-to-r from-primary to-blue-500 text-white text-center py-3 px-6 animate-pulse"><p>恭喜解锁属性面板！点击属性按钮查看你的能力值</p></div><div id="equipment-unlocked-notification" class="hidden bg-gradient-to-r from-equipment to-pink-500 text-white text-center py-3 px-6 animate-pulse"><p>恭喜解锁装备系统！点击装备按钮查看和更换装备</p></div><div id="item-used-notification" class="hidden bg-gradient-to-r from-item to-green-600 text-white text-center py-3 px-6"><p>使用了 <span id="used-item-name" class="font-bold">地灵丹</span>，获得了 <span id="gained-exp-from-item" class="font-bold">100</span> 点经验值！</p></div><div id="attribute-item-used-notification" class="hidden bg-gradient-to-r from-accent to-orange-600 text-white text-center py-3 px-6"><p>使用了 <span id="attribute-item-name" class="font-bold">生命精华</span>，<span id="attribute-boost-text" class="font-bold attribute-boost">生命值永久提升5点</span>！</p></div><div id="equipment-equipped-notification" class="hidden bg-gradient-to-r from-equipment to-pink-600 text-white text-center py-3 px-6"><p>已装备 <span id="equipped-equipment-name" class="font-bold">青铜剑</span>！</p></div><div id="equipment-unequipped-notification" class="hidden bg-gradient-to-r from-equipment to-pink-600 text-white text-center py-3 px-6"><p>已卸下 <span id="unequipped-equipment-name" class="font-bold">青铜剑</span>！</p></div><div id="item-dropped-notification" class="hidden bg-gradient-to-r from-accent to-orange-500 text-white text-center py-3 px-6 animate-bounce"><p>获得了 <span id="dropped-item-name" class="font-bold">地灵丹</span>！<span id="inventory-full-message" class="text-red-300">背包已满，无法拾取！</span></p></div><div id="item-level-too-low" class="hidden bg-gradient-to-r from-amber-500 to-orange-600 text-white text-center py-3 px-6"><p>玩家等级未达到物品需要等级，请快去升级</p></div><div id="battle-victory-notification" class="hidden bg-gradient-to-r from-green-600 to-emerald-500 text-white text-center py-3 px-6"><p>战斗胜利！获得了 <span id="victory-reward" class="font-bold">稀有装备</span>！</p></div><div id="battle-defeat-notification" class="hidden bg-gradient-to-r from-monster to-red-600 text-white text-center py-3 px-6"><p>实力不济被打死了，退回初始场景</p></div><div id="monster-encounter-notification" class="hidden bg-gradient-to-r from-monster to-orange-600 text-white text-center py-3 px-6 animate-pulse"><p>遭遇了 <span id="encountered-monster-name" class="font-bold">野狗</span>！准备战斗！</p></div></main><!-- 战斗界面 --><div id="battle-interface" class="hidden"><div class="battle-container"><div class="battle-timer"><i class="fa fa-clock-o"></i> <span id="battle-turn-timer">5</span>秒</div><!-- 玩家信息 --><div class="battle-participant"><div class="battle-avatar player-avatar"><img src="https://picsum.photos/200/200?random=1" alt="玩家头像" class="w-full h-full object-cover"></div><div class="battle-info"><div class="flex justify-between"><h3 class="font-bold">勇者玩家</h3><span id="player-battle-hp">100/100</span></div><div class="battle-hp-bar"><div id="player-hp-fill" class="battle-hp-fill player-hp" style="width: 100%"></div></div></div></div><!-- 怪物信息 --><div class="battle-participant"><div class="battle-avatar monster-avatar"><img id="monster-battle-avatar" src="" alt="怪物头像"></div><div class="battle-info"><div class="flex justify-between"><h3 id="monster-battle-name" class="font-bold text-monster"></h3><span id="monster-battle-hp">50/50</span></div><div class="battle-hp-bar"><div id="monster-hp-fill" class="battle-hp-fill monster-hp" style="width: 100%"></div></div></div></div><!-- 战斗日志 --><div class="battle-log" id="battle-log"><!-- 战斗日志会动态添加 --></div><!-- 战斗按钮 --><button id="attack-btn" class="bg-attack hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-attack/20 active:scale-95 flex items-center justify-center gap-2"><i class="fa fa-crosshairs"></i><span>攻击</span></button></div></div><!-- 背包弹窗 --><div id="inventory-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 hidden"><div class="bg-slate-900 rounded-2xl border border-inventory/50 w-full max-w-2xl max-h-[80vh] overflow-y-auto p-6"><div class="flex justify-between items-center mb-6"><h2 class="text-2xl font-bold text-inventory"><i class="fa fa-briefcase mr-2"></i>背包</h2><button id="close-inventory-modal" class="text-slate-400 hover:text-white text-2xl transition-colors"><i class="fa fa-times"></i></button></div><p class="text-slate-300 mb-6">你的背包有25个格子，每提升3级解锁1个新格子。物品和装备有等级限制，达到指定等级才能使用或装备。</p><!-- 5x5 背包格子 --><div id="inventory-slots" class="grid grid-cols-5 gap-3 mb-6"><!-- 背包格子将通过JS动态生成 --></div><div class="text-sm text-slate-400 text-center"><p>点击物品可以使用它，点击装备可以将其装备到对应槽位 | 悬停查看详细信息 | 锁定的格子显示解锁所需等级</p></div></div></div><!-- 属性面板弹窗 --><div id="stats-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 hidden"><div class="bg-slate-900 rounded-2xl border border-primary/50 w-full max-w-2xl max-h-[80vh] overflow-y-auto p-6"><div class="flex justify-between items-center mb-6"><h2 class="text-2xl font-bold text-primary"><i class="fa fa-bar-chart mr-2"></i>角色属性</h2><button id="close-stats-modal" class="text-slate-400 hover:text-white text-2xl transition-colors"><i class="fa fa-times"></i></button></div><p class="text-slate-300 mb-6">你的角色属性会随着等级提升而自动增长，使用特殊物品可以永久提升属性值，装备也会提供额外加成。</p><!-- 属性列表 --><div class="space-y-6 mb-6"><!-- 生命值 --><div class="bg-slate-800/60 rounded-lg p-4"><div class="flex justify-between items-center mb-2"><div class="flex items-center"><i class="fa fa-heart text-hp mr-2"></i><span class="font-bold">生命值</span></div><span id="hp-value" class="text-hp font-bold">100</span><span class="text-xs text-green-400">(+<span id="hp-bonus">0</span>)</span><span class="text-xs text-blue-400">(装备+<span id="hp-equip-bonus">0</span>)</span></div><div class="h-2 bg-slate-700 rounded-full overflow-hidden"><div id="hp-bar" class="stat-bar bg-hp w-[30%]"></div></div><p class="text-xs text-slate-400 mt-1">影响你的生存能力，等级越高生命值越高</p></div><!-- 内力 --><div class="bg-slate-800/60 rounded-lg p-4"><div class="flex justify-between items-center mb-2"><div class="flex items-center"><i class="fa fa-bolt text-mp mr-2"></i><span class="font-bold">内力</span></div><span id="mp-value" class="text-mp font-bold">50</span><span class="text-xs text-green-400">(+<span id="mp-bonus">0</span>)</span><span class="text-xs text-blue-400">(装备+<span id="mp-equip-bonus">0</span>)</span></div><div class="h-2 bg-slate-700 rounded-full overflow-hidden"><div id="mp-bar" class="stat-bar bg-mp w-[20%]"></div></div><p class="text-xs text-slate-400 mt-1">影响你的技能释放能力，等级越高内力越充沛</p></div><!-- 攻击 --><div class="bg-slate-800/60 rounded-lg p-4"><div class="flex justify-between items-center mb-2"><div class="flex items-center"><i class="fa fa-crosshairs text-attack mr-2"></i><span class="font-bold">攻击</span></div><span id="attack-value" class="text-attack font-bold">10</span><span class="text-xs text-green-400">(+<span id="attack-bonus">0</span>)</span><span class="text-xs text-blue-400">(装备+<span id="attack-equip-bonus">0</span>)</span></div><div class="h-2 bg-slate-700 rounded-full overflow-hidden"><div id="attack-bar" class="stat-bar bg-attack w-[15%]"></div></div><p class="text-xs text-slate-400 mt-1">影响你的伤害输出，等级越高攻击力越强</p></div><!-- 防御 --><div class="bg-slate-800/60 rounded-lg p-4"><div class="flex justify-between items-center mb-2"><div class="flex items-center"><i class="fa fa-shield text-defense mr-2"></i><span class="font-bold">防御</span></div><span id="defense-value" class="text-defense font-bold">8</span><span class="text-xs text-green-400">(+<span id="defense-bonus">0</span>)</span><span class="text-xs text-blue-400">(装备+<span id="defense-equip-bonus">0</span>)</span></div><div class="h-2 bg-slate-700 rounded-full overflow-hidden"><div id="defense-bar" class="stat-bar bg-defense w-[12%]"></div></div><p class="text-xs text-slate-400 mt-1">减少受到的伤害，等级越高防御力越强</p></div><!-- 命中 --><div class="bg-slate-800/60 rounded-lg p-4"><div class="flex justify-between items-center mb-2"><div class="flex items-center"><i class="fa fa-bullseye text-hit mr-2"></i><span class="font-bold">命中</span></div><span id="hit-value" class="text-hit font-bold">5</span><span class="text-xs text-green-400">(+<span id="hit-bonus">0</span>)</span><span class="text-xs text-blue-400">(装备+<span id="hit-equip-bonus">0</span>)</span></div><div class="h-2 bg-slate-700 rounded-full overflow-hidden"><div id="hit-bar" class="stat-bar bg-hit w-[10%]"></div></div><p class="text-xs text-slate-400 mt-1">提高攻击命中率，降低敌人闪避几率</p></div><!-- 闪避 --><div class="bg-slate-800/60 rounded-lg p-4"><div class="flex justify-between items-center mb-2"><div class="flex items-center"><i class="fa fa-random text-dodge mr-2"></i><span class="font-bold">闪避</span></div><span id="dodge-value" class="text-dodge font-bold">3</span><span class="text-xs text-green-400">(+<span id="dodge-bonus">0</span>)</span><span class="text-xs text-blue-400">(装备+<span id="dodge-equip-bonus">0</span>)</span></div><div class="h-2 bg-slate-700 rounded-full overflow-hidden"><div id="dodge-bar" class="stat-bar bg-dodge w-[8%]"></div></div><p class="text-xs text-slate-400 mt-1">提高躲避敌人攻击的几率</p></div><!-- 暴击 --><div class="bg-slate-800/60 rounded-lg p-4"><div class="flex justify-between items-center mb-2"><div class="flex items-center"><i class="fa fa-star text-crit mr-2"></i><span class="font-bold">暴击</span></div><span id="crit-value" class="text-crit font-bold">2</span><span class="text-xs text-green-400">(+<span id="crit-bonus">0</span>)</span><span class="text-xs text-blue-400">(装备+<span id="crit-equip-bonus">0</span>)</span></div><div class="h-2 bg-slate-700 rounded-full overflow-hidden"><div id="crit-bar" class="stat-bar bg-crit w-[5%]"></div></div><p class="text-xs text-slate-400 mt-1">提高造成双倍伤害的几率</p></div><!-- 暴防 --><div class="bg-slate-800/60 rounded-lg p-4"><div class="flex justify-between items-center mb-2"><div class="flex items-center"><i class="fa fa-shield text-critDef mr-2"></i><span class="font-bold">暴防</span></div><span id="critDef-value" class="text-critDef font-bold">2</span><span class="text-xs text-green-400">(+<span id="critDef-bonus">0</span>)</span><span class="text-xs text-blue-400">(装备+<span id="critDef-equip-bonus">0</span>)</span></div><div class="h-2 bg-slate-700 rounded-full overflow-hidden"><div id="critDef-bar" class="stat-bar bg-critDef w-[5%]"></div></div><p class="text-xs text-slate-400 mt-1">降低敌人对你造成暴击的几率</p></div></div><div class="text-sm text-slate-400 text-center"><p>所有属性会随着等级提升自动增加 | 每级提升幅度：生命值+20，内力+10，攻击+2，防御+1.5，命中+1，闪避+0.5，暴击+0.3，暴防+0.3</p><p class="mt-1 text-green-400">绿色数字表示通过物品获得的永久属性加成</p><p class="mt-1 text-blue-400">蓝色数字表示通过装备获得的属性加成</p></div></div></div><!-- 装备面板弹窗 --><div id="equipment-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 hidden"><div class="bg-slate-900 rounded-2xl border border-equipment/50 w-full max-w-3xl max-h-[80vh] overflow-y-auto p-6"><div class="flex justify-between items-center mb-6"><h2 class="text-2xl font-bold text-equipment"><i class="fa fa-shield mr-2"></i>装备</h2><button id="close-equipment-modal" class="text-slate-400 hover:text-white text-2xl transition-colors"><i class="fa fa-times"></i></button></div><p class="text-slate-300 mb-6">装备可以大幅提升你的战斗能力，15级以上场景会掉落各种装备。点击装备槽可以卸下当前装备，在背包中点击装备可以装备到对应槽位。</p><div class="mb-8"><h3 class="text-lg font-bold text-weapon mb-4">攻击性装备</h3><div class="grid grid-cols-2 sm:grid-cols-4 gap-4" id="offensive-equipment-slots"><!-- 攻击性装备槽将通过JS动态生成 --></div></div><div><h3 class="text-lg font-bold text-armor mb-4">防御性装备</h3><div class="grid grid-cols-2 sm:grid-cols-4 gap-4" id="defensive-equipment-slots"><!-- 防御性装备槽将通过JS动态生成 --></div></div><div class="mt-8 text-sm text-slate-400 text-center"><p>橙色边框为攻击性装备，蓝色边框为防御性装备 | 装备有等级要求，达到对应等级才能装备</p></div></div></div><!-- 物品提示框 (动态定位) --><div id="item-tooltip" class="item-tooltip"><div class="item-tooltip-title tooltip-item">地灵丹</div><div class="item-tooltip-level">需要等级: 1</div><div class="item-tooltip-description">蕴含大地灵气的丹药，服用后可快速提升修为</div><div class="item-tooltip-effect">使用后获得100点经验值</div></div><!-- 场景选择模态框 --><div id="scene-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 hidden"><div class="bg-slate-900 rounded-2xl border border-scene/50 w-full max-w-4xl max-h-[80vh] overflow-y-auto p-6"><div class="flex justify-between items-center mb-6"><h2 class="text-2xl font-bold text-scene">探索场景</h2><button id="close-scene-modal" class="text-slate-400 hover:text-white text-2xl transition-colors"><i class="fa fa-times"></i></button></div><p class="text-slate-300 mb-6">每个场景有不同的经验加成和物品掉落，解锁更高级的场景可以获得更好的奖励！15级以上场景会掉落装备和遭遇更强的野怪。</p><div id="scenes-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"><!-- 场景卡片将通过JS动态生成 --></div></div></div><!-- 游戏说明 --><div class="mt-8 w-full max-w-4xl bg-slate-900/60 backdrop-blur-sm rounded-xl p-5 border border-slate-700"><h3 class="text-lg font-bold mb-3 flex items-center"><i class="fa fa-info-circle text-primary mr-2"></i>游戏说明</h3><ul class="text-slate-300 space-y-2 text-sm"><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>经验会自动增长，每秒钟获得固定经验值</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>每个场景有概率掉落特定物品，15级以上场景开始掉落装备，挂机越久获得稀有物品的机会越大</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>15级以上的场景每30秒会遭遇野怪，场景等级越高，野怪越强</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>击败野怪可以获得稀有装备，战斗失败会被打回初始场景</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>属性物品使用后可永久提升对应属性，掉率较低</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>装备分为攻击性和防御性两类，共8个装备槽位，可大幅提升角色能力</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>点击"获得经验"按钮可以快速获取额外经验</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>当经验足够时，"升级"按钮将亮起，点击即可升级</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>达到3级后解锁"背包"功能，初始有5个格子</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>每提升3级解锁1个新的背包格子，总共25个格子</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>物品和装备有等级限制，只有达到对应等级才能使用或装备</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>达到5级后解锁"场景"功能，每5级可解锁一个新场景</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>达到9级后解锁"属性"面板，可以查看角色的详细能力值</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>达到15级后解锁"装备"系统，可以装备和管理各种装备</span></li><li class="flex items-start"><i class="fa fa-check-circle text-secondary mt-1 mr-2"></i><span>高级场景提供更高的经验加成和更好的物品、装备掉落</span></li></ul></div><script>// 定义物品类型const itemTypes = {// 经验类物品earthSpiritPill: {id: 1,name: "地灵丹",level: 1,description: "蕴含大地灵气的丹药，服用后可快速提升修为",effect: "使用后获得100点经验值",icon: '<i class="fa fa-diamond text-2xl text-item"></i>',expGain: 100,type: "exp"},heavenSpiritPill: {id: 2,name: "天灵丹",level: 8,description: "蕴含九天灵气的稀有丹药，药力远胜地灵丹",effect: "使用后获得1000点经验值",icon: '<i class="fa fa-star text-2xl text-yellow-400"></i>',expGain: 1000,type: "exp"},smallRejuvenationPill: {id: 3,name: "小还丹",level: 11,description: "蕴含温和灵气的疗伤丹药，同时能提升修为",effect: "使用后获得2000点经验值",icon: '<i class="fa fa-medkit text-2xl text-red-400"></i>',expGain: 2000,type: "exp"},largeRejuvenationPill: {id: 4,name: "大还丹",level: 14,description: "凝聚浓郁灵气的高级丹药，功效显著",effect: "使用后获得5000点经验值",icon: '<i class="fa fa-medkit text-2xl text-red-600"></i>',expGain: 5000,type: "exp"},nineRevolutionPill: {id: 5,name: "九转还魂丹",level: 18,description: "传说中的神丹，九转炼制而成，有生死人肉白骨之效",effect: "使用后获得20000点经验值",icon: '<i class="fa fa-medkit text-2xl text-purple-500"></i>',expGain: 20000,type: "exp"},spiritStone: {id: 6,name: "灵石",level: 22,description: "蕴含精纯灵气的矿石，可直接吸收其中能量",effect: "使用后获得50000点经验值",icon: '<i class="fa fa-diamond text-2xl text-blue-400"></i>',expGain: 50000,type: "exp"},// 生命值属性物品lifeEssence: {id: 10,name: "生命精华",level: 5,description: "凝聚生命能量的精华，可永久提升生命值",effect: "生命值永久+5",icon: '<i class="fa fa-heart text-2xl text-hp"></i>',attribute: "hp",value: 5,type: "attribute"},vitalElixir: {id: 11,name: "活力药剂",level: 20,description: "蕴含旺盛生命力的药剂，效果显著",effect: "生命值永久+15",icon: '<i class="fa fa-heartbeat text-2xl text-hp"></i>',attribute: "hp",value: 15,type: "attribute"},// 内力属性物品manaShard: {id: 13,name: "魔力碎片",level: 8,description: "蕴含少量魔力的碎片，可提升内力上限",effect: "内力永久+3",icon: '<i class="fa fa-bolt text-2xl text-mp"></i>',attribute: "mp",value: 3,type: "attribute"},arcaneCrystal: {id: 14,name: "秘法水晶",level: 25,description: "凝聚了秘法能量的水晶，能显著提升内力",effect: "内力永久+10",icon: '<i class="fa fa-diamond text-2xl text-mp"></i>',attribute: "mp",value: 10,type: "attribute"},// 攻击属性物品attackRune: {id: 16,name: "攻击符文",level: 10,description: "刻有攻击增幅咒语的符文",effect: "攻击永久+2",icon: '<i class="fa fa-crosshairs text-2xl text-attack"></i>',attribute: "attack",value: 2,type: "attribute"},warriorEssence: {id: 17,name: "勇士精华",level: 30,description: "萃取自百名勇士的战斗精华",effect: "攻击永久+8",icon: '<i class="fa fa-fighter-jet text-2xl text-attack"></i>',attribute: "attack",value: 8,type: "attribute"},// 防御属性物品defenseAmulet: {id: 19,name: "防御护身符",level: 12,description: "加持了防御魔法的护身符",effect: "防御永久+2",icon: '<i class="fa fa-shield text-2xl text-defense"></i>',attribute: "defense",value: 2,type: "attribute"},earthArmor: {id: 20,name: "大地之甲碎片",level: 35,description: "蕴含大地之力的铠甲碎片",effect: "防御永久+7",icon: '<i class="fa fa-shield-alt text-2xl text-defense"></i>',attribute: "defense",value: 7,type: "attribute"},// 命中属性物品precisionPotion: {id: 22,name: "精准药剂",level: 15,description: "能提高攻击精准度的特殊药剂",effect: "命中永久+1",icon: '<i class="fa fa-bullseye text-2xl text-hit"></i>',attribute: "hit",value: 1,type: "attribute"},eagleEye: {id: 23,name: "鹰眼",level: 40,description: "萃取自雄鹰眼中的精华，提升洞察力",effect: "命中永久+5",icon: '<i class="fa fa-eye text-2xl text-hit"></i>',attribute: "hit",value: 5,type: "attribute"},// 闪避属性物品windStep: {id: 25,name: "风之步",level: 18,description: "蕴含风元素力量的神奇物品",effect: "闪避永久+1",icon: '<i class="fa fa-wind text-2xl text-dodge"></i>',attribute: "dodge",value: 1,type: "attribute"},ghostCloak: {id: 26,name: "幽灵披风碎片",level: 45,description: "能让人如幽灵般难以捉摸的披风碎片",effect: "闪避永久+4",icon: '<i class="fa fa-ghost text-2xl text-dodge"></i>',attribute: "dodge",value: 4,type: "attribute"},// 暴击属性物品critDust: {id: 28,name: "暴击粉尘",level: 22,description: "能提高暴击几率的神秘粉尘",effect: "暴击永久+1",icon: '<i class="fa fa-star text-2xl text-crit"></i>',attribute: "crit",value: 1,type: "attribute"},assassinMark: {id: 29,name: "刺客印记",level: 50,description: "高阶刺客使用的神秘印记",effect: "暴击永久+3",icon: '<i class="fa fa-crosshairs text-2xl text-crit"></i>',attribute: "crit",value: 3,type: "attribute"},// 暴防属性物品antiCritTalisman: {id: 31,name: "抗暴符",level: 25,description: "能降低被暴击几率的符咒",effect: "暴防永久+1",icon: '<i class="fa fa-shield text-2xl text-critDef"></i>',attribute: "critDef",value: 1,type: "attribute"},guardianAura: {id: 32,name: "守护光环",level: 55,description: "来自守护天使的光环碎片",effect: "暴防永久+3",icon: '<i class="fa fa-shield-alt text-2xl text-critDef"></i>',attribute: "critDef",value: 3,type: "attribute"}};// 定义装备类型const equipmentTypes = {// 攻击性装备 - 武器bronzeSword: {id: 101,name: "青铜剑",level: 15,slot: "weapon",type: "offensive",description: "用青铜打造的基础武器，适合初学者使用",icon: '<i class="fa fa-sword text-2xl text-weapon"></i>',stats: {attack: 5,hit: 1,crit: 0.5}},ironSword: {id: 102,name: "铁剑",level: 20,slot: "weapon",type: "offensive",description: "铁质武器，比青铜剑更锋利",icon: '<i class="fa fa-sword text-2xl text-weapon"></i>',stats: {attack: 10,hit: 2,crit: 1}},steelSword: {id: 103,name: "钢剑",level: 25,slot: "weapon",type: "offensive",description: "钢制武器，锋利度和耐用性都很出色",icon: '<i class="fa fa-sword text-2xl text-weapon"></i>',stats: {attack: 18,hit: 3,crit: 2}},heroSword: {id: 104,name: "英雄剑",level: 35,slot: "weapon",type: "offensive",description: "传说中英雄使用过的剑，蕴含神秘力量",icon: '<i class="fa fa-sword text-2xl text-weapon"></i>',stats: {attack: 30,hit: 5,crit: 3}},// 稀有装备 - 击败高等级怪物获得dragonSlayer: {id: 105,name: "屠龙刀",level: 40,slot: "weapon",type: "offensive",description: "传说中能屠龙的神兵利器",icon: '<i class="fa fa-sword text-2xl text-weapon"></i>',stats: {attack: 50,hit: 8,crit: 5}},// 攻击性装备 - 护腕leatherBracers: {id: 111,name: "皮护腕",level: 15,slot: "bracers",type: "offensive",description: "皮革制成的护腕，轻便且提供基础保护",icon: '<i class="fa fa-shield text-2xl text-weapon"></i>',stats: {attack: 2,crit: 1}},ironBracers: {id: 112,name: "铁护腕",level: 22,slot: "bracers",type: "offensive",description: "铁质护腕，提供更好的保护和攻击加成",icon: '<i class="fa fa-shield text-2xl text-weapon"></i>',stats: {attack: 5,crit: 2}},steelBracers: {id: 113,name: "钢护腕",level: 30,slot: "bracers",type: "offensive",description: "钢制护腕，平衡了防御和攻击加成",icon: '<i class="fa fa-shield text-2xl text-weapon"></i>',stats: {attack: 8,crit: 3}},// 攻击性装备 - 项链copperAmulet: {id: 121,name: "铜项链",level: 17,slot: "necklace",type: "offensive",description: "铜制项链，带有基础魔法加持",icon: '<i class="fa fa-circle text-2xl text-weapon"></i>',stats: {attack: 3,hit: 2}},silverAmulet: {id: 122,name: "银项链",level: 25,slot: "necklace",type: "offensive",description: "银制项链，魔法加持效果更好",icon: '<i class="fa fa-circle text-2xl text-weapon"></i>',stats: {attack: 6,hit: 4}},goldAmulet: {id: 123,name: "金项链",level: 33,slot: "necklace",type: "offensive",description: "金制项链，蕴含强大的魔法力量",icon: '<i class="fa fa-circle text-2xl text-weapon"></i>',stats: {attack: 10,hit: 6}},// 攻击性装备 - 手套clothGloves: {id: 131,name: "布手套",level: 16,slot: "gloves",type: "offensive",description: "布制手套，提供基础的抓握力",icon: '<i class="fa fa-hand-paper-o text-2xl text-weapon"></i>',stats: {hit: 3,crit: 1}},leatherGloves: {id: 132,name: "皮手套",level: 23,slot: "gloves",type: "offensive",description: "皮质手套，提供更好的抓握力和保护",icon: '<i class="fa fa-hand-paper-o text-2xl text-weapon"></i>',stats: {hit: 5,crit: 2}},steelGloves: {id: 133,name: "钢手套",level: 31,slot: "gloves",type: "offensive",description: "钢制手套，兼顾保护和攻击精准度",icon: '<i class="fa fa-hand-paper-o text-2xl text-weapon"></i>',stats: {hit: 8,crit: 3}},// 防御性装备 - 头盔leatherHelmet: {id: 201,name: "皮头盔",level: 15,slot: "helmet",type: "defensive",description: "皮革制成的头盔，提供基础头部保护",icon: '<i class="fa fa-user-circle text-2xl text-armor"></i>',stats: {hp: 10,defense: 2,critDef: 1}},ironHelmet: {id: 202,name: "铁头盔",level: 21,slot: "helmet",type: "defensive",description: "铁质头盔，提供更好的头部保护",icon: '<i class="fa fa-user-circle text-2xl text-armor"></i>',stats: {hp: 20,defense: 5,critDef: 2}},steelHelmet: {id: 203,name: "钢头盔",level: 29,slot: "helmet",type: "defensive",description: "钢制头盔，防御性能优良",icon: '<i class="fa fa-user-circle text-2xl text-armor"></i>',stats: {hp: 35,defense: 8,critDef: 3}},// 防御性装备 - 护甲leatherArmor: {id: 211,name: "皮护甲",level: 16,slot: "armor",type: "defensive",description: "皮革制成的护甲，轻便且有基础防护能力",icon: '<i class="fa fa-shield text-2xl text-armor"></i>',stats: {hp: 20,defense: 5}},ironArmor: {id: 212,name: "铁护甲",level: 22,slot: "armor",type: "defensive",description: "铁质护甲，提供良好的防护能力",icon: '<i class="fa fa-shield text-2xl text-armor"></i>',stats: {hp: 40,defense: 10}},steelArmor: {id: 213,name: "钢护甲",level: 30,slot: "armor",type: "defensive",description: "钢制护甲，防护能力优秀",icon: '<i class="fa fa-shield text-2xl text-armor"></i>',stats: {hp: 70,defense: 18}},// 稀有装备 - 击败高等级怪物获得dragonScaleArmor: {id: 214,name: "龙鳞甲",level: 45,slot: "armor",type: "defensive",description: "用龙鳞打造的传奇护甲，刀枪不入",icon: '<i class="fa fa-shield text-2xl text-armor"></i>',stats: {hp: 150,defense: 30,dodge: 5}},// 防御性装备 - 护肩clothShoulders: {id: 221,name: "布护肩",level: 17,slot: "shoulders",type: "defensive",description: "布制护肩，提供基础肩部保护",icon: '<i class="fa fa-archive text-2xl text-armor"></i>',stats: {hp: 10,defense: 3,dodge: 1}},leatherShoulders: {id: 222,name: "皮护肩",level: 23,slot: "shoulders",type: "defensive",description: "皮质护肩，提供较好的肩部保护",icon: '<i class="fa fa-archive text-2xl text-armor"></i>',stats: {hp: 20,defense: 6,dodge: 2}},steelShoulders: {id: 223,name: "钢护肩",level: 31,slot: "shoulders",type: "defensive",description: "钢制护肩，提供出色的肩部保护",icon: '<i class="fa fa-archive text-2xl text-armor"></i>',stats: {hp: 35,defense: 10,dodge: 3}},// 防御性装备 - 靴子clothBoots: {id: 231,name: "布鞋",level: 18,slot: "boots",type: "defensive",description: "布制鞋子，轻便舒适",icon: '<i class="fa fa-male text-2xl text-armor"></i>',stats: {dodge: 2,mp: 5}},leatherBoots: {id: 232,name: "皮靴",level: 24,slot: "boots",type: "defensive",description: "皮质靴子，耐用且提供较好的机动性",icon: '<i class="fa fa-male text-2xl text-armor"></i>',stats: {dodge: 4,mp: 10}},steelBoots: {id: 233,name: "钢靴",level: 32,slot: "boots",type: "defensive",description: "钢制靴子，兼顾防护和机动性",icon: '<i class="fa fa-male text-2xl text-armor"></i>',stats: {dodge: 6,mp: 20,defense: 3}}};// 定义野怪类型 - 随着场景等级提升而增强const monsterTypes = {// 低等级怪物 (15-25级场景)wildDog: {id: 1,name: "野狗",level: 15,description: "游荡在野外的凶猛野狗，具有一定攻击性",icon: '<i class="fa fa-dog text-2xl text-monster"></i>',avatar: "https://picsum.photos/seed/wilddog/200/200",stats: {hp: 100,attack: 15,defense: 5,hit: 8,dodge: 5,crit: 3,critDef: 2},reward: equipmentTypes.bronzeSword.id},mountainWolf: {id: 2,name: "山狼",level: 20,description: "生活在山区的狼，比野狗更凶猛狡猾",icon: '<i class="fa fa-wolf-pack-battalion text-2xl text-monster"></i>',avatar: "https://picsum.photos/seed/wolf/200/200",stats: {hp: 150,attack: 20,defense: 8,hit: 10,dodge: 8,crit: 5,critDef: 3},reward: equipmentTypes.ironSword.id},// 中等级怪物 (25-40级场景)blackBear: {id: 3,name: "黑熊",level: 25,description: "力大无穷的黑熊，防御能力出众",icon: '<i class="fa fa-bear text-2xl text-monster"></i>',avatar: "https://picsum.photos/seed/bear/200/200",stats: {hp: 250,attack: 25,defense: 15,hit: 7,dodge: 3,crit: 4,critDef: 5},reward: equipmentTypes.steelSword.id},mountainTiger: {id: 4,name: "山虎",level: 30,description: "山林中的顶级掠食者，凶猛且敏捷",icon: '<i class="fa fa-paw text-2xl text-monster"></i>',avatar: "https://picsum.photos/seed/tiger/200/200",stats: {hp: 300,attack: 35,defense: 12,hit: 12,dodge: 10,crit: 8,critDef: 4},reward: equipmentTypes.steelArmor.id},bandit: {id: 5,name: "山贼",level: 35,description: "盘踞在山道上的匪徒，装备简陋武器",icon: '<i class="fa fa-user-secret text-2xl text-monster"></i>',avatar: "https://picsum.photos/seed/bandit/200/200",stats: {hp: 350,attack: 40,defense: 15,hit: 15,dodge: 8,crit: 6,critDef: 6},reward: equipmentTypes.goldAmulet.id},// 高等级怪物 (40级以上场景)giantSpider: {id: 6,name: "巨型蜘蛛",level: 40,description: "变异的巨型蜘蛛，带有剧毒",icon: '<i class="fa fa-spider text-2xl text-monster"></i>',avatar: "https://picsum.photos/seed/spider/200/200",stats: {hp: 450,attack: 50,defense: 20,hit: 18,dodge: 12,crit: 10,critDef: 8},reward: equipmentTypes.dragonSlayer.id},stoneGolem: {id: 7,name: "石巨人",level: 50,description: "由岩石构成的巨大傀儡，防御力惊人",icon: '<i class="fa fa-monument text-2xl text-monster"></i>',avatar: "https://picsum.photos/seed/golem/200/200",stats: {hp: 800,attack: 60,defense: 40,hit: 10,dodge: 2,crit: 5,critDef: 15},reward: equipmentTypes.dragonScaleArmor.id}};// 装备槽配置const equipmentSlots = {offensive: [{ id: "weapon", name: "武器", icon: '<i class="fa fa-sword text-2xl text-weapon"></i>' },{ id: "bracers", name: "护腕", icon: '<i class="fa fa-shield text-2xl text-weapon"></i>' },{ id: "necklace", name: "项链", icon: '<i class="fa fa-circle text-2xl text-weapon"></i>' },{ id: "gloves", name: "手套", icon: '<i class="fa fa-hand-paper-o text-2xl text-weapon"></i>' }],defensive: [{ id: "helmet", name: "头盔", icon: '<i class="fa fa-user-circle text-2xl text-armor"></i>' },{ id: "armor", name: "护甲", icon: '<i class="fa fa-shield text-2xl text-armor"></i>' },{ id: "shoulders", name: "护肩", icon: '<i class="fa fa-archive text-2xl text-armor"></i>' },{ id: "boots", name: "靴子", icon: '<i class="fa fa-male text-2xl text-armor"></i>' }]};// 定义20个场景，每5级解锁一个，经验加成随等级提升而增加，添加掉落物品配置和适合的野怪const scenes = [{ id: 0, name: "剑阁", level: 0, expMultiplier: 1.0, image: "https://picsum.photos/seed/jiange/300/200", bgImage: "https://picsum.photos/seed/jiangebg/1200/400",drops: [{ itemId: itemTypes.earthSpiritPill.id, chance: 10 },{ itemId: itemTypes.lifeEssence.id, chance: 0.8 }],hasMonsters: false // 低等级场景没有怪物},{ id: 1, name: "敦煌", level: 5, expMultiplier: 1.5, image: "https://picsum.photos/seed/dunhuang/300/200", bgImage: "https://picsum.photos/seed/dunhuangbg/1200/400",drops: [{ itemId: itemTypes.earthSpiritPill.id, chance: 8 },{ itemId: itemTypes.heavenSpiritPill.id, chance: 5 },{ itemId: itemTypes.lifeEssence.id, chance: 1.2 },{ itemId: itemTypes.manaShard.id, chance: 0.7 }],hasMonsters: false // 低等级场景没有怪物},{ id: 2, name: "西湖", level: 10, expMultiplier: 2.0, image: "https://picsum.photos/seed/xihu/300/200", bgImage: "https://picsum.photos/seed/xihubg/1200/400",drops: [{ itemId: itemTypes.heavenSpiritPill.id, chance: 7 },{ itemId: itemTypes.smallRejuvenationPill.id, chance: 4 },{ itemId: itemTypes.attackRune.id, chance: 1.0 },{ itemId: itemTypes.manaShard.id, chance: 1.0 }],hasMonsters: false // 低等级场景没有怪物},{ id: 3, name: "故宫", level: 15, expMultiplier: 2.5, image: "https://picsum.photos/seed/gugong/300/200", bgImage: "https://picsum.photos/seed/gugongbg/1200/400",drops: [{ itemId: itemTypes.smallRejuvenationPill.id, chance: 6 },{ itemId: itemTypes.largeRejuvenationPill.id, chance: 3 },{ itemId: itemTypes.defenseAmulet.id, chance: 1.0 },{ itemId: itemTypes.precisionPotion.id, chance: 0.9 },// 15级场景开始掉落基础装备{ itemId: equipmentTypes.bronzeSword.id, chance: 0.5 },{ itemId: equipmentTypes.leatherBracers.id, chance: 0.5 },{ itemId: equipmentTypes.leatherHelmet.id, chance: 0.5 },{ itemId: equipmentTypes.leatherArmor.id, chance: 0.5 }],hasMonsters: true, // 15级以上场景有怪物monsterIds: [monsterTypes.wildDog.id] // 适合的怪物},{ id: 4, name: "长江", level: 20, expMultiplier: 3.0, image: "https://picsum.photos/seed/yangtze/300/200", bgImage: "https://picsum.photos/seed/yangtzebg/1200/400",drops: [{ itemId: itemTypes.largeRejuvenationPill.id, chance: 5 },{ itemId: itemTypes.nineRevolutionPill.id, chance: 2 },{ itemId: itemTypes.vitalElixir.id, chance: 0.8 },{ itemId: itemTypes.windStep.id, chance: 0.7 },// 20级场景掉落中级装备{ itemId: equipmentTypes.ironSword.id, chance: 0.4 },{ itemId: equipmentTypes.ironBracers.id, chance: 0.4 },{ itemId: equipmentTypes.copperAmulet.id, chance: 0.4 },{ itemId: equipmentTypes.clothGloves.id, chance: 0.4 },{ itemId: equipmentTypes.ironHelmet.id, chance: 0.4 },{ itemId: equipmentTypes.ironArmor.id, chance: 0.4 }],hasMonsters: true,monsterIds: [monsterTypes.wildDog.id, monsterTypes.mountainWolf.id]},{ id: 5, name: "长城", level: 25, expMultiplier: 3.5, image: "https://picsum.photos/seed/greatwall/300/200", bgImage: "https://picsum.photos/seed/greatwallbg/1200/400",drops: [{ itemId: itemTypes.nineRevolutionPill.id, chance: 4 },{ itemId: itemTypes.spiritStone.id, chance: 2 },{ itemId: itemTypes.arcaneCrystal.id, chance: 0.9 },{ itemId: itemTypes.antiCritTalisman.id, chance: 0.6 },// 25级场景掉落高级装备{ itemId: equipmentTypes.steelSword.id, chance: 0.3 },{ itemId: equipmentTypes.silverAmulet.id, chance: 0.3 },{ itemId: equipmentTypes.leatherGloves.id, chance: 0.3 },{ itemId: equipmentTypes.steelHelmet.id, chance: 0.3 },{ itemId: equipmentTypes.steelArmor.id, chance: 0.3 },{ itemId: equipmentTypes.leatherShoulders.id, chance: 0.3 }],hasMonsters: true,monsterIds: [monsterTypes.mountainWolf.id, monsterTypes.blackBear.id]},{ id: 6, name: "黄山", level: 30, expMultiplier: 4.0, image: "https://picsum.photos/seed/huangshan/300/200", bgImage: "https://picsum.photos/seed/huangshanbg/1200/400",drops: [{ itemId: itemTypes.spiritStone.id, chance: 3 },{ itemId: itemTypes.warriorEssence.id, chance: 0.8 },{ itemId: itemTypes.critDust.id, chance: 0.7 },// 30级场景掉落更高级装备{ itemId: equipmentTypes.heroSword.id, chance: 0.2 },{ itemId: equipmentTypes.steelBracers.id, chance: 0.2 },{ itemId: equipmentTypes.goldAmulet.id, chance: 0.2 },{ itemId: equipmentTypes.steelGloves.id, chance: 0.2 },{ itemId: equipmentTypes.steelShoulders.id, chance: 0.2 },{ itemId: equipmentTypes.steelBoots.id, chance: 0.2 }],hasMonsters: true,monsterIds: [monsterTypes.blackBear.id, monsterTypes.mountainTiger.id]},{ id: 7, name: "黄河", level: 35, expMultiplier: 4.5, image: "https://picsum.photos/seed/yellowriver/300/200", bgImage: "https://picsum.photos/seed/yellowriverbg/1200/400",drops: [{ itemId: itemTypes.spiritStone.id, chance: 4 },{ itemId: itemTypes.warriorEssence.id, chance: 1.0 },{ itemId: itemTypes.earthArmor.id, chance: 0.8 },// 35级场景掉落稀有装备{ itemId: equipmentTypes.heroSword.id, chance: 0.3 },{ itemId: equipmentTypes.steelBracers.id, chance: 0.3 },{ itemId: equipmentTypes.goldAmulet.id, chance: 0.3 },{ itemId: equipmentTypes.steelGloves.id, chance: 0.3 },{ itemId: equipmentTypes.steelShoulders.id, chance: 0.3 },{ itemId: equipmentTypes.steelBoots.id, chance: 0.3 }],hasMonsters: true,monsterIds: [monsterTypes.mountainTiger.id, monsterTypes.bandit.id]},{ id: 8, name: "泰山", level: 40, expMultiplier: 5.0, image: "https://picsum.photos/seed/taishan/300/200", bgImage: "https://picsum.photos/seed/taishanbg/1200/400",drops: [{ itemId: itemTypes.spiritStone.id, chance: 5 },{ itemId: itemTypes.eagleEye.id, chance: 0.7 },{ itemId: itemTypes.ghostCloak.id, chance: 0.6 },// 40级场景掉落更稀有装备{ itemId: equipmentTypes.heroSword.id, chance: 0.4 },{ itemId: equipmentTypes.steelBracers.id, chance: 0.4 },{ itemId: equipmentTypes.goldAmulet.id, chance: 0.4 },{ itemId: equipmentTypes.steelGloves.id, chance: 0.4 }],hasMonsters: true,monsterIds: [monsterTypes.bandit.id, monsterTypes.giantSpider.id]},{ id: 9, name: "西湖", level: 45, expMultiplier: 5.5, image: "https://picsum.photos/seed/westlake/300/200", bgImage: "https://picsum.photos/seed/westlakebg/1200/400",drops: [{ itemId: itemTypes.spiritStone.id, chance: 6 },{ itemId: itemTypes.ghostCloak.id, chance: 0.8 },{ itemId: itemTypes.assassinMark.id, chance: 0.6 },// 45级场景掉落高级装备{ itemId: equipmentTypes.steelHelmet.id, chance: 0.5 },{ itemId: equipmentTypes.steelArmor.id, chance: 0.5 },{ itemId: equipmentTypes.steelShoulders.id, chance: 0.5 },{ itemId: equipmentTypes.steelBoots.id, chance: 0.5 }],hasMonsters: true,monsterIds: [monsterTypes.giantSpider.id]},{ id: 10, name: "张家界", level: 50, expMultiplier: 6.0, image: "https://picsum.photos/seed/zhangjiajie/300/200", bgImage: "https://picsum.photos/seed/zhangjiajiebg/1200/400", drops: [], hasMonsters: true, monsterIds: [monsterTypes.giantSpider.id, monsterTypes.stoneGolem.id] },{ id: 11, name: "九寨沟", level: 55, expMultiplier: 6.5, image: "https://picsum.photos/seed/jiuzhaigou/300/200", bgImage: "https://picsum.photos/seed/jiuzhaigoubg/1200/400", drops: [], hasMonsters: true, monsterIds: [monsterTypes.stoneGolem.id] },{ id: 12, name: "海南岛", level: 60, expMultiplier: 7.0, image: "https://picsum.photos/seed/hainan/300/200", bgImage: "https://picsum.photos/seed/hainanbg/1200/400", drops: [], hasMonsters: true, monsterIds: [monsterTypes.stoneGolem.id] },{ id: 13, name: "布达拉宫", level: 65, expMultiplier: 7.5, image: "https://picsum.photos/seed/potala/300/200", bgImage: "https://picsum.photos/seed/potalabg/1200/400", drops: [], hasMonsters: true, monsterIds: [monsterTypes.stoneGolem.id] },{ id: 14, name: "桂林山水", level: 70, expMultiplier: 8.0, image: "https://picsum.photos/seed/guilin/300/200", bgImage: "https://picsum.photos/seed/guilinbg/1200/400", drops: [], hasMonsters: true, monsterIds: [monsterTypes.stoneGolem.id] },{ id: 15, name: "西双版纳", level: 75, expMultiplier: 8.5, image: "https://picsum.photos/seed/xishuang/300/200", bgImage: "https://picsum.photos/seed/xishuangbg/1200/400", drops: [], hasMonsters: true, monsterIds: [monsterTypes.stoneGolem.id] },{ id: 16, name: "兵马俑", level: 80, expMultiplier: 9.0, image: "https://picsum.photos/seed/terracotta/300/200", bgImage: "https://picsum.photos/seed/terracottabg/1200/400", drops: [], hasMonsters: true, monsterIds: [monsterTypes.stoneGolem.id] },{ id: 17, name: "三亚", level: 85, expMultiplier: 9.5, image: "https://picsum.photos/seed/sanya/300/200", bgImage: "https://picsum.photos/seed/sanyabg/1200/400", drops: [], hasMonsters: true, monsterIds: [monsterTypes.stoneGolem.id] },{ id: 18, name: "呼伦贝尔", level: 90, expMultiplier: 10.0, image: "https://picsum.photos/seed/hulunbuir/300/200", bgImage: "https://picsum.photos/seed/hulunbuirbg/1200/400", drops: [], hasMonsters: true, monsterIds: [monsterTypes.stoneGolem.id] },{ id: 19, name: "青藏高原", level: 95, expMultiplier: 10.5, image: "https://picsum.photos/seed/qingtibet/300/200", bgImage: "https://picsum.photos/seed/qingtibetbg/1200/400", drops: [], hasMonsters: true, monsterIds: [monsterTypes.stoneGolem.id] }];// 计算属性值的函数function calculateStats(level) {// 计算装备提供的属性加成const equipmentBonuses = calculateEquipmentBonuses();// 基础值 + 每级增加值 * (等级-1) + 物品加成 + 装备加成return {hp: 100 + Math.floor(20 * (level - 1)) + gameState.attributeBonuses.hp + equipmentBonuses.hp,mp: 50 + Math.floor(10 * (level - 1)) + gameState.attributeBonuses.mp + equipmentBonuses.mp,attack: 10 + Math.floor(2 * (level - 1)) + gameState.attributeBonuses.attack + equipmentBonuses.attack,defense: 8 + Math.floor(1.5 * (level - 1)) + gameState.attributeBonuses.defense + equipmentBonuses.defense,hit: 5 + Math.floor(1 * (level - 1)) + gameState.attributeBonuses.hit + equipmentBonuses.hit,dodge: 3 + Math.floor(0.5 * (level - 1)) + gameState.attributeBonuses.dodge + equipmentBonuses.dodge,crit: 2 + Math.floor(0.3 * (level - 1)) + gameState.attributeBonuses.crit + equipmentBonuses.crit,critDef: 2 + Math.floor(0.3 * (level - 1)) + gameState.attributeBonuses.critDef + equipmentBonuses.critDef};}
// 计算战斗力
function calculateCombatPower(level) {const stats = calculateStats(level);// 加权计算：攻击(2.5) > 防御(2) > 暴击(1.5) > 暴防(1.5) > 命中(1) > 闪避(1)return Math.floor(stats.attack * 2.5 +stats.defense * 2 +stats.crit * 1.5 +stats.critDef * 1.5 +stats.hit * 1 +stats.dodge * 1 +level * 5 // 等级基础加成);
}// 计算装备提供的属性加成总和function calculateEquipmentBonuses() {const bonuses = {hp: 0,mp: 0,attack: 0,defense: 0,hit: 0,dodge: 0,crit: 0,critDef: 0};// 遍历所有装备槽Object.keys(gameState.equipment).forEach(slot => {const equipmentId = gameState.equipment[slot];if (!equipmentId) return;// 找到对应的装备const equipment = Object.values(equipmentTypes).find(item => item.id === equipmentId);if (equipment && equipment.stats) {// 累加装备提供的属性Object.keys(equipment.stats).forEach(stat => {bonuses[stat] += equipment.stats[stat];});}});return bonuses;}// 更新属性面板显示function updateStatsPanel() {const stats = calculateStats(gameState.level);const equipmentBonuses = calculateEquipmentBonuses();// 更新数值显示和加成显示document.getElementById('hp-value').textContent = stats.hp;document.getElementById('hp-bonus').textContent = gameState.attributeBonuses.hp;document.getElementById('hp-equip-bonus').textContent = equipmentBonuses.hp;document.getElementById('mp-value').textContent = stats.mp;document.getElementById('mp-bonus').textContent = gameState.attributeBonuses.mp;document.getElementById('mp-equip-bonus').textContent = equipmentBonuses.mp;document.getElementById('attack-value').textContent = stats.attack;document.getElementById('attack-bonus').textContent = gameState.attributeBonuses.attack;document.getElementById('attack-equip-bonus').textContent = equipmentBonuses.attack;document.getElementById('defense-value').textContent = stats.defense;document.getElementById('defense-bonus').textContent = gameState.attributeBonuses.defense;document.getElementById('defense-equip-bonus').textContent = equipmentBonuses.defense;document.getElementById('hit-value').textContent = stats.hit;document.getElementById('hit-bonus').textContent = gameState.attributeBonuses.hit;document.getElementById('hit-equip-bonus').textContent = equipmentBonuses.hit;document.getElementById('dodge-value').textContent = stats.dodge;document.getElementById('dodge-bonus').textContent = gameState.attributeBonuses.dodge;document.getElementById('dodge-equip-bonus').textContent = equipmentBonuses.dodge;document.getElementById('crit-value').textContent = stats.crit;document.getElementById('crit-bonus').textContent = gameState.attributeBonuses.crit;document.getElementById('crit-equip-bonus').textContent = equipmentBonuses.crit;document.getElementById('critDef-value').textContent = stats.critDef;document.getElementById('critDef-bonus').textContent = gameState.attributeBonuses.critDef;document.getElementById('critDef-equip-bonus').textContent = equipmentBonuses.critDef;// 更新进度条（按比例显示，最高值为100级时的属性值+最大可能加成）const maxStats = {hp: 100 + Math.floor(20 * 99) + 65 + 150, // 基础值 + 100级增加值 + 物品最大可能加成 + 装备最大可能加成mp: 50 + Math.floor(10 * 99) + 43 + 50,attack: 10 + Math.floor(2 * 99) + 35 + 80,defense: 8 + Math.floor(1.5 * 99) + 29 + 60,hit: 5 + Math.floor(1 * 99) + 21 + 30,dodge: 3 + Math.floor(0.5 * 99) + 17 + 20,crit: 2 + Math.floor(0.3 * 99) + 14 + 15,critDef: 2 + Math.floor(0.3 * 99) + 14 + 15};document.getElementById('hp-bar').style.width = `${Math.min(100, (stats.hp / maxStats.hp) * 100)}%`;document.getElementById('mp-bar').style.width = `${Math.min(100, (stats.mp / maxStats.mp) * 100)}%`;document.getElementById('attack-bar').style.width = `${Math.min(100, (stats.attack / maxStats.attack) * 100)}%`;document.getElementById('defense-bar').style.width = `${Math.min(100, (stats.defense / maxStats.defense) * 100)}%`;document.getElementById('hit-bar').style.width = `${Math.min(100, (stats.hit / maxStats.hit) * 100)}%`;document.getElementById('dodge-bar').style.width = `${Math.min(100, (stats.dodge / maxStats.dodge) * 100)}%`;document.getElementById('crit-bar').style.width = `${Math.min(100, (stats.crit / maxStats.crit) * 100)}%`;document.getElementById('critDef-bar').style.width = `${Math.min(100, (stats.critDef / maxStats.critDef) * 100)}%`;// 更新战斗力updateCombatPower();}// 更新战斗力显示
function updateCombatPower() {const power = calculateCombatPower(gameState.level);document.getElementById('combat-power').textContent = power;// 战斗力进度条（以100级满状态为参考）const maxPower = 5000; // 预估100级满状态战斗力document.getElementById('power-bar').style.width = `${Math.min(100, (power / maxPower) * 100)}%`;
}// 初始化装备槽function initEquipmentSlots() {// 清空现有内容document.getElementById('offensive-equipment-slots').innerHTML = '';document.getElementById('defensive-equipment-slots').innerHTML = '';// 生成攻击性装备槽equipmentSlots.offensive.forEach(slot => {const slotElement = createEquipmentSlotElement(slot);document.getElementById('offensive-equipment-slots').appendChild(slotElement);});// 生成防御性装备槽equipmentSlots.defensive.forEach(slot => {const slotElement = createEquipmentSlotElement(slot);document.getElementById('defensive-equipment-slots').appendChild(slotElement);});}// 创建单个装备槽元素function createEquipmentSlotElement(slot) {const slotElement = document.createElement('div');const isOffensive = equipmentSlots.offensive.some(s => s.id === slot.id);const equipmentId = gameState.equipment[slot.id];const hasEquipment = !!equipmentId;// 设置基础样式slotElement.className = `equipment-slot ${isOffensive ? 'equipment-slot-weapon' : 'equipment-slot-armor'} ${!hasEquipment ? 'equipment-slot-empty' : ''}`;slotElement.dataset.slot = slot.id;// 找到装备信息let equipment = null;if (hasEquipment) {equipment = Object.values(equipmentTypes).find(item => item.id === equipmentId);}// 设置装备槽内容if (hasEquipment && equipment) {slotElement.innerHTML = `${equipment.icon}<div class="equipment-slot-name">${slot.name}</div><div class="equipment-equipped"><i class="fa fa-check"></i></div>`;// 添加装备提示事件slotElement.addEventListener('mouseenter', (e) => {showEquipmentTooltip(e, equipment);});slotElement.addEventListener('mouseleave', () => {hideItemTooltip();});// 添加点击事件（卸下装备）slotElement.addEventListener('click', () => {unequipEquipment(slot.id);});} else {slotElement.innerHTML = `${slot.icon}<div class="equipment-slot-name">${slot.name}</div>`;}return slotElement;}// 显示装备提示function showEquipmentTooltip(event, equipment) {const tooltipTitle = itemTooltip.querySelector('.item-tooltip-title');const tooltipLevel = itemTooltip.querySelector('.item-tooltip-level');const tooltipDescription = itemTooltip.querySelector('.item-tooltip-description');const tooltipEffect = itemTooltip.querySelector('.item-tooltip-effect');// 设置提示内容tooltipTitle.textContent = equipment.name;tooltipTitle.className = `item-tooltip-title ${equipment.type === 'offensive' ? 'tooltip-weapon' : 'tooltip-armor'}`;tooltipLevel.textContent = `需要等级: ${equipment.level}`;tooltipDescription.textContent = equipment.description;// 生成属性效果文本let statsText = '';Object.keys(equipment.stats).forEach(stat => {const statName = getDisplayNameForAttribute(stat);statsText += `${statName}+${equipment.stats[stat]} `;});tooltipEffect.textContent = `属性加成: ${statsText}`;// 定位提示框const rect = event.target.getBoundingClientRect();itemTooltip.style.left = `${rect.right + 10}px`;itemTooltip.style.top = `${rect.top}px`;itemTooltip.style.opacity = '1';}// 装备物品function equipEquipment(equipmentId) {// 找到装备信息const equipment = Object.values(equipmentTypes).find(item => item.id === equipmentId);if (!equipment) return false;// 检查玩家等级是否达到装备要求if (gameState.level < equipment.level) {showItemLevelTooLowNotification();return false;}// 检查装备槽是否存在const slotExists = equipmentSlots.offensive.some(s => s.id === equipment.slot) || equipmentSlots.defensive.some(s => s.id === equipment.slot);if (!slotExists) return false;// 获取当前装备在该槽位的装备（如果有）const currentEquipmentId = gameState.equipment[equipment.slot];// 如果已有装备，将其放回背包if (currentEquipmentId) {// 尝试添加到背包const added = addItemToInventory(currentEquipmentId);if (!added) {// 背包已满，无法装备新装备showItemDroppedNotification(Object.values(equipmentTypes).find(item => item.id === currentEquipmentId), false);return false;}}// 装备新装备gameState.equipment[equipment.slot] = equipmentId;// 从背包中移除该装备removeItemFromInventory(equipmentId);// 更新装备面板和背包initEquipmentSlots();initInventorySlots();// 更新属性面板if (gameState.statsUnlocked) {updateStatsPanel();}// 显示装备提示showEquipmentEquippedNotification(equipment);return true;}// 卸下装备function unequipEquipment(slotId) {const equipmentId = gameState.equipment[slotId];if (!equipmentId) return;// 找到装备信息const equipment = Object.values(equipmentTypes).find(item => item.id === equipmentId);if (!equipment) return;// 尝试将装备放入背包const added = addItemToInventory(equipmentId);if (!added) {// 背包已满，无法卸下showItemDroppedNotification(equipment, false);return;}// 卸下装备gameState.equipment[slotId] = null;// 更新装备面板和背包initEquipmentSlots();initInventorySlots();// 更新属性面板if (gameState.statsUnlocked) {updateStatsPanel();}// 显示卸下提示showEquipmentUnequippedNotification(equipment);}// 从背包中移除物品function removeItemFromInventory(itemId) {for (let i = 0; i < inventory.length; i++) {if (inventory[i].itemId === itemId) {inventory[i].quantity -= 1;if (inventory[i].quantity <= 0) {inventory[i].itemId = null;}// 整理背包organizeInventory();return true;}}return false;}// 显示装备提示function showEquipmentEquippedNotification(equipment) {document.getElementById('equipped-equipment-name').textContent = equipment.name;hideAllNotifications();document.getElementById('equipment-equipped-notification').classList.remove('hidden');setTimeout(() => {document.getElementById('equipment-equipped-notification').classList.add('hidden');}, 2000);}// 显示卸下装备提示function showEquipmentUnequippedNotification(equipment) {document.getElementById('unequipped-equipment-name').textContent = equipment.name;hideAllNotifications();document.getElementById('equipment-unequipped-notification').classList.remove('hidden');setTimeout(() => {document.getElementById('equipment-unequipped-notification').classList.add('hidden');}, 2000);}// 计算给定等级下解锁的背包格子数量function calculateUnlockedSlots(level) {// 初始解锁5个格子，之后每3级解锁1个return Math.min(5 + Math.floor((level - 1) / 3), 25);}// 计算指定格子的解锁等级function getSlotUnlockLevel(slotIndex) {// 前5个格子初始解锁if (slotIndex < 5) return 1;// 后续格子每3级解锁一个return 3 + (slotIndex - 4) * 3;}// 检查背包是否已满function isInventoryFull() {const unlockedSlots = calculateUnlockedSlots(gameState.level);// 检查所有已解锁的格子是否都有物品for (let i = 0; i < unlockedSlots; i++) {if (!inventory[i].itemId || inventory[i].quantity <= 0) {return false; // 找到空格子，背包未满}}return true; // 所有已解锁格子都有物品，背包已满}// 尝试添加物品到背包function addItemToInventory(itemId) {// 检查是物品还是装备const isEquipment = Object.values(equipmentTypes).some(equip => equip.id === itemId);if (isInventoryFull()) {return false; // 背包已满，无法添加}const unlockedSlots = calculateUnlockedSlots(gameState.level);// 先尝试堆叠到已有物品/装备for (let i = 0; i < unlockedSlots; i++) {if (inventory[i].itemId === itemId) {inventory[i].quantity += 1;return true;}}// 再尝试放到空格子for (let i = 0; i < unlockedSlots; i++) {if (!inventory[i].itemId || inventory[i].quantity <= 0) {inventory[i].itemId = itemId;inventory[i].quantity = 1;return true;}}return false;}// 处理场景物品掉落function handleSceneDrop() {const currentScene = getCurrentScene();if (!currentScene.drops || currentScene.drops.length === 0) {return;}// 随机决定是否掉落物品currentScene.drops.forEach(drop => {const randomChance = Math.random() * 100; // 0-100的随机数if (randomChance <= drop.chance) {// 物品掉落成功// 检查是物品还是装备let itemType = Object.values(itemTypes).find(type => type.id === drop.itemId);let isEquipment = false;if (!itemType) {itemType = Object.values(equipmentTypes).find(type => type.id === drop.itemId);isEquipment = true;}if (itemType) {// 创建掉落动画createItemDropAnimation(itemType);// 尝试添加到背包const added = addItemToInventory(itemType.id);// 显示掉落提示showItemDroppedNotification(itemType, added);// 如果成功添加，更新背包显示if (added) {initInventorySlots();updateUI();}}}});}// 创建物品掉落动画function createItemDropAnimation(itemType) {// 创建物品元素const itemElement = document.createElement('div');itemElement.className = 'floating-item';itemElement.innerHTML = itemType.icon;// 获取当前场景区域位置const sceneArea = document.querySelector('.current-scene-background');const sceneRect = sceneArea.getBoundingClientRect();const bodyRect = document.body.getBoundingClientRect();// 随机位置出现在场景区域const randomX = Math.random() * (sceneRect.width - 40) + sceneRect.left - bodyRect.left;const randomY = Math.random() * (sceneRect.height - 40) + sceneRect.top - bodyRect.top;// 设置初始位置itemElement.style.left = `${randomX}px`;itemElement.style.top = `${randomY}px`;// 获取背包按钮位置作为目标位置const inventoryBtn = document.getElementById('inventory-btn');const inventoryRect = inventoryBtn.getBoundingClientRect();// 计算动画路径const targetX = inventoryRect.left + inventoryRect.width/2 - bodyRect.left;const targetY = inventoryRect.top + inventoryRect.height/2 - bodyRect.top;// 设置动画itemElement.style.transition = 'all 1s cubic-bezier(0.2, 0.8, 0.2, 1)';document.body.appendChild(itemElement);// 触发动画setTimeout(() => {itemElement.style.transform = `translate(${targetX - randomX}px, ${targetY - randomY}px) scale(0.5)`;itemElement.style.opacity = '0';}, 10);// 动画结束后移除元素setTimeout(() => {if (itemElement.parentNode) {itemElement.parentNode.removeChild(itemElement);}}, 1000);}// 战斗相关函数// 获取适合当前场景的随机野怪function getRandomMonsterForScene(sceneId) {const scene = scenes.find(s => s.id === sceneId);if (!scene || !scene.hasMonsters || !scene.monsterIds || scene.monsterIds.length === 0) {return null;}// 从场景可用怪物中随机选择一个const randomIndex = Math.floor(Math.random() * scene.monsterIds.length);const monsterId = scene.monsterIds[randomIndex];// 找到对应的怪物信息return Object.values(monsterTypes).find(m => m.id === monsterId);}// 显示遭遇野怪通知function showMonsterEncounterNotification(monster) {document.getElementById('encountered-monster-name').textContent = monster.name;hideAllNotifications();document.getElementById('monster-encounter-notification').classList.remove('hidden');setTimeout(() => {document.getElementById('monster-encounter-notification').classList.add('hidden');startBattle(monster); // 开始战斗}, 2000);}// 开始战斗function startBattle(monster) {// 记录战斗前的当前场景gameState.battlePreviousSceneId = gameState.currentSceneId;// 暂停自动经验获取gameState.battleInProgress = true;// 初始化战斗数据const playerStats = calculateStats(gameState.level);gameState.battleData = {player: {hp: playerStats.hp,maxHp: playerStats.hp,attack: playerStats.attack,defense: playerStats.defense,hit: playerStats.hit,dodge: playerStats.dodge,crit: playerStats.crit,critDef: playerStats.critDef},monster: {...monster,currentHp: monster.stats.hp},turnTimer: 5, // 每回合5秒倒计时turnInterval: null,playerTurn: true};// 更新战斗界面updateBattleUI();// 显示战斗界面document.getElementById('battle-interface').classList.remove('hidden');// 开始回合计时器startBattleTurnTimer();}// 更新战斗界面function updateBattleUI() {const { player, monster } = gameState.battleData;// 更新玩家信息document.getElementById('player-battle-hp').textContent = `${player.hp}/${player.maxHp}`;document.getElementById('player-hp-fill').style.width = `${(player.hp / player.maxHp) * 100}%`;// 更新怪物信息document.getElementById('monster-battle-name').textContent = monster.name;document.getElementById('monster-battle-avatar').src = monster.avatar;document.getElementById('monster-battle-hp').textContent = `${monster.currentHp}/${monster.stats.hp}`;document.getElementById('monster-hp-fill').style.width = `${(monster.currentHp / monster.stats.hp) * 100}%`;// 清空战斗日志document.getElementById('battle-log').innerHTML = '';// 添加战斗开始日志addBattleLog(`遭遇了${monster.name}！战斗开始！`);}// 开始战斗回合计时器function startBattleTurnTimer() {// 清除之前的计时器if (gameState.battleData.turnInterval) {clearInterval(gameState.battleData.turnInterval);}// 重置计时器gameState.battleData.turnTimer = 5;document.getElementById('battle-turn-timer').textContent = gameState.battleData.turnTimer;// 设置新计时器gameState.battleData.turnInterval = setInterval(() => {gameState.battleData.turnTimer--;document.getElementById('battle-turn-timer').textContent = gameState.battleData.turnTimer;// 计时结束，自动攻击if (gameState.battleData.turnTimer <= 0) {clearInterval(gameState.battleData.turnInterval);playerAttack();}}, 1000);}// 添加战斗日志function addBattleLog(text, className = '') {const logEntry = document.createElement('div');logEntry.className = `battle-log-entry ${className}`;logEntry.textContent = text;const battleLog = document.getElementById('battle-log');battleLog.appendChild(logEntry);// 滚动到底部battleLog.scrollTop = battleLog.scrollHeight;}// 玩家攻击function playerAttack() {const { player, monster } = gameState.battleData;// 检查是否命中const hitChance = player.hit - monster.stats.dodge / 2;const hitRoll = Math.random() * 100;if (hitRoll > hitChance) {// 未命中addBattleLog(`${monster.name}躲过了你的攻击！`, 'miss-text');setTimeout(monsterAttack, 1000);return;}// 计算是否暴击const critChance = player.crit - monster.stats.critDef / 2;const critRoll = Math.random() * 100;const isCritical = critRoll <= critChance;// 计算伤害let damage = Math.max(1, player.attack - monster.stats.defense / 2);if (isCritical) {damage *= 2; // 暴击造成双倍伤害}// 应用伤害monster.currentHp = Math.max(0, monster.currentHp - damage);// 更新UIdocument.getElementById('monster-battle-hp').textContent = `${monster.currentHp}/${monster.stats.hp}`;document.getElementById('monster-hp-fill').style.width = `${(monster.currentHp / monster.stats.hp) * 100}%`;// 添加日志if (isCritical) {addBattleLog(`你对${monster.name}造成了${damage}点暴击伤害！`, 'crit-text');} else {addBattleLog(`你对${monster.name}造成了${damage}点伤害！`, 'damage-text');}// 检查怪物是否死亡if (monster.currentHp <= 0) {endBattle(true); // 战斗胜利return;}// 怪物回合setTimeout(monsterAttack, 1000);}// 怪物攻击function monsterAttack() {const { player, monster } = gameState.battleData;// 检查是否命中const hitChance = monster.stats.hit - player.dodge / 2;const hitRoll = Math.random() * 100;if (hitRoll > hitChance) {// 未命中addBattleLog(`你躲过了${monster.name}的攻击！`, 'miss-text');startPlayerTurn();return;}// 计算是否暴击const critChance = monster.stats.crit - player.critDef / 2;const critRoll = Math.random() * 100;const isCritical = critRoll <= critChance;// 计算伤害let damage = Math.max(1, monster.stats.attack - player.defense / 2);if (isCritical) {damage *= 2; // 暴击造成双倍伤害}// 应用伤害player.hp = Math.max(0, player.hp - damage);// 更新UIdocument.getElementById('player-battle-hp').textContent = `${player.hp}/${player.maxHp}`;document.getElementById('player-hp-fill').style.width = `${(player.hp / player.maxHp) * 100}%`;// 添加日志if (isCritical) {addBattleLog(`${monster.name}对你造成了${damage}点暴击伤害！`, 'crit-text');} else {addBattleLog(`${monster.name}对你造成了${damage}点伤害！`, 'damage-text');}// 检查玩家是否死亡if (player.hp <= 0) {endBattle(false); // 战斗失败return;}// 玩家回合startPlayerTurn();}// 开始玩家回合function startPlayerTurn() {gameState.battleData.playerTurn = true;startBattleTurnTimer();}// 结束战斗function endBattle(victory) {// 清除计时器if (gameState.battleData.turnInterval) {clearInterval(gameState.battleData.turnInterval);}// 隐藏战斗界面document.getElementById('battle-interface').classList.add('hidden');// 恢复自动经验获取gameState.battleInProgress = false;if (victory) {// 战斗胜利，获得奖励const monster = gameState.battleData.monster;const rewardEquipment = Object.values(equipmentTypes).find(e => e.id === monster.reward);// 添加奖励到背包if (rewardEquipment) {const added = addItemToInventory(rewardEquipment.id);if (added) {// 更新背包initInventorySlots();// 显示胜利提示document.getElementById('victory-reward').textContent = rewardEquipment.name;hideAllNotifications();document.getElementById('battle-victory-notification').classList.remove('hidden');setTimeout(() => {document.getElementById('battle-victory-notification').classList.add('hidden');}, 3000);} else {// 背包已满showItemDroppedNotification(rewardEquipment, false);}}} else {// 战斗失败，返回初始场景gameState.currentSceneId = 0; // 初始场景ID// 显示失败提示hideAllNotifications();document.getElementById('battle-defeat-notification').classList.remove('hidden');setTimeout(() => {document.getElementById('battle-defeat-notification').classList.add('hidden');}, 3000);// 更新UIupdateUI();}}// 游戏状态const initialGameState = {level: 1,currentExp: 0,requiredExp: 100,expPerClick: 10,expPerSecond: 1,currentSceneId: 0,unlockedScenes: [0],inventoryUnlocked: false,statsUnlocked: false,equipmentUnlocked: false,attributeBonuses: {hp: 0,mp: 0,attack: 0,defense: 0,hit: 0,dodge: 0,crit: 0,critDef: 0},equipment: {weapon: null,bracers: null,necklace: null,gloves: null,helmet: null,armor: null,shoulders: null,boots: null},// 战斗相关状态battleInProgress: false,battleData: null,battlePreviousSceneId: 0,nextEncounterTime: 30 // 下次遇怪时间（秒）};// 初始化游戏状态let gameState = { ...initialGameState };// 初始化背包function initInventory() {// 初始化为空背包const inventory = Array(25).fill(null).map(() => ({itemId: null,quantity: 0}));// 添加一些初始物品inventory[0] = {itemId: itemTypes.earthSpiritPill.id,quantity: 10};inventory[1] = {itemId: itemTypes.heavenSpiritPill.id,quantity: 5};inventory[2] = {itemId: itemTypes.lifeEssence.id,quantity: 2};inventory[3] = {itemId: itemTypes.attackRune.id,quantity: 1};inventory[4] = {itemId: itemTypes.defenseAmulet.id,quantity: 1};// 为了测试，添加一些装备inventory[5] = {itemId: equipmentTypes.bronzeSword.id,quantity: 1};inventory[6] = {itemId: equipmentTypes.leatherArmor.id,quantity: 1};return inventory;}// 背包数据let inventory = initInventory();// DOM元素const levelDisplay = document.getElementById('level-display');const currentExpDisplay = document.getElementById('current-exp');const requiredExpDisplay = document.getElementById('required-exp');const expBar = document.getElementById('exp-bar');const expRateDisplay = document.getElementById('exp-rate');const gainExpBtn = document.getElementById('gain-exp-btn');const levelUpBtn = document.getElementById('level-up-btn');const resetBtn = document.getElementById('reset-btn');const quickLevelUpBtn = document.getElementById('quick-level-up-btn');const forceEncounterBtn = document.getElementById('force-encounter-btn'); // 强制遇怪按钮const inventoryBtn = document.getElementById('inventory-btn');const inventoryModal = document.getElementById('inventory-modal');const closeInventoryModal = document.getElementById('close-inventory-modal');const inventorySlots = document.getElementById('inventory-slots');const itemTooltip = document.getElementById('item-tooltip');const switchSceneBtn = document.getElementById('switch-scene-btn');const sceneModal = document.getElementById('scene-modal');const closeSceneModal = document.getElementById('close-scene-modal');const scenesContainer = document.getElementById('scenes-container');const currentSceneBg = document.getElementById('current-scene-bg');const currentSceneName = document.getElementById('current-scene-name');const sceneBonus = document.getElementById('scene-bonus');const unlockedSlotsCount = document.getElementById('unlocked-slots-count');const unlockedScenesCount = document.getElementById('unlocked-scenes-count');const slotUnlockedMessage = document.getElementById('slot-unlocked-message');const statsBtn = document.getElementById('stats-btn');const statsModal = document.getElementById('stats-modal');const closeStatsModal = document.getElementById('close-stats-modal');const equipmentBtn = document.getElementById('equipment-btn');const equipmentModal = document.getElementById('equipment-modal');const closeEquipmentModal = document.getElementById('close-equipment-modal');const attackBtn = document.getElementById('attack-btn'); // 战斗攻击按钮const nextEncounterTimeDisplay = document.getElementById('next-encounter-time');const encounterTimerDisplay = document.getElementById('encounter-timer');// 提示相关元素const levelUpNotification = document.getElementById('level-up-notification');const newLevelDisplay = document.getElementById('new-level');const notEnoughExp = document.getElementById('not-enough-exp');const resetNotification = document.getElementById('reset-notification');const sceneUnlockedNotification = document.getElementById('scene-unlocked-notification');const unlockedSceneName = document.getElementById('unlocked-scene-name');const sceneSwitchedNotification = document.getElementById('scene-switched-notification');const switchedSceneName = document.getElementById('switched-scene-name');const inventoryUnlockedNotification = document.getElementById('inventory-unlocked-notification');const statsUnlockedNotification = document.getElementById('stats-unlocked-notification');const equipmentUnlockedNotification = document.getElementById('equipment-unlocked-notification');const itemUsedNotification = document.getElementById('item-used-notification');const usedItemName = document.getElementById('used-item-name');const gainedExpFromItem = document.getElementById('gained-exp-from-item');const attributeItemUsedNotification = document.getElementById('attribute-item-used-notification');const attributeItemName = document.getElementById('attribute-item-name');const attributeBoostText = document.getElementById('attribute-boost-text');const equipmentEquippedNotification = document.getElementById('equipment-equipped-notification');const equippedEquipmentName = document.getElementById('equipped-equipment-name');const equipmentUnequippedNotification = document.getElementById('equipment-unequipped-notification');const unequippedEquipmentName = document.getElementById('unequipped-equipment-name');const itemLevelTooLow = document.getElementById('item-level-too-low');const itemDroppedNotification = document.getElementById('item-dropped-notification');const droppedItemName = document.getElementById('dropped-item-name');const inventoryFullMessage = document.getElementById('inventory-full-message');const battleVictoryNotification = document.getElementById('battle-victory-notification');const victoryReward = document.getElementById('victory-reward');const battleDefeatNotification = document.getElementById('battle-defeat-notification');const monsterEncounterNotification = document.getElementById('monster-encounter-notification');const encounteredMonsterName = document.getElementById('encountered-monster-name');// 获取当前场景function getCurrentScene() {return scenes.find(scene => scene.id === gameState.currentSceneId) || scenes[0];}// 获取当前经验获取速率（考虑场景加成）function getCurrentExpRate() {const currentScene = getCurrentScene();return Math.floor(gameState.expPerSecond * currentScene.expMultiplier);}// 更新UIfunction updateUI() {// 计算解锁的格子数量const unlockedSlots = calculateUnlockedSlots(gameState.level);// 更新等级和经验显示levelDisplay.textContent = gameState.level;currentExpDisplay.textContent = gameState.currentExp;requiredExpDisplay.textContent = gameState.requiredExp;// 更新经验条const expPercentage = (gameState.currentExp / gameState.requiredExp) * 100;expBar.style.width = `${Math.min(expPercentage, 100)}%`;// 更新经验获取速率expRateDisplay.textContent = `${getCurrentExpRate()} 经验/秒`;// 更新统计信息unlockedSlotsCount.textContent = `${unlockedSlots}/25`;unlockedScenesCount.textContent = `${gameState.unlockedScenes.length}/20`;// 检查升级按钮状态if (gameState.currentExp >= gameState.requiredExp) {levelUpBtn.removeAttribute('disabled');levelUpBtn.classList.remove('btn-disabled');} else {levelUpBtn.setAttribute('disabled', 'true');levelUpBtn.classList.add('btn-disabled');}// 检查背包解锁状态（3级解锁）if (gameState.level >= 3 && !gameState.inventoryUnlocked) {gameState.inventoryUnlocked = true;inventoryBtn.removeAttribute('disabled');inventoryBtn.classList.remove('btn-disabled');showInventoryUnlockedNotification();}// 检查属性面板解锁状态（9级解锁）if (gameState.level >= 9 && !gameState.statsUnlocked) {gameState.statsUnlocked = true;statsBtn.removeAttribute('disabled');statsBtn.classList.remove('btn-disabled');showStatsUnlockedNotification();}// 检查装备系统解锁状态（15级解锁）if (gameState.level >= 15 && !gameState.equipmentUnlocked) {gameState.equipmentUnlocked = true;equipmentBtn.removeAttribute('disabled');equipmentBtn.classList.remove('btn-disabled');showEquipmentUnlockedNotification();}// 检查场景解锁状态（5级解锁场景功能）if (gameState.level >= 5) {switchSceneBtn.removeAttribute('disabled');switchSceneBtn.classList.remove('btn-disabled');}// 检查新场景解锁scenes.forEach(scene => {if (gameState.level >= scene.level && !gameState.unlockedScenes.includes(scene.id)) {gameState.unlockedScenes.push(scene.id);showSceneUnlockedNotification(scene);}});// 更新当前场景显示const currentScene = getCurrentScene();currentSceneName.textContent = currentScene.name;sceneBonus.textContent = `${currentScene.expMultiplier}x`;currentSceneBg.src = currentScene.bgImage;// 更新遇怪计时器显示if (currentScene.hasMonsters && gameState.level >= 15 && !gameState.battleInProgress) {encounterTimerDisplay.classList.remove('hidden');nextEncounterTimeDisplay.textContent = gameState.nextEncounterTime;} else {encounterTimerDisplay.classList.add('hidden');}// 更新属性面板（如果已解锁）if (gameState.statsUnlocked) {updateStatsPanel();}// 更新装备面板（如果已解锁）if (gameState.equipmentUnlocked) {initEquipmentSlots();}// 重新渲染场景列表和背包renderScenes();initInventorySlots();// 更新战斗力updateCombatPower();}// 初始化背包格子function initInventorySlots() {inventorySlots.innerHTML = '';// 计算解锁的格子数量const unlockedSlots = calculateUnlockedSlots(gameState.level);inventory.forEach((slot, index) => {const slotElement = document.createElement('div');let slotClasses = 'inventory-slot';// 检查格子是否已解锁const isSlotUnlocked = index < unlockedSlots;if (!isSlotUnlocked) {// 未解锁的格子slotClasses += ' inventory-slot-locked';slotElement.className = slotClasses;// 显示锁图标和解锁等级const unlockLevel = getSlotUnlockLevel(index);slotElement.innerHTML = `<i class="fa fa-lock text-white/70"></i><span class="slot-unlock-level">${unlockLevel}级</span>`;} else if (slot.itemId) {// 已解锁且有物品/装备// 检查是物品还是装备let itemType = Object.values(itemTypes).find(type => type.id === slot.itemId);let isEquipment = false;if (!itemType) {itemType = Object.values(equipmentTypes).find(type => type.id === slot.itemId);isEquipment = true;}if (itemType) {// 检查玩家等级是否达到物品/装备等级要求const isLevelEnough = gameState.level >= itemType.level;// 添加锁定样式（如果等级不够）if (!isLevelEnough) {slotClasses += ' inventory-slot-locked';}slotElement.className = slotClasses;slotElement.dataset.slotIndex = index;// 物品/装备图标、数量和等级显示slotElement.innerHTML = `${itemType.icon}<span class="item-level">${itemType.level}</span>${slot.quantity > 1 ? `<span class="item-quantity">${slot.quantity}</span>` : ''}`;// 添加悬停提示事件slotElement.addEventListener('mouseenter', (e) => {if (isEquipment) {showEquipmentTooltip(e, itemType);} else {showItemTooltip(e, itemType);}});slotElement.addEventListener('mouseleave', () => {hideItemTooltip();});// 添加点击事件（使用物品或装备）slotElement.addEventListener('click', () => {if (isLevelEnough) {if (isEquipment) {// 装备物品equipEquipment(itemType.id);} else {// 使用物品useItem(index);}} else {// 等级不够的提示showItemLevelTooLowNotification();}});}} else {// 已解锁但为空的格子slotElement.className = `${slotClasses} inventory-slot-empty`;slotElement.dataset.slotIndex = index;}inventorySlots.appendChild(slotElement);});}// 显示物品提示function showItemTooltip(event, itemType) {const tooltipTitle = itemTooltip.querySelector('.item-tooltip-title');const tooltipLevel = itemTooltip.querySelector('.item-tooltip-level');const tooltipDescription = itemTooltip.querySelector('.item-tooltip-description');const tooltipEffect = itemTooltip.querySelector('.item-tooltip-effect');tooltipTitle.textContent = itemType.name;tooltipTitle.className = "item-tooltip-title tooltip-item";tooltipLevel.textContent = `需要等级: ${itemType.level}`;tooltipDescription.textContent = itemType.description;tooltipEffect.textContent = itemType.effect;// 定位提示框const rect = event.target.getBoundingClientRect();itemTooltip.style.left = `${rect.right + 10}px`;itemTooltip.style.top = `${rect.top}px`;itemTooltip.style.opacity = '1';}// 隐藏物品提示function hideItemTooltip() {itemTooltip.style.opacity = '0';}// 使用物品function useItem(slotIndex) {const slot = inventory[slotIndex];if (!slot.itemId || slot.quantity <= 0) return;// 找到物品类型（确保是物品而不是装备）const itemType = Object.values(itemTypes).find(type => type.id === slot.itemId);if (!itemType) return;// 检查玩家等级是否达到物品等级要求if (gameState.level < itemType.level) {showItemLevelTooLowNotification();return;}// 根据物品类型处理不同效果if (itemType.type === "exp") {// 经验类物品gameState.currentExp += itemType.expGain;// 显示使用物品提示showItemUsedNotification(itemType);// 创建经验浮动文字const slotElement = document.querySelector(`.inventory-slot[data-slot-index="${slotIndex}"]`);createFloatingText(slotElement, `+${itemType.expGain}`);} else if (itemType.type === "attribute") {// 属性类物品，永久提升属性gameState.attributeBonuses[itemType.attribute] += itemType.value;// 显示属性提升提示showAttributeItemUsedNotification(itemType);// 创建属性提升浮动文字const slotElement = document.querySelector(`.inventory-slot[data-slot-index="${slotIndex}"]`);createFloatingText(slotElement, `+${itemType.value} ${getDisplayNameForAttribute(itemType.attribute)}`, getColorForAttribute(itemType.attribute));// 更新属性面板if (gameState.statsUnlocked) {updateStatsPanel();}}// 减少物品数量slot.quantity -= 1;if (slot.quantity <= 0) {slot.itemId = null;}// 整理背包，将后面的物品向前移动填补空位organizeInventory();// 更新背包显示initInventorySlots();// 更新UIupdateUI();}// 获取属性的显示名称function getDisplayNameForAttribute(attribute) {const names = {hp: "生命",mp: "内力",attack: "攻击",defense: "防御",hit: "命中",dodge: "闪避",crit: "暴击",critDef: "暴防"};return names[attribute] || attribute;}// 获取属性的颜色function getColorForAttribute(attribute) {const colors = {hp: "text-hp",mp: "text-mp",attack: "text-attack",defense: "text-defense",hit: "text-hit",dodge: "text-dodge",crit: "text-crit",critDef: "text-critDef"};return colors[attribute] || "text-green-400";}// 整理背包，实现物品堆叠function organizeInventory() {// 首先收集所有有物品的格子const filledSlots = inventory.filter(slot => slot.itemId !== null);// 然后堆叠相同物品const stackedSlots = [];filledSlots.forEach(slot => {// 检查是否已有相同物品的堆叠const existing = stackedSlots.find(s => s.itemId === slot.itemId);if (existing) {existing.quantity += slot.quantity;} else {stackedSlots.push({...slot});}});// 填充空位while (stackedSlots.length < inventory.length) {stackedSlots.push({itemId: null, quantity: 0});}// 更新背包inventory = stackedSlots;}// 渲染场景列表function renderScenes() {scenesContainer.innerHTML = '';scenes.forEach(scene => {const isUnlocked = gameState.unlockedScenes.includes(scene.id);const isCurrent = gameState.currentSceneId === scene.id;const sceneCard = document.createElement('div');sceneCard.className = `scene-card rounded-xl overflow-hidden border-2 ${isUnlocked ? 'scene-card-unlocked border-scene/50' : 'border-slate-700 opacity-50'} ${isCurrent ? 'scene-card-current' : ''}`;const sceneImageContainer = document.createElement('div');sceneImageContainer.className = 'scene-image-container h-36';const sceneImage = document.createElement('img');sceneImage.src = scene.image;sceneImage.alt = scene.name;sceneImage.className = 'scene-image w-full h-full object-cover';sceneImage.onload = () => {sceneImage.classList.add('scene-image-loaded');};sceneImageContainer.appendChild(sceneImage);// 如果场景有怪物且已解锁，添加怪物指示器if (scene.hasMonsters && isUnlocked) {const monsterIndicator = document.createElement('div');monsterIndicator.className = 'monster-indicator';monsterIndicator.innerHTML = '<i class="fa fa-bug"></i> 有野怪';sceneImageContainer.appendChild(monsterIndicator);}const sceneInfo = document.createElement('div');sceneInfo.className = 'p-3 bg-slate-800/80';const sceneName = document.createElement('h3');sceneName.className = 'font-bold text-white mb-1';sceneName.textContent = scene.name;const sceneDetails = document.createElement('div');sceneDetails.className = 'text-sm text-slate-300';sceneDetails.innerHTML = `<p>经验加成: ${scene.expMultiplier}x</p><p>解锁等级: ${scene.level}</p>`;// 添加掉落物品信息if (scene.drops && scene.drops.length > 0) {const dropsContainer = document.createElement('div');dropsContainer.className = 'scene-drops';scene.drops.forEach(drop => {// 检查是物品还是装备let itemType = Object.values(itemTypes).find(type => type.id === drop.itemId);let isEquipment = false;if (!itemType) {itemType = Object.values(equipmentTypes).find(type => type.id === drop.itemId);isEquipment = true;}if (itemType) {const dropItem = document.createElement('div');dropItem.className = 'drop-item';dropItem.innerHTML = `${itemType.name} <span class="drop-chance">${drop.chance}%</span>`;dropsContainer.appendChild(dropItem);}});sceneDetails.appendChild(dropsContainer);}sceneInfo.appendChild(sceneName);sceneInfo.appendChild(sceneDetails);sceneCard.appendChild(sceneImageContainer);sceneCard.appendChild(sceneInfo);// 添加点击事件（只有已解锁的场景可点击）if (isUnlocked) {sceneCard.addEventListener('click', () => {if (gameState.currentSceneId !== scene.id) {gameState.currentSceneId = scene.id;// 重置遇怪计时器gameState.nextEncounterTime = 30;updateUI();showSceneSwitchedNotification(scene);sceneModal.classList.add('hidden');}});} else {// 未解锁场景添加提示const lockOverlay = document.createElement('div');lockOverlay.className = 'absolute inset-0 bg-black/60 flex items-center justify-center';lockOverlay.innerHTML = `<i class="fa fa-lock text-3xl text-white"></i>`;sceneImageContainer.style.position = 'relative';sceneImageContainer.appendChild(lockOverlay);}scenesContainer.appendChild(sceneCard);});}// 创建浮动文字效果function createFloatingText(element, text, customClass = "text-green-400") {const floatingText = document.createElement('div');floatingText.className = `absolute ${customClass} font-bold pointer-events-none`;floatingText.textContent = text;// 获取元素位置const rect = element.getBoundingClientRect();const bodyRect = document.body.getBoundingClientRect();// 设置初始位置floatingText.style.left = `${rect.left - bodyRect.left + rect.width/2}px`;floatingText.style.top = `${rect.top - bodyRect.top}px`;floatingText.style.transform = 'translate(-50%, 0)';floatingText.style.opacity = '1';floatingText.style.transition = 'all 0.8s ease-out';document.body.appendChild(floatingText);// 动画效果setTimeout(() => {floatingText.style.transform = 'translate(-50%, -30px)';floatingText.style.opacity = '0';}, 10);// 移除元素setTimeout(() => {document.body.removeChild(floatingText);}, 800);}// 显示物品使用提示function showItemUsedNotification(itemType) {usedItemName.textContent = itemType.name;gainedExpFromItem.textContent = itemType.expGain;hideAllNotifications();itemUsedNotification.classList.remove('hidden');setTimeout(() => {itemUsedNotification.classList.add('hidden');}, 2000);}// 显示属性物品使用提示function showAttributeItemUsedNotification(itemType) {attributeItemName.textContent = itemType.name;attributeBoostText.textContent = `${getDisplayNameForAttribute(itemType.attribute)}永久提升${itemType.value}点`;attributeBoostText.className = `font-bold attribute-boost ${getColorForAttribute(itemType.attribute)}`;hideAllNotifications();attributeItemUsedNotification.classList.remove('hidden');setTimeout(() => {attributeItemUsedNotification.classList.add('hidden');}, 2000);}// 显示装备解锁提示function showEquipmentUnlockedNotification() {hideAllNotifications();equipmentUnlockedNotification.classList.remove('hidden');setTimeout(() => {equipmentUnlockedNotification.classList.add('hidden');}, 3000);}// 显示物品掉落提示function showItemDroppedNotification(itemType, added) {droppedItemName.textContent = itemType.name;// 显示或隐藏背包已满消息if (added) {inventoryFullMessage.classList.add('hidden');} else {inventoryFullMessage.classList.remove('hidden');}hideAllNotifications();itemDroppedNotification.classList.remove('hidden');setTimeout(() => {itemDroppedNotification.classList.add('hidden');}, 3000);}// 显示物品等级不足提示function showItemLevelTooLowNotification() {hideAllNotifications();itemLevelTooLow.classList.remove('hidden');setTimeout(() => {itemLevelTooLow.classList.add('hidden');}, 2000);}// 显示背包解锁提示function showInventoryUnlockedNotification() {hideAllNotifications();inventoryUnlockedNotification.classList.remove('hidden');setTimeout(() => {inventoryUnlockedNotification.classList.add('hidden');}, 3000);}// 显示属性面板解锁提示function showStatsUnlockedNotification() {hideAllNotifications();statsUnlockedNotification.classList.remove('hidden');setTimeout(() => {statsUnlockedNotification.classList.add('hidden');}, 3000);}// 显示场景解锁提示function showSceneUnlockedNotification(scene) {unlockedSceneName.textContent = scene.name;hideAllNotifications();sceneUnlockedNotification.classList.remove('hidden');setTimeout(() => {sceneUnlockedNotification.classList.add('hidden');}, 3000);}// 显示场景切换提示function showSceneSwitchedNotification(scene) {switchedSceneName.textContent = scene.name;hideAllNotifications();sceneSwitchedNotification.classList.remove('hidden');setTimeout(() => {sceneSwitchedNotification.classList.add('hidden');}, 2000);}// 隐藏所有提示function hideAllNotifications() {levelUpNotification.classList.add('hidden');notEnoughExp.classList.add('hidden');resetNotification.classList.add('hidden');sceneUnlockedNotification.classList.add('hidden');sceneSwitchedNotification.classList.add('hidden');inventoryUnlockedNotification.classList.add('hidden');statsUnlockedNotification.classList.add('hidden');equipmentUnlockedNotification.classList.add('hidden');itemUsedNotification.classList.add('hidden');attributeItemUsedNotification.classList.add('hidden');equipmentEquippedNotification.classList.add('hidden');equipmentUnequippedNotification.classList.add('hidden');itemDroppedNotification.classList.add('hidden');itemLevelTooLow.classList.add('hidden');battleVictoryNotification.classList.add('hidden');battleDefeatNotification.classList.add('hidden');monsterEncounterNotification.classList.add('hidden');}// 升级函数function levelUp() {if (gameState.currentExp >= gameState.requiredExp) {// 记录升级前的格子数量const previousSlots = calculateUnlockedSlots(gameState.level);// 升级gameState.level += 1;gameState.currentExp -= gameState.requiredExp;// 计算下一级所需经验（每级增加50%）gameState.requiredExp = Math.floor(gameState.requiredExp * 1.5);// 每升5级提升经验获取速率if (gameState.level % 5 === 0) {gameState.expPerSecond += 1;gameState.expPerClick += 5;}// 检查是否解锁了新格子const newSlots = calculateUnlockedSlots(gameState.level);const slotUnlocked = newSlots > previousSlots;// 显示升级提示newLevelDisplay.textContent = gameState.level;slotUnlockedMessage.style.display = slotUnlocked ? 'block' : 'none';hideAllNotifications();levelUpNotification.classList.remove('hidden');// 更新UIupdateUI();// 3秒后隐藏提示setTimeout(() => {levelUpNotification.classList.add('hidden');}, 3000);} else {// 经验不足提示hideAllNotifications();notEnoughExp.classList.remove('hidden');setTimeout(() => {notEnoughExp.classList.add('hidden');}, 2000);}}// 快速升级函数（无视经验要求）function quickLevelUp() {// 记录升级前的格子数量const previousSlots = calculateUnlockedSlots(gameState.level);// 升级（无视经验要求）gameState.level += 1;// 计算下一级所需经验（每级增加50%）gameState.requiredExp = Math.floor(gameState.requiredExp * 1.5);// 每升5级提升经验获取速率if (gameState.level % 5 === 0) {gameState.expPerSecond += 1;gameState.expPerClick += 5;}// 检查是否解锁了新格子const newSlots = calculateUnlockedSlots(gameState.level);const slotUnlocked = newSlots > previousSlots;// 显示升级提示newLevelDisplay.textContent = gameState.level;slotUnlockedMessage.style.display = slotUnlocked ? 'block' : 'none';hideAllNotifications();levelUpNotification.classList.remove('hidden');// 更新UIupdateUI();// 3秒后隐藏提示setTimeout(() => {levelUpNotification.classList.add('hidden');}, 3000);}// 重置游戏状态function resetGame() {// 恢复初始状态gameState = { ...initialGameState };// 重新初始化背包inventory = initInventory();// 更新UIupdateUI();initInventorySlots();initEquipmentSlots();// 显示重置提示hideAllNotifications();resetNotification.classList.remove('hidden');setTimeout(() => {resetNotification.classList.add('hidden');}, 2000);}// 自动获取经验和检查物品掉落function autoGainExpAndCheckDrops() {// 如果正在战斗，不自动获取经验if (gameState.battleInProgress) {return;}// 自动获得经验gameState.currentExp += getCurrentExpRate();// 有概率掉落物品（每5秒检查一次）if (Math.random() < 0.2) { // 20%概率触发检查handleSceneDrop();}// 处理遇怪逻辑（15级以上场景）const currentScene = getCurrentScene();if (currentScene.hasMonsters && gameState.level >= 15) {gameState.nextEncounterTime--;// 时间到，遭遇野怪if (gameState.nextEncounterTime <= 0) {const monster = getRandomMonsterForScene(gameState.currentSceneId);if (monster) {showMonsterEncounterNotification(monster);// 重置计时器gameState.nextEncounterTime = 30;}}}updateUI();}// 预加载所有图片function preloadAllImages() {scenes.forEach(scene => {const img1 = new Image();img1.src = scene.image;const img2 = new Image();img2.src = scene.bgImage;});// 预加载怪物图片Object.values(monsterTypes).forEach(monster => {const img = new Image();img.src = monster.avatar;});}// 事件监听器gainExpBtn.addEventListener('click', () => {const currentScene = getCurrentScene();const expGained = Math.floor(gameState.expPerClick * currentScene.expMultiplier);gameState.currentExp += expGained;createFloatingText(gainExpBtn, `+${expGained}`);updateUI();});levelUpBtn.addEventListener('click', levelUp);resetBtn.addEventListener('click', resetGame);quickLevelUpBtn.addEventListener('click', quickLevelUp);forceEncounterBtn.addEventListener('click', () => {// 强制遇怪（调试用）const monster = getRandomMonsterForScene(gameState.currentSceneId);if (monster) {showMonsterEncounterNotification(monster);}});// 战斗攻击按钮事件attackBtn.addEventListener('click', () => {if (gameState.battleInProgress && gameState.battleData.playerTurn) {// 清除回合计时器if (gameState.battleData.turnInterval) {clearInterval(gameState.battleData.turnInterval);}playerAttack();}});// 背包相关事件inventoryBtn.addEventListener('click', () => {if (gameState.inventoryUnlocked) {inventoryModal.classList.remove('hidden');}});closeInventoryModal.addEventListener('click', () => {inventoryModal.classList.add('hidden');});// 属性面板相关事件statsBtn.addEventListener('click', () => {if (gameState.statsUnlocked) {statsModal.classList.remove('hidden');updateStatsPanel();}});closeStatsModal.addEventListener('click', () => {statsModal.classList.add('hidden');});// 装备面板相关事件equipmentBtn.addEventListener('click', () => {if (gameState.equipmentUnlocked) {equipmentModal.classList.remove('hidden');initEquipmentSlots();}});closeEquipmentModal.addEventListener('click', () => {equipmentModal.classList.add('hidden');});// 场景相关事件switchSceneBtn.addEventListener('click', () => {if (gameState.level >= 5) {sceneModal.classList.remove('hidden');}});closeSceneModal.addEventListener('click', () => {sceneModal.classList.add('hidden');});// 点击模态框外部关闭inventoryModal.addEventListener('click', (e) => {if (e.target === inventoryModal) {inventoryModal.classList.add('hidden');}});sceneModal.addEventListener('click', (e) => {if (e.target === sceneModal) {sceneModal.classList.add('hidden');}});statsModal.addEventListener('click', (e) => {if (e.target === statsModal) {statsModal.classList.add('hidden');}});equipmentModal.addEventListener('click', (e) => {if (e.target === equipmentModal) {equipmentModal.classList.add('hidden');}});// 初始化function init() {preloadAllImages();initInventorySlots();initEquipmentSlots();updateUI();// 每秒钟自动获得经验和检查掉落setInterval(autoGainExpAndCheckDrops, 1000);}// 启动游戏init();</script>
</body>
</html>