用AI生成的一个小说人生模拟器
技术：纯前端技术，只用到了html，css，j；
开始界面：
选择难度
游戏主界面
游戏结束界面
庆余年人生模拟器
欢迎来到《庆余年人生模拟器》！在这里，你将踏上一段传奇般的人生旅程，在庆国这片充满机遇与挑战的土地上书写属于你的故事。
游戏特色
- 🌟 沉浸式剧情体验
- 🎭 多重人生选择
- 🎨 精美古风界面
- 🎮 流畅游戏体验
游戏模式
1. 自我人生模拟
在这个模式中，你可以完全按照自己的想法来体验庆国生活。每个选择都将影响你的命运走向，创造独一无二的人生故事。
2. 原著剧情体验
根据小说《庆余年》改编，让你以不同的视角重温经典剧情，体验主角范闲的传奇人生。
难度选择
🍃 闲云野鹤 (简单)
- 适合初次游玩的玩家
- 较为轻松的游戏体验
- 重点体验剧情发展
⚔️ 庙堂之争 (中等)
- 需要更多策略性思考
- 较为平衡的游戏体验
- 挑战与机遇并存
👑 权谋天下 (困难)
- 考验玩家的决策能力
- 高风险高回报
- 真实的权谋体验
游戏属性
在游戏中，你需要平衡以下属性：
- ❤️ 生命值：你的健康状况
- 📚 智力：学识与谋略
- ✨ 魅力：人际关系
- 💰 财富：经济实力
游戏提示
- 注意观察生命值变化，当生命值过低时会收到警告
- 不同选择会影响多个属性，要综合考虑
- 选择符合你当前处境的策略很重要
- 留意事件描述中的细节，可能影响后续剧情
快捷操作
- 点击选项可做出选择
- 界面自动保存游戏进度
- 随时可以返回首页重新开始
结局系统
根据你的选择和属性变化，可能达成不同的结局：
- 🌟 完美结局
- ⭐ 普通结局
- 💫 遗憾结局
- ☠️ 失败结局
常见问题
Q: 如何开始新的游戏？
A: 在首页选择游戏模式，然后选择难度即可开始。
Q: 属性值如何提升？
A: 通过做出明智的选择，不同的选项会影响不同的属性值。
Q: 游戏进度会保存吗？
A: 游戏会自动保存当前进度。
注意事项
- 游戏内容纯属虚构，请勿模仿
- 建议使用最新版本浏览器以获得最佳体验
- 首次游玩建议选择简单难度
版本信息
当前版本：2.0.0 (增强版)
最后更新：2025.06
祝你在庆国的旅程愉快！
源码分享：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>庆余年人生模拟器 - 增强版</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- 装饰元素 -->
<div class="decoration decoration-1">❝</div>
<div class="decoration decoration-2">❞</div>
<div class="decoration decoration-3">☯</div>
<div class="decoration decoration-4">⚔</div>
<!-- 开始界面 -->
<div id="start-screen" class="screen active">
<div class="page-header">
<h1>庆余年人生模拟器</h1>
<p>在这风云变幻的庆国，书写属于你的传奇人生。每一次选择都将改变你的命运轨迹...</p>
</div>
<div class="btn-container">
<button id="self-sim-btn" class="btn floating">自我人生模拟</button>
<button id="novel-sim-btn" class="btn floating">原著剧情体验</button>
</div>
<div class="footer">
<p>选择你的道路，创造属于你的庆国传奇</p>
</div>
</div>
<!-- 难度选择界面 -->
<div id="difficulty-screen" class="screen">
<div class="page-header">
<h2>选择你的道路</h2>
<p>不同的道路将带来不同的挑战与机遇</p>
</div>
<div class="difficulty-options">
<button class="difficulty-btn pulse" data-difficulty="easy">闲云野鹤 (简单)</button>
<button class="difficulty-btn" data-difficulty="medium">庙堂之争 (中等)</button>
<button class="difficulty-btn" data-difficulty="hard">权谋天下 (困难)</button>
</div>
<button id="start-journey" class="btn">启程</button>
<button id="back-to-start" class="btn">返回</button>
</div>
<!-- 游戏主界面 -->
<div id="game-screen" class="screen">
<div class="page-header">
<h2 id="game-title">庆余年 · 人生模拟</h2>
<div class="progress-container">
人生阶段: <span id="current-stage">1</span>/<span id="total-stages">20</span>
</div>
</div>
<div class="status-container" id="status-bars"></div>
<div id="health-warning" class="health-warning" style="display: none;">
警告：生命值过低！请谨慎选择！
</div>
<div class="event-container">
<h3 class="event-title" id="event-title">澹州初年</h3>
<p class="event-description" id="event-description">你作为户部尚书范建的私生子，从小在澹州祖母家长大。虽然身份特殊，但祖母对你关爱有加，教你读书习武。今日是上元节，城中热闹非凡...</p>
<div class="choices-container" id="choices-container"></div>
</div>
</div>
<!-- 结局界面 -->
<div id="ending-screen" class="screen">
<div class="page-header">
<h2>人生终章</h2>
<p>你的传奇故事在此落下帷幕</p>
</div>
<div class="event-container">
<h3 class="event-title" id="ending-title">权倾朝野</h3>
<p class="event-description" id="ending-description">历经数十载沉浮，你最终成为庆国最有权势的人物。皇帝视你为股肱之臣，百姓视你为国之栋梁。你站在皇城之巅，俯瞰这你一手塑造的江山...</p>
</div>
<div class="quote-container">
<p class="quote" id="quote">人生如棋，落子无悔。真正的智慧不在于掌控全局，而在于面对变局时的从容与抉择。</p>
<p class="author">—— 范闲</p>
</div>
<button id="restart-game" class="btn">再续前缘</button>
<button id="back-to-start-from-end" class="btn">返回首页</button>
</div>
<!-- 失败结局界面 -->
<div id="failure-screen" class="screen">
<div class="page-header">
<h2>败者命运</h2>
<p>你的生命已到尽头...</p>
</div>
<div class="event-container">
<h3 class="event-title" id="failure-title">英年早逝</h3>
<p class="event-description" id="failure-description">在残酷的权力斗争中，你未能保全自己。一次次的错误选择耗尽了你的生命，最终在风华正茂之时黯然离世...</p>
</div>
<div class="quote-container">
<p class="quote" id="failure-quote">人生如逆旅，我亦是行人。命运无常，唯谨慎者得长久。</p>
<p class="author">—— 庆国智者</p>
</div>
<div class="btn-container">
<button id="restart-from-failure" class="btn">重头再来</button>
<button id="back-to-start-from-failure" class="btn">返回首页</button>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
/* 全局样式 - 古风主题 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'SimSun', '宋体', serif;
}
body {
background: #f5ecd7 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.1"><rect fill="none" stroke="%23a67c52" stroke-width="2" x="10" y="10" width="80" height="80" rx="10" ry="10"/></svg>');
color: #5a3921;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
position: relative;
overflow-x: hidden;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" opacity="0.03"><path d="M20,50 Q40,30 60,50 T100,50 Q120,30 140,50 T180,50" stroke="%238b5a2b" fill="none"/></svg>');
z-index: -1;
}
.container {
width: 100%;
max-width: 1200px;
height: 90vh;
background: #fff9e6;
border: 15px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23d4b483" stroke="%238b5a2b" stroke-width="5" x="0" y="0" width="100" height="100" rx="10" ry="10"/></svg>') 30 stretch;
box-shadow: 0 15px 40px rgba(90, 57, 33, 0.4);
border-radius: 12px;
padding: 40px;
position: relative;
overflow: hidden;
perspective: 1000px;
z-index: 1;
}
.page-header {
text-align: center;
margin-bottom: 35px;
position: relative;
}
.page-header h1 {
font-size: 3.2rem;
color: #8b5a2b;
text-shadow: 3px 3px 6px rgba(139, 90, 43, 0.2);
margin-bottom: 15px;
letter-spacing: 8px;
font-weight: bold;
}
.page-header p {
font-size: 1.3rem;
color: #7a5a3b;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.page-header::after {
content: "";
display: block;
width: 70%;
height: 3px;
background: linear-gradient(90deg, transparent, #8b5a2b, transparent);
margin: 20px auto;
border-radius: 50%;
}
.btn-container {
display: flex;
flex-direction: column;
gap: 25px;
margin: 45px 0;
}
.btn {
background: linear-gradient(145deg, #8b5a2b, #a67c52);
color: #f9f1e0;
border: none;
padding: 22px 35px;
font-size: 1.5rem;
border-radius: 10px;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
box-shadow: 0 8px 20px rgba(139, 90, 43, 0.5);
letter-spacing: 3px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.btn:hover {
background: linear-gradient(145deg, #a67c52, #c19a6b);
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(139, 90, 43, 0.7);
}
.btn:active {
transform: translateY(2px);
box-shadow: 0 4px 12px rgba(139, 90, 43, 0.5);
}
.btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: 0.6s;
}
.btn:hover::before {
left: 100%;
}
.screen {
display: none;
animation: fadeIn 0.8s ease;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform 0.8s ease;
overflow-y: auto;
padding: 20px;
}
.active {
display: block;
}
.novel-card {
background: #f9f1e0;
border: 3px solid #d4b483;
border-radius: 10px;
padding: 25px;
margin: 20px 0;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
box-shadow: 0 5px 15px rgba(139, 90, 43, 0.1);
}
.novel-card:hover {
transform: translateX(15px);
box-shadow: 0 8px 25px rgba(139, 90, 43, 0.2);
border-color: #8b5a2b;
}
.novel-card h3 {
color: #8b5a2b;
margin-bottom: 15px;
font-size: 1.8rem;
display: flex;
align-items: center;
gap: 10px;
}
.novel-card h3::before {
content: "❖";
font-size: 1.4rem;
}
.novel-card p {
color: #5a3921;
font-size: 1.2rem;
line-height: 1.7;
padding-left: 25px;
}
.difficulty-options {
display: flex;
justify-content: center;
gap: 30px;
margin: 35px 0;
flex-wrap: wrap;
}
.difficulty-btn {
background: #d4b483;
color: #5a3921;
border: 3px solid #8b5a2b;
padding: 18px 35px;
border-radius: 8px;
cursor: pointer;
transition: all 0.4s ease;
font-size: 1.3rem;
min-width: 180px;
box-shadow: 0 5px 15px rgba(139, 90, 43, 0.2);
}
.difficulty-btn:hover, .difficulty-btn.selected {
background: #8b5a2b;
color: #f9f1e0;
transform: translateY(-5px);
}
.event-container {
background: rgba(212, 180, 131, 0.15);
border: 3px double #8b5a2b;
border-radius: 12px;
padding: 35px;
margin: 30px 0 0 0;
min-height: 250px;
position: relative;
box-shadow: inset 0 0 20px rgba(139, 90, 43, 0.1);
}
.event-title {
color: #8b5a2b;
font-size: 2.2rem;
margin-bottom: 20px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
position: relative;
padding-bottom: 15px;
}
.event-title::after {
content: "";
position: absolute;
bottom: 0;
left: 30%;
width: 40%;
height: 2px;
background: linear-gradient(90deg, transparent, #8b5a2b, transparent);
}
.event-description {
font-size: 1.4rem;
line-height: 1.8;
margin-bottom: 35px;
text-align: justify;
padding: 0 20px;
color: #4a341e;
}
.choices-container {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 30px;
}
.choice-btn {
background: #f9f1e0;
color: #5a3921;
border: 2px solid #8b5a2b;
padding: 20px 25px;
border-radius: 8px;
cursor: pointer;
transition: all 0.4s ease;
font-size: 1.25rem;
text-align: left;
position: relative;
overflow: hidden;
box-shadow: 0 4px 10px rgba(139, 90, 43, 0.1);
}
.choice-btn:hover {
background: #d4b483;
transform: translateX(10px);
box-shadow: 0 8px 20px rgba(139, 90, 43, 0.2);
}
.choice-btn::before {
content: "➤";
position: absolute;
left: 10px;
opacity: 0.5;
}
.status-container {
display: flex;
justify-content: space-around;
margin: 30px 0;
flex-wrap: wrap;
gap: 15px;
}
.status-bar {
width: 180px;
margin: 10px;
background: rgba(212, 180, 131, 0.3);
padding: 15px;
border-radius: 10px;
border: 1px solid #d4b483;
}
.status-label {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 1.2rem;
color: #5a3921;
}
.status-fill {
height: 25px;
background: #d4b483;
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: inset 0 0 5px rgba(90, 57, 33, 0.3);
}
.status-value {
height: 100%;
background: linear-gradient(90deg, #8b5a2b, #a67c52);
width: 80%;
transition: width 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
position: relative;
}
.status-value::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(rgba(255,255,255,0.3), transparent);
}
/* 血量条特殊样式 */
#health-bar .status-value {
background: linear-gradient(90deg, #c62828, #ef5350);
}
.quote-container {
text-align: center;
padding: 40px;
margin: 45px 0;
background: rgba(212, 180, 131, 0.25);
border-radius: 12px;
border-left: 8px solid #8b5a2b;
position: relative;
overflow: hidden;
}
.quote-container::before {
content: "“";
position: absolute;
top: 20px;
left: 20px;
font-size: 8rem;
opacity: 0.1;
line-height: 1;
color: #8b5a2b;
}
.quote-container::after {
content: "”";
position: absolute;
bottom: -20px;
right: 20px;
font-size: 8rem;
opacity: 0.1;
line-height: 1;
color: #8b5a2b;
}
.quote {
font-size: 2rem;
font-style: italic;
color: #5a3921;
line-height: 1.8;
position: relative;
z-index: 1;
}
.author {
margin-top: 30px;
font-size: 1.5rem;
color: #8b5a2b;
font-weight: bold;
position: relative;
z-index: 1;
}
.progress-container {
text-align: center;
margin: 30px 0;
font-size: 1.3rem;
color: #8b5a2b;
}
.health-warning {
color: #c62828;
text-align: center;
font-size: 1.4rem;
margin: 15px 0;
font-weight: bold;
animation: pulseWarning 1.5s infinite;
}
.decoration {
position: absolute;
opacity: 0.08;
z-index: 0;
pointer-events: none;
}
.decoration-1 {
top: 20px;
right: 20px;
font-size: 10rem;
transform: rotate(15deg);
}
.decoration-2 {
bottom: 20px;
left: 20px;
font-size: 8rem;
transform: rotate(-10deg);
}
.decoration-3 {
top: 50%;
left: 10px;
font-size: 7rem;
transform: rotate(5deg);
}
.decoration-4 {
top: 40%;
right: 10px;
font-size: 6rem;
transform: rotate(-5deg);
}
.footer {
text-align: center;
margin-top: 40px;
color: #8b5a2b;
font-size: 1.2rem;
border-top: 1px dashed #d4b483;
padding-top: 20px;
}
/* 动画 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes pulseWarning {
0% { opacity: 1; }
50% { opacity: 0.6; }
100% { opacity: 1; }
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
@keyframes slideIn {
from {
transform: translateX(100%) rotateY(-20deg);
opacity: 0;
}
to {
transform: translateX(0) rotateY(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0) rotateY(0);
opacity: 1;
}
to {
transform: translateX(-100%) rotateY(20deg);
opacity: 0;
}
}
.floating {
animation: float 4s ease-in-out infinite;
}
.pulse {
animation: pulse 2s infinite;
}
.shake {
animation: shake 0.5s ease-in-out;
}
.slide-in {
animation: slideIn 0.8s ease forwards;
}
.slide-out {
animation: slideOut 0.8s ease forwards;
}
/* 翻页效果相关样式 */
.screen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform 0.8s ease;
overflow-y: auto;
padding: 20px;
}
.screen.slide-out {
transform: translateX(-100%) rotateY(20deg);
opacity: 0;
}
.screen.slide-in {
transform: translateX(0) rotateY(0);
opacity: 1;
}
/* 翻页按钮 */
.page-nav {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0 40px;
z-index: 10;
}
.page-nav-btn {
background: none;
border: none;
color: #8b5a2b;
font-size: 2rem;
cursor: pointer;
opacity: 0.6;
transition: all 0.3s ease;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.page-nav-btn:hover {
opacity: 1;
transform: scale(1.2);
}
.page-nav-btn:disabled {
opacity: 0.2;
cursor: not-allowed;
transform: scale(1);
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
padding: 20px;
}
.page-header h1 {
font-size: 2.5rem;
}
.btn {
padding: 18px 25px;
font-size: 1.3rem;
}
.difficulty-options {
gap: 15px;
}
.difficulty-btn {
padding: 15px 20px;
min-width: 140px;
font-size: 1.1rem;
}
.event-container {
padding: 25px 15px;
}
.event-title {
font-size: 1.8rem;
}
.event-description {
font-size: 1.2rem;
}
.choice-btn {
padding: 16px 20px;
font-size: 1.1rem;
}
.quote {
font-size: 1.6rem;
}
}
/* 修改容器样式 */
.container {
width: 100%;
max-width: 1200px;
height: 90vh;
background: #fff9e6;
border: 15px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23d4b483" stroke="%238b5a2b" stroke-width="5" x="0" y="0" width="100" height="100" rx="10" ry="10"/></svg>') 30 stretch;
box-shadow: 0 15px 40px rgba(90, 57, 33, 0.4);
border-radius: 12px;
padding: 40px;
position: relative;
overflow: hidden;
perspective: 1000px;
z-index: 1;
}
/* 修改屏幕切换样式 */
.screen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform 0.8s ease;
overflow-y: auto;
padding: 20px;
}
.screen.slide-out {
transform: translateX(-100%) rotateY(20deg);
opacity: 0;
}
.screen.slide-in {
transform: translateX(0) rotateY(0);
opacity: 1;
}
/* 添加滚动条样式 */
.screen::-webkit-scrollbar {
width: 8px;
}
.screen::-webkit-scrollbar-track {
background: rgba(139, 90, 43, 0.1);
border-radius: 4px;
}
.screen::-webkit-scrollbar-thumb {
background: rgba(139, 90, 43, 0.3);
border-radius: 4px;
}
.screen::-webkit-scrollbar-thumb:hover {
background: rgba(139, 90, 43, 0.5);
}
// 游戏状态管理
var gameState = {
currentScreen: 'start',
currentNovel: null,
difficulty: 'medium',
currentEventIndex: 0,
attributes: {
health: 100, // 新增血量属性
wealth: 50,
reputation: 30,
power: 40
},
maxAttributes: {
health: 100,
wealth: 100,
reputation: 100,
power: 100
}
};
// 庆余年小说数据 - 20个阶段
var qingYuNian = {
id: 'qingyunian',
title: '庆余年',
description: '一个身世神秘的少年，在风云变幻的庆国朝堂与江湖中，书写属于自己的传奇人生。',
events: [
{
title: '澹州初年',
description: '你作为户部尚书范建的私生子，从小在澹州祖母家长大。虽然身份特殊，但祖母对你关爱有加，教你读书习武。今日是上元节，城中热闹非凡。',
choices: [
{ text: '随五竹叔习武练功', effects: { health: 5, power: 10 } },
{ text: '与若若妹妹读书写字', effects: { reputation: 8 } },
{ text: '溜出府外逛灯会', effects: { health: -15, reputation: -2 } },
{ text: '研究母亲留下的神秘箱子', effects: { health: -10, power: 15 } }
]
},
{
title: '京都风云',
description: '十六岁时，你被接回京都范府。初入京都，便感受到各方势力的暗流涌动。在范府门口，你遇到了二姨娘和她的儿子范思辙。',
choices: [
{ text: '谦逊有礼，以退为进', effects: { reputation: 10 } },
{ text: '锋芒毕露，震慑众人', effects: { health: -5, power: 10, reputation: -5 } },
{ text: '隐忍不发，静观其变', effects: { reputation: 5 } },
{ text: '直接质问二姨娘当年之事', effects: { health: -20, reputation: -10, power: 5 } }
]
},
{
title: '靖王府诗会',
description: '靖王府举办诗会，京都才子佳人齐聚。二皇子邀你参加，这既是展示才华的机会，也可能陷入政治漩涡。',
choices: [
{ text: '背诵唐诗宋词惊艳全场', effects: { reputation: 15 } },
{ text: '藏拙守愚，低调行事', effects: { reputation: 3 } },
{ text: '借诗表达政治立场', effects: { health: -10, power: 10, reputation: 8 } },
{ text: '提前离场避开纷争', effects: { health: -5, reputation: -5 } }
]
},
{
title: '牛栏街刺杀',
description: '在牛栏街遭遇北齐刺客袭击，滕梓荆为保护你而身受重伤。面对刺客首领，你必须做出抉择。',
choices: [
{ text: '用巴雷特击杀刺客', effects: { health: -5, power: 20, reputation: 5 } },
{ text: '以武功周旋等待救援', effects: { health: -25, reputation: 10 } },
{ text: '智取，设陷阱擒敌', effects: { health: -15, power: 10, reputation: 15 } },
{ text: '谈判，了解幕后主使', effects: { health: -10, reputation: 8, power: 5 } }
]
},
{
title: '监察院提司',
description: '陈萍萍任命你为监察院提司，掌管一处。面对这个权力与危险并存的位置，你决定如何施政？',
choices: [
{ text: '铁腕整顿，清除异己', effects: { health: -15, power: 15, reputation: -10 } },
{ text: '怀柔政策，收服人心', effects: { reputation: 15, power: 5 } },
{ text: '维持现状，静观其变', effects: { health: -5, reputation: 5 } },
{ text: '暗中调查陈萍萍的真实意图', effects: { health: -20, power: 10 } }
]
},
{
title: '北齐使团',
description: '北齐使团来访，庄墨韩当众质疑你的诗文。长公主暗中设局，欲借机打击你的声望。',
choices: [
{ text: '背诵《登高》震撼全场', effects: { reputation: 20 } },
{ text: '揭露庄墨韩剽窃真相', effects: { health: -10, reputation: 15, power: 10 } },
{ text: '隐忍不言，静待时机', effects: { health: -5, reputation: -5 } },
{ text: '直接挑战长公主', effects: { health: -30, power: 15, reputation: -10 } }
]
},
{
title: '林婉儿婚事',
description: '庆帝赐婚你与林婉儿。然而林相和长公主暗中阻挠，你该如何应对这场政治婚姻？',
choices: [
{ text: '接受赐婚，智取相府', effects: { health: -10, reputation: 15, power: 10 } },
{ text: '拒婚表明立场', effects: { health: -20, reputation: -20, power: 5 } },
{ text: '拖延时间寻找转机', effects: { health: -5, reputation: 5 } },
{ text: '直接带婉儿私奔', effects: { health: -40, reputation: -15 } }
]
},
{
title: '儋州税银案',
description: '奉命调查儋州税银失窃案，发现背后涉及太子势力。面对太子的拉拢与威胁，你如何抉择？',
choices: [
{ text: '秉公办理，上报庆帝', effects: { health: -15, reputation: 20, power: 5 } },
{ text: '与太子交易换取利益', effects: { health: 10, wealth: 15, reputation: -10 } },
{ text: '假意合作暗中收集证据', effects: { health: -20, power: 15 } },
{ text: '销毁证据明哲保身', effects: { health: -10, reputation: -15 } }
]
},
{
title: '悬空寺刺杀',
description: '悬空寺祭天仪式上，刺客突袭庆帝。你距离最近，面临救驾还是自保的抉择。',
choices: [
{ text: '舍身救驾', effects: { health: -35, reputation: 25 } },
{ text: '保护太后优先', effects: { health: -15, reputation: 15 } },
{ text: '趁乱击杀政敌', effects: { health: -25, power: 20, reputation: -15 } },
{ text: '观察局势再行动', effects: { health: -10, reputation: 5 } }
]
},
{
title: '接手内库',
description: '庆帝命你接手长公主掌管的内库。面对庞大的商业帝国和各方势力的觊觎，你如何开局？',
choices: [
{ text: '大刀阔斧改革', effects: { health: -10, wealth: 20, reputation: 5 } },
{ text: '维持现状稳定过渡', effects: { wealth: 10 } },
{ text: '安插亲信掌控关键位置', effects: { health: -15, power: 15, wealth: 10 } },
{ text: '利用内库资源培植势力', effects: { health: -20, power: 20, wealth: 5 } }
]
},
{
title: '出使北齐',
description: '作为使团正使出使北齐。战豆豆设下重重考验，沈重暗中监视，肖恩被秘密关押。',
choices: [
{ text: '与战豆豆周旋谈判', effects: { health: -5, reputation: 15 } },
{ text: '设计救出肖恩', effects: { health: -30, power: 20 } },
{ text: '与沈重正面交锋', effects: { health: -25, power: 15 } },
{ text: '联合上杉虎颠覆朝局', effects: { health: -40, power: 25, reputation: -10 } }
]
},
{
title: '神庙之谜',
description: '肖恩临终前透露神庙秘密，这与你身世息息相关。你决定如何探索这个惊天秘密？',
choices: [
{ text: '亲自前往极北之地', effects: { health: -50, power: 25 } },
{ text: '派五竹叔先行探查', effects: { power: 15 } },
{ text: '利用监察院资源研究', effects: { health: -10, reputation: 10, power: 10 } },
{ text: '暂时搁置，专注朝局', effects: { reputation: 5 } }
]
},
{
title: '春闱舞弊',
description: '主持春闱考试，发现太子门生大规模舞弊。庆帝暗示你权衡利弊后再做决定。',
choices: [
{ text: '严查到底，法办所有涉案者', effects: { health: -20, reputation: 20, power: -10 } },
{ text: '只惩处次要人物', effects: { reputation: 5, power: 5 } },
{ text: '与太子谈判换取利益', effects: { health: 5, wealth: 15, reputation: -5 } },
{ text: '假意查办实则收集太子罪证', effects: { health: -15, power: 15 } }
]
},
{
title: '陈萍萍之死',
description: '陈萍萍因刺杀庆帝被捕。在最后时刻，他向你揭示叶轻眉之死的真相，你该如何行动？',
choices: [
{ text: '劫法场救恩师', effects: { health: -60, reputation: -20 } },
{ text: '遵从陈萍萍遗愿按兵不动', effects: { health: -10, reputation: -10 } },
{ text: '联合范建暗中营救', effects: { health: -40, power: 15 } },
{ text: '借机铲除敌对势力', effects: { health: -25, power: 20, reputation: -15 } }
]
},
{
title: '大东山之战',
description: '大东山上，四大宗师决战庆帝。你手握巴雷特，能改变战局却也会暴露底牌。',
choices: [
{ text: '助庆帝击杀四顾剑', effects: { health: -25, power: 25, reputation: 10 } },
{ text: '助苦荷对抗庆帝', effects: { health: -40, reputation: 15, power: -10 } },
{ text: '坐山观虎斗', effects: { power: 10 } },
{ text: '撤离战场保存实力', effects: { health: -10, reputation: -10 } }
]
},
{
title: '范府危机',
description: '长公主联合秦家围攻范府，祖母和若若危在旦夕。你远在外地，该如何应对？',
choices: [
{ text: '急令黑骑驰援', effects: { health: -10, power: -10, reputation: 15 } },
{ text: '亲自率军回救', effects: { health: -35, reputation: 20 } },
{ text: '围魏救赵攻秦家', effects: { health: -20, power: 15 } },
{ text: '谈判，牺牲利益换取安全', effects: { health: -5, wealth: -20, reputation: 5 } }
]
},
{
title: '庆帝对决',
description: '最终面对庆帝，他既是你的生父也是杀母仇人。五竹叔重伤，你将如何了结这段恩怨？',
choices: [
{ text: '用巴雷特决一死战', effects: { health: -70, power: 30 } },
{ text: '与庆帝谈判达成协议', effects: { health: -20, reputation: 20, power: 10 } },
{ text: '放弃复仇保全身家', effects: { health: -10, reputation: -15 } },
{ text: '设计借他人之手除帝', effects: { health: -40, power: 25, reputation: 5 } }
]
},
{
title: '新皇登基',
description: '庆帝死后，三皇子登基。你作为托孤重臣，手握大权，将如何辅佐新君？',
choices: [
{ text: '还政于君，归隐田园', effects: { health: 20, reputation: 25, power: -20 } },
{ text: '摄政掌权，改革朝纲', effects: { health: -20, power: 30, reputation: 10 } },
{ text: '培养新君，逐步放权', effects: { reputation: 20, power: 10 } },
{ text: '废帝自立', effects: { health: -30, power: 35, reputation: -20 } }
]
},
{
title: '天下归一',
description: '庆国一统天下，你站在权力巅峰。面对这太平盛世，你最后的心愿是什么？',
choices: [
{ text: '建立学院传承文明', effects: { health: 10, reputation: 30 } },
{ text: '改革制度造福百姓', effects: { health: -10, reputation: 25, power: 10 } },
{ text: '探索海外开疆拓土', effects: { health: -20, power: 20 } },
{ text: '寻找神庙追求永生', effects: { health: -50, power: 30 } }
]
}
],
endings: [
{
title: '逍遥江湖',
description: '放下权柄，与婉儿携手归隐。泛舟五湖，笑傲江湖，成为民间传颂的神仙眷侣。',
quote: '真正的自由不是权倾天下，而是有选择放下一切的勇气。'
},
{
title: '权倾朝野',
description: '你成为庆国实际掌控者，推行新政，开创盛世。史书称你为"无冕之皇"，功过留与后人评说。',
quote: '权力如酒，浅尝可壮胆，痛饮必伤身。真正的强者懂得在醉与醒之间找到平衡。'
},
{
title: '一代宗师',
description: '建立天下第一书院，门下弟子遍及朝野。你的思想成为后世圭臬，影响千年文明进程。',
quote: '刀剑只能征服土地，思想才能征服时间。'
}
],
failures: [
{
title: '英年早逝',
description: '在残酷的权力斗争中，你未能保全自己。一次次的错误选择耗尽了你的生命，最终在风华正茂之时黯然离世。',
quote: '人生如逆旅，我亦是行人。命运无常，唯谨慎者得长久。'
},
{
title: '功败垂成',
description: '你离成功仅一步之遥，却因一次致命失误葬送所有。庆国的史书上，你成了失败的注脚。',
quote: '行百里者半九十，最后的坚持往往决定成败。'
},
{
title: '壮志未酬',
description: '你有凌云之志，却无保全之智。在实现抱负前，你的生命之火已然熄灭，空留遗憾。',
quote: '志大而智小，虽勇必伤。谋定而后动，方为智者。'
},
{
title: '身陷囹圄',
description: '一步错，步步错。你最终沦为阶下囚，在暗无天日的牢狱中结束了自己的一生。',
quote: '棋差一着，满盘皆输。人生如棋，需步步为营。'
}
]
};
// 初始化游戏
function initGame() {
// 设置屏幕切换
document.getElementById('self-sim-btn').addEventListener('click', function() {
gameState.currentNovel = qingYuNian;
showScreen('difficulty');
});
document.getElementById('novel-sim-btn').addEventListener('click', function() {
gameState.currentNovel = qingYuNian;
gameState.simulationMode = 'novel';
gameState.currentEventIndex = 0;
showScreen('game');
});
document.getElementById('back-to-start').addEventListener('click', function() {
showScreen('start');
});
document.getElementById('back-to-start-from-end').addEventListener('click', function() {
showScreen('start');
});
document.getElementById('restart-game').addEventListener('click', restartGame);
document.getElementById('start-journey').addEventListener('click', startGame);
document.getElementById('restart-from-failure').addEventListener('click', restartGame);
document.getElementById('back-to-start-from-failure').addEventListener('click', function() {
showScreen('start');
});
// 初始化难度选择按钮
var buttons = document.querySelectorAll('.difficulty-btn');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
// 移除之前的选择
for (var j = 0; j < buttons.length; j++) {
buttons[j].classList.remove('selected');
}
// 设置当前选择
this.classList.add('selected');
gameState.difficulty = this.dataset.difficulty;
});
}
// 添加按钮效果
addButtonEffects();
// 初始化状态
renderStatusBars();
// 设置总阶段数
document.getElementById('total-stages').textContent = qingYuNian.events.length;
}
// 按钮点击动画
function addButtonEffects() {
const buttons = document.querySelectorAll('.btn, .choice-btn');
buttons.forEach(button => {
button.addEventListener('click', function() {
this.classList.add('pulse');
setTimeout(() => {
this.classList.remove('pulse');
}, 400);
});
});
}
// 添加页面切换效果
function showScreen(screenName) {
const currentScreen = document.querySelector('.screen.active');
const nextScreen = document.getElementById(screenName + '-screen');
if (currentScreen) {
// 当前页面淡出
currentScreen.classList.add('slide-out');
setTimeout(() => {
currentScreen.classList.remove('active', 'slide-out');
}, 800);
}
// 新页面淡入
setTimeout(() => {
nextScreen.classList.add('active', 'slide-in');
setTimeout(() => {
nextScreen.classList.remove('slide-in');
}, 800);
}, currentScreen ? 400 : 0);
gameState.currentScreen = screenName;
// 特殊屏幕初始化
if (screenName === 'game') {
renderGameEvent();
}
}
// 开始游戏
function startGame() {
// 根据难度调整初始属性
switch(gameState.difficulty) {
case 'easy':
gameState.attributes = { health: 120, wealth: 70, reputation: 60, power: 50 };
break;
case 'hard':
gameState.attributes = { health: 80, wealth: 40, reputation: 30, power: 30 };
break;
default: // medium
gameState.attributes = { health: 100, wealth: 50, reputation: 40, power: 40 };
}
gameState.currentEventIndex = 0;
showScreen('game');
renderStatusBars();
}
// 渲染状态条
function renderStatusBars() {
var container = document.getElementById('status-bars');
container.innerHTML = '';
var attributes = ['health', 'wealth', 'reputation', 'power'];
var labels = ['生命', '财富', '声望', '权谋'];
var icons = ['❤️', '💰', '🏆', '⚔️'];
for (var i = 0; i < attributes.length; i++) {
var attr = attributes[i];
var bar = document.createElement('div');
bar.className = 'status-bar';
bar.innerHTML = `
<div class="status-label">
<span>${icons[i]} ${labels[i]}</span>
<span>${gameState.attributes[attr]}/${gameState.maxAttributes[attr]}</span>
</div>
<div class="status-fill">
<div class="status-value" id="${attr}-bar" style="width: ${(gameState.attributes[attr] / gameState.maxAttributes[attr]) * 100}%"></div>
</div>
`;
container.appendChild(bar);
}
// 显示/隐藏血量警告
var warning = document.getElementById('health-warning');
if (gameState.attributes.health < 30) {
warning.style.display = 'block';
warning.classList.add('shake');
} else {
warning.style.display = 'none';
warning.classList.remove('shake');
}
}
// 渲染游戏事件
function renderGameEvent() {
var novel = gameState.currentNovel;
var event = novel.events[gameState.currentEventIndex];
document.getElementById('game-title').textContent = novel.title;
document.getElementById('event-title').textContent = event.title;
document.getElementById('event-description').textContent = event.description;
document.getElementById('current-stage').textContent = gameState.currentEventIndex + 1;
var choicesContainer = document.getElementById('choices-container');
choicesContainer.innerHTML = '';
// 根据难度决定显示选项数量
var choiceCount = 2; // 简单默认2个
if (gameState.difficulty === 'medium') choiceCount = 3;
if (gameState.difficulty === 'hard') choiceCount = 4;
// 显示相应数量的选项
for (var i = 0; i < Math.min(choiceCount, event.choices.length); i++) {
var choice = event.choices[i];
var button = document.createElement('button');
button.className = 'choice-btn';
// 显示血量变化提示
// var healthEffect = choice.effects.health || 0;
// // var healthIndicator = '';
// // if (healthEffect > 0) {
// // healthIndicator = `<span style="color:#2e7d32; margin-left:10px;">+${healthEffect}❤️</span>`;
// // } else if (healthEffect < 0) {
// // healthIndicator = `<span style="color:#c62828; margin-left:10px;">${healthEffect}❤️</span>`;
// // }
button.innerHTML = choice.text ;
button.addEventListener('click', function(choice) {
return function() {
applyChoiceEffects(choice.effects);
checkHealthStatus();
};
}(choice));
choicesContainer.appendChild(button);
}
// 添加转场动画
const eventContainer = document.querySelector('.event-container');
eventContainer.style.opacity = '0';
eventContainer.style.transform = 'translateY(20px)';
setTimeout(() => {
eventContainer.style.transition = 'all 0.6s ease-out';
eventContainer.style.opacity = '1';
eventContainer.style.transform = 'translateY(0)';
}, 100);
}
// 应用选择效果
function applyChoiceEffects(effects) {
for (var attr in effects) {
if (effects.hasOwnProperty(attr)) {
gameState.attributes[attr] += effects[attr];
// 确保属性在0-最大值之间
if (gameState.attributes[attr] < 0) gameState.attributes[attr] = 0;
if (gameState.attributes[attr] > gameState.maxAttributes[attr]) {
gameState.attributes[attr] = gameState.maxAttributes[attr];
}
}
}
// 添加转场动画
const container = document.querySelector('.event-container');
container.classList.add('slide-out');
setTimeout(() => {
renderStatusBars();
container.classList.remove('slide-out');
container.classList.add('slide-in');
setTimeout(() => {
container.classList.remove('slide-in');
}, 800);
}, 800);
}
// 检查生命状态
function checkHealthStatus() {
if (gameState.attributes.health <= 0) {
showFailureEnding();
} else {
setTimeout(nextEvent, 800); // 延迟进入下一个事件
}
}
// 下一个事件
function nextEvent() {
gameState.currentEventIndex++;
if (gameState.currentEventIndex < gameState.currentNovel.events.length) {
renderGameEvent();
} else {
showEnding();
}
}
// 显示结局
function showEnding() {
var novel = gameState.currentNovel;
var endingIndex = Math.floor(Math.random() * novel.endings.length); // 随机选择一个结局
var ending = novel.endings[endingIndex];
document.getElementById('ending-title').textContent = ending.title;
document.getElementById('ending-description').textContent = ending.description;
document.getElementById('quote').textContent = ending.quote;
showScreen('ending');
}
// 显示失败结局
function showFailureEnding() {
var novel = gameState.currentNovel;
var failureIndex = Math.floor(Math.random() * novel.failures.length);
var failure = novel.failures[failureIndex];
document.getElementById('failure-title').textContent = failure.title;
document.getElementById('failure-description').textContent = failure.description;
document.getElementById('failure-quote').textContent = failure.quote;
showScreen('failure');
}
// 重启游戏
function restartGame() {
showScreen('start');
}
// 页面加载完成后初始化游戏
window.addEventListener('DOMContentLoaded', function() {
initGame();
});
