由豆包编程生成的挂机升级游戏
/ 加权计算：攻击(2.5) > 防御(2) > 暴击(1.5) > 暴防(1.5) > 命中(1) > 闪避(1)新建一个 a.html 文件，把下面的代码，拷贝到文件里，用 浏览器 打开就可以丸辣！全程由AI生成，不写一行代码，提示词巨长，但是数值调一下，还是可以玩的。调试按钮区域 - 包含重置等级和快速升级按钮。level * 5 // 等级基础加成。引入Tailwind CSS。引入Fon
·
一、视频地址
点击查看视频版
全程由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);
// 更新UI
document.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);
// 更新UI
document.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);
// 更新UI
updateUI();
}
}
// 游戏状态
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);
}
// 更新UI
function 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();
// 更新UI
updateUI();
}
// 获取属性的显示名称
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');
// 更新UI
updateUI();
// 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');
// 更新UI
updateUI();
// 3秒后隐藏提示
setTimeout(() => {
levelUpNotification.classList.add('hidden');
}, 3000);
}
// 重置游戏状态
function resetGame() {
// 恢复初始状态
gameState = { ...initialGameState };
// 重新初始化背包
inventory = initInventory();
// 更新UI
updateUI();
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>
欢迎大家加入成都城市开发者社区，“和我在成都的街头走一走”，让我们一起携手，汇聚IT技术潮流，共建社区文明生态！
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)