海贼纪元：自由意志模拟器 V3.1 终极完整版
by RocketCoder45205 lines10.7 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>海贼纪元：自由意志模拟器 V3.1 终极完整版</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #e2e8f0;
}
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: #1e293b;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: #3b82f6;
border-radius: 3px;
}
.log-entry {
border-left: 3px solid #3b82f6;
padding-left: 12px;
margin-bottom: 12px;
}
.world-news { border-left-color: #f59e0b; }
.battle-log { border-left-color: #ef4444; }
.achievement { border-left-color: #10b981; }
.personal { border-left-color: #8b5cf6; }
.chat-message {
border-radius: 12px;
padding: 10px 14px;
margin-bottom: 10px;
max-width: 80%;
}
.player-message {
background-color: #3b82f6;
margin-left: auto;
}
.ai-message {
background-color: #475569;
margin-right: auto;
}
.choice-btn {
transition: all 0.2s ease;
}
.choice-btn:hover {
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.tab-active {
background-color: #3b82f6;
color: white;
}
.battle-panel {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.health-bar {
transition: width 0.5s ease;
}
.item-card {
transition: all 0.2s ease;
}
.item-card:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body class="min-h-screen p-4 md:p-6">
<div class="max-w-7xl mx-auto">
<!-- 标题栏 -->
<header class="text-center mb-6">
<h1 class="text-3xl md:text-4xl font-bold text-blue-400 mb-2">海贼纪元：自由意志模拟器</h1>
<p class="text-gray-400">V3.1 终极完整版 | 纯手动抉择 | 万界商城 | AI智能助手</p>
</header>
<!-- 角色创建界面 -->
<div id="character-creation" class="bg-slate-800 rounded-xl p-6 shadow-2xl max-w-3xl mx-auto">
<h2 class="text-2xl font-bold text-blue-300 mb-6 text-center">创建你的海贼生涯</h2>
<div class="grid md:grid-cols-2 gap-5 mb-5">
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">姓名</label>
<input type="text" id="player-name" value="卓锐" class="w-full px-4 py-2 bg-slate-700 rounded-lg border border-slate-600 focus:border-blue-500 focus:outline-none">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">性别</label>
<select id="player-gender" class="w-full px-4 py-2 bg-slate-700 rounded-lg border border-slate-600 focus:border-blue-500 focus:outline-none">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
</div>
<div class="grid md:grid-cols-2 gap-5 mb-5">
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">潜力值 (1-100，默认60)</label>
<input type="number" id="player-talent" value="60" min="1" max="100" class="w-full px-4 py-2 bg-slate-700 rounded-lg border border-slate-600 focus:border-blue-500 focus:outline-none">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">穿越时间锚点</label>
<select id="time-anchor" class="w-full px-4 py-2 bg-slate-700 rounded-lg border border-slate-600 focus:border-blue-500 focus:outline-none">
<option value="1521">大海贼时代开幕（海圆历1521年）</option>
<option value="1522">顶上战争前夕（海圆历1522年）</option>
<option value="1524">两年修炼期间（海圆历1524年）</option>
<option value="1541">和之国事件后（海圆历1541年）</option>
</select>
</div>
</div>
<div class="mb-5">
<label class="block text-sm font-medium text-gray-300 mb-2">出身地点</label>
<select id="birthplace" class="w-full px-4 py-2 bg-slate-700 rounded-lg border border-slate-600 focus:border-blue-500 focus:outline-none">
<option value="东海">东海（最弱之海，起步安全）</option>
<option value="西海">西海（强者辈出，历史悠久）</option>
<option value="南海">南海（民风彪悍，海贼猖獗）</option>
<option value="北海">北海（军事强国林立）</option>
<option value="伟大航路">伟大航路入口（危险与机遇并存）</option>
</select>
</div>
<div class="mb-5">
<label class="block text-sm font-medium text-gray-300 mb-2">初始身份背景</label>
<select id="background" class="w-full px-4 py-2 bg-slate-700 rounded-lg border border-slate-600 focus:border-blue-500 focus:outline-none">
<option value="平民子弟">平民子弟（意志力+5，韧性强）</option>
<option value="海军子弟">海军子弟（六式剃入门，海军人脉+20）</option>
<option value="商贾之后">商贾之后（初始资金+100万贝利）</option>
<option value="海贼遗孤">海贼遗孤（初始战斗属性+3）</option>
<option value="穿越者">穿越者（知晓剧情，精神+10）</option>
</select>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-300 mb-2">人生终极目标</label>
<select id="goal" class="w-full px-4 py-2 bg-slate-700 rounded-lg border border-slate-600 focus:border-blue-500 focus:outline-none">
<option value="虚空王座">虚空王座的主人（终结天龙人统治）</option>
<option value="海贼王">海贼王（找到ONE PIECE，成为最自由的人）</option>
<option value="海军元帅">海军元帅（重塑海军正义，执掌百万雄师）</option>
<option value="革命军领袖">革命军领袖（推翻世界政府，解放全人类）</option>
<option value="世界第一大剑豪">世界第一的大剑豪（让我的名号响彻天堂）</option>
</select>
</div>
<div class="text-center">
<button id="start-game" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-bold text-lg transition-colors shadow-lg">
开启你的海贼传奇
</button>
</div>
</div>
<!-- 游戏主界面 -->
<div id="game-main" class="hidden">
<!-- 顶部导航标签 -->
<div class="flex flex-wrap gap-2 mb-4 bg-slate-800 rounded-lg p-2">
<button class="tab-btn tab-active px-4 py-2 rounded-lg font-medium" data-tab="main">主界面</button>
<button class="tab-btn px-4 py-2 rounded-lg font-medium" data-tab="companions">伙伴</button>
<button class="tab-btn px-4 py-2 rounded-lg font-medium" data-tab="factions">势力</button>
<button class="tab-btn px-4 py-2 rounded-lg font-medium" data-tab="shop">万界商城</button>
<button class="tab-btn px-4 py-2 rounded-lg font-medium" data-tab="artifacts">历史正文</button>
<button class="tab-btn px-4 py-2 rounded-lg font-medium" data-tab="inventory">背包</button>
</div>
<!-- 主界面标签页 -->
<div id="tab-main" class="tab-content">
<div class="grid lg:grid-cols-3 gap-6">
<!-- 左侧状态面板 -->
<div class="lg:col-span-1 space-y-5">
<!-- 基本信息 -->
<div class="bg-slate-800 rounded-xl p-5 shadow-lg">
<h3 class="text-xl font-bold text-blue-300 mb-4">基本信息</h3>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-gray-400">姓名：</span>
<span id="info-name" class="font-medium"></span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">年龄：</span>
<span id="info-age" class="font-medium"></span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">潜力：</span>
<span id="info-talent" class="font-medium"></span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">海圆历：</span>
<span id="info-date" class="font-medium"></span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">身份：</span>
<span id="info-identity" class="font-medium"></span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">军衔/悬赏：</span>
<span id="info-rank" class="font-medium"></span>
Game Source: 海贼纪元：自由意志模拟器 V3.1 终极完整版
Creator: RocketCoder45
Libraries: none
Complexity: complex (205 lines, 10.7 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: v3-1-rocketcoder45" to link back to the original. Then publish at arcadelab.ai/publish.