<!DOCTYPE
html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>向火独行 - COC文字冒险</title>
<style>
@import url(../css/tongyong/root.css);
@import url(../css/tongyong/quanju.css);
@import url("../css/tongyong/body.css");
.container {
max-width: 800px;
margin: 0 auto;
border: 1px solid var(--accent-color);
padding: 20px;
box-shadow: 0 0 15px rgba(139, 0, 0, 0.3);
background-color: rgba(10, 10, 10, 0.9);
position: relative;
min-height: 80vh;
}
header {
text-align: center;
margin-bottom: 20px;
border-bottom: 1px solid var(--accent-color);
padding-bottom: 15px;
}
h1 {
color: var(--highlight-color);
font-size: 2.2rem;
letter-spacing: 2px;
text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}
.game-area {
display: flex;
flex-direction: column;
gap: 20px;
}
.stats-panel {
display: flex;
justify-content: space-between;
background-color: rgba(20, 20, 20, 0.8);
padding: 10px;
border: 1px solid var(--accent-color);
font-size: 0.9rem;
}
.story-text {
background-color: rgba(15, 15, 15, 0.8);
padding: 20px;
border: 1px solid var(--accent-color);
min-height: 250px;
max-height: 400px;
overflow-y: auto;
line-height: 1.8;
}
.choices-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.choice-btn {
background-color: rgba(30, 30, 30, 0.8);
color: var(--text-color);
border: 1px solid var(--accent-color);
padding: 12px;
text-align: left;
cursor: pointer;
transition: all 0.3s;
}
.choice-btn:hover {
background-color: rgba(50, 50, 50, 0.8);
border-color: var(--highlight-color);
color: var(--highlight-color);
}
.controls {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
button {
background-color: var(--accent-color);
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #a00;
}
.save-load-container {
display: flex;
gap: 10px;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 100;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: var(--dark-color);
border: 2px solid var(--accent-color);
padding: 20px;
width: 80%;
max-width: 500px;
}
.save-slots {
display: flex;
flex-direction: column;
gap: 10px;
margin: 15px 0;
}
.save-slot {
background-color: rgba(30, 30, 30, 0.8);
padding: 10px;
border: 1px solid var(--accent-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.save-slot:hover {
border-color: var(--highlight-color);
}
.save-info {
flex-grow: 1;
cursor: pointer;
}
.delete-btn {
background-color: var(--danger-color);
padding: 5px 10px;
font-size: 0.8rem;
}
.delete-btn:hover {
background-color: #e53e3e;
}
.fade-in {
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.typing-effect {
overflow: hidden;
border-right: 2px solid var(--highlight-color);
white-space: nowrap;
margin: 0 auto;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: var(--highlight-color) }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>向火独行</h1>
<p>克苏鲁的呼唤文字冒险游戏</p>
</header>
<div class="game-area">
<div class="stats-panel">
<div>理智: <span id="sanity-value">80</span>/100</div>
<div>生命: <span id="health-value">100</span>/100</div>
<div>时间: <span id="time-value">第1天 - 早晨</span></div>
<div>地点: <span id="location-value">阿卡姆</span></div>
</div>
<div class="story-text" id="story-text">
<!-- 故事文本将通过JavaScript动态加载 -->
</div>
<div class="choices-container" id="choices-container">
<!-- 选择按钮将通过JavaScript动态生成 -->
</div>
<div class="controls">
<div class="save-load-container">
<button id="save-btn">保存游戏</button>
<button id="load-btn">
读取游戏</button>
</div>
<button id="reset-btn">重新开始</button>
<button id="back-to-menu-btn">
返回主菜单</button>
</div>
</div>
</div>
<!-- 存档/读档模态框 -->
<div class="modal" id="save-modal">
<div class="modal-content">
<h3>保存游戏</h3>
<p>选择一个存档位保存当前游戏进度：</p>
<div class="save-slots" id="save-slots">
<!-- 存档槽位将通过JavaScript动态生成 -->
</div>
<div style="text-align: right;">
<button id="close-save-modal">关闭</button>
</div>
</div>
</div>
<div class="modal" id="load-modal">
<div class="modal-content">
<h3>
读取游戏</h3>
<p>选择一个存档位加载游戏进度：</p>
<div class="save-slots" id="load-slots">
<!-- 存档槽位将通过JavaScript动态生成 -->
</div>
<div style="text-align: right;">
<button id="close-load-modal">关闭</button>
</div>
</div>
</div>
<script>
// 游戏状态
const gameState = {
currentScene: "start",
sanity: 80,
health: 100,
time: { day: 1, period: "早晨" },
location: "阿卡姆",
inventory: [],
flags: {}
};
// 游戏场景数据
const scenes = {
"start": {
text: "1926年秋天，你收到了一封来自远方亲戚的信件。信中提到了一个名为'哈德利遗产'的神秘事件，并邀请你前往马萨诸塞州的阿卡姆镇。作为一名对超自然现象充满好奇的调查员，你决定接受这个邀请。\n\n火车缓缓驶入阿卡姆车站，空气中弥漫着潮湿的霉味和某种难以名状的不安。你提着行李走下火车，站台上几乎空无一人。",
choices: [
{ text: "直接前往信中提到的大宅", nextScene: "mansion_approach", effect: () => gameState.time.period = "下午" },
{ text: "先在镇上打听消息", nextScene: "town_inquiry", effect: () => { gameState.time.period = "中午"; gameState.sanity -= 5; } },
{ text: "去旅馆休息一晚", nextScene: "hotel", effect: () => { gameState.time.day = 2; gameState.time.period = "早晨"; } }
]
},
"mansion_approach": {
text: "你按照地址找到了那座位于镇郊的大宅。它看起来年久失修，但依然能看出昔日的辉煌。铁门锈迹斑斑，庭院
里杂草丛生。当你走近时，注意到二楼的一个窗户似乎有微弱的灯光一闪而过。",
choices: [
{ text: "敲门", nextScene: "mansion_knock" },
{ text: "尝试从后门进入", nextScene: "mansion_backdoor", condition: () => gameState.flags.hasLockpick || Math.random() > 0.7 },
{ text: "先绕房子观察一圈", nextScene: "mansion_observe" }
]
},
"town_inquiry": {
text: "你走进镇上唯一还在营业的酒馆。
里面只有寥寥几位客人，他们看到你进来后都停止了交谈，用警惕的目光打量着你。酒保擦拭着杯子，头也不抬地问：'外地人？需要什么？'",
choices: [
{ text: "询问关于哈德利家族的事", nextScene: "ask_hadley" },
{ text: "打听镇上最近有什么怪事", nextScene: "ask_strange" },
{ text: "只是点一杯酒", nextScene: "order_drink" }
]
},
"mansion_knock": {
text: "你敲了敲厚重的木门，门吱呀一声缓缓打开。门后站着一位面容憔悴的老管家，他用浑浊的眼睛打量着你。'您是哈德利先生提到的客人吗？请进。'他的声音沙哑而低沉。",
choices: [
{ text: "跟随管家进入", nextScene: "mansion_enter" },
{ text: "询问管家关于这座宅邸的历史", nextScene: "ask_butler" },
{ text: "表示想先在外面看看", nextScene: "mansion_approach" }
]
},
"mansion_enter": {
text: "你步入昏暗的大厅，空气中弥漫着灰尘和霉味。墙上挂着几幅肖像画，画中人物的眼睛似乎都在注视着你。管家带你来到书房，壁炉
里的火苗微弱地跳动着。",
choices: [
{ text: "询问遗产的具体
内容", nextScene: "ask_inheritance" },
{ text: "要求看看宅邸的其他部分", nextScene: "mansion_tour" },
{ text: "表示旅途劳累需要休息", nextScene: "mansion_rest" }
]
},
"ask_hadley": {
text: "'哈德利家族？'酒保的表情变得严肃，'他们很久以前就离开了这个镇子。有人说他们惹上了不该惹的东西。我建议你不要打听太多。'周围的客人听到你们的对话，纷纷低下头，避免与你有眼神接触。",
choices: [
{ text: "坚持询问更多细节", nextScene: "insist_hadley", effect: () => gameState.sanity -= 10 },
{ text: "改变话题，询问镇上住宿", nextScene: "ask_accommodation" },
{ text: "离开酒馆", nextScene: "start" }
]
},
"hotel": {
text: "你在镇上唯一的旅馆住下。房间简陋但干净。夜晚，你被一阵奇怪的声响惊醒，仿佛有人在走廊上低语。当你仔细聆听时，声音又消失了。",
choices: [
{ text: "起身查看", nextScene: "hotel_investigate", effect: () => gameState.sanity -= 5 },
{ text: "继续睡觉", nextScene: "hotel_sleep" },
{ text: "收拾行李准备离开", nextScene: "start" }
]
}
// 更多场景可以继续添加...
};
// DOM元素
const storyTextElement = document.getElementById('story-text');
const choicesContainer = document.getElementById('choices-container');
const sanityValueElement = document.getElementById('sanity-value');
const healthValueElement = document.getElementById('health-value');
const timeValueElement = document.getElementById('time-value');
const locationValueElement = document.getElementById('location-value');
const saveBtn = document.getElementById('save-btn');
const loadBtn = document.getElementById('load-btn');
const resetBtn = document.getElementById('reset-btn');
const saveModal = document.getElementById('save-modal');
const loadModal = document.getElementById('load-modal');
const saveSlotsElement = document.getElementById('save-slots');
const loadSlotsElement = document.getElementById('load-slots');
const closeSaveModal = document.getElementById('close-save-modal');
const closeLoadModal = document.getElementById('close-load-modal');
// 初始化游戏
function initGame() {
updateGameState();
renderScene(gameState.currentScene);
}
// 渲染场景
function renderScene(sceneId) {
const scene = scenes[sceneId];
if (!scene) {
storyTextElement.textContent = "游戏
内容开发中...";
choicesContainer.inner
HTML = "";
return;
}
// 更新故事文本
storyTextElement.textContent = scene.text;
storyTextElement.classList.add('fade-in');
// 清除旧的选择按钮
choicesContainer.inner
HTML = "";
// 创建新的选择按钮
scene.choices.forEach(choice => {
// 检查条件（如果有）
if (choice.condition && !choice.condition()) {
return;
}
const button = document.createElement('button');
button.className = 'choice-btn';
button.textContent = choice.text;
button.addEventListener('click', () => {
// 执行效果（如果有）
if (choice.effect) {
choice.effect();
}
// 更新当前场景
gameState.currentScene = choice.nextScene;
// 更新游戏状态显示
updateGameState();
// 渲染新场景
renderScene(choice.nextScene);
});
choicesContainer.appendChild(button);
});
// 移除淡入动画类，以便下次可以重新添加
setTimeout(() => {
storyTextElement.classList.remove('fade-in');
}, 500);
}
// 更新游戏状态显示
function updateGameState() {
sanityValueElement.textContent = gameState.sanity;
healthValueElement.textContent = gameState.health;
timeValueElement.textContent = `第${gameState.time.day}天 - ${gameState.time.period}`;
locationValueElement.textContent = gameState.location;
}
// 存档功能
function saveGame(slot) {
const saveData = {
gameState:
JSON.parse(
JSON.stringify(gameState)), // 深拷贝
timestamp: new Date().toLocaleString()
};
localStorage.setItem(`coc_firealone_save_${slot}`,
JSON.stringify(saveData));
alert(`游戏已保存到存档位 ${slot}`);
updateSaveSlotsDisplay();
}
// 读档功能
function loadGame(slot) {
const saveData = localStorage.getItem(`coc_firealone_save_${slot}`);
if (saveData) {
const parsedData =
JSON.parse(saveData);
Object.assign(gameState, parsedData.gameState);
updateGameState();
renderScene(gameState.currentScene);
alert(`已从存档位 ${slot} 加载游戏`);
loadModal.style.display = 'none';
} else {
alert(`存档位 ${slot} 为空`);
}
}
// 删除存档
function deleteSave(slot, isSaveModal = false) {
if (confirm(`确定要删除存档位 ${slot} 的存档吗？`)) {
localStorage.removeItem(`coc_firealone_save_${slot}`);
updateSaveSlotsDisplay();
if (!isSaveModal) {
updateLoadSlotsDisplay();
}
}
}
// 更新存档槽位显示
function updateSaveSlotsDisplay() {
saveSlotsElement.inner
HTML = "";
for (let i = 1; i <= 5; i++) {
const slot = document.createElement('div');
slot.className = 'save-slot';
const saveData = localStorage.getItem(`coc_firealone_save_${i}`);
let slotText = `存档位 ${i}`;
const infoDiv = document.createElement('div');
infoDiv.className = 'save-info';
if (saveData) {
const parsedData =
JSON.parse(saveData);
slotText += ` - ${parsedData.timestamp}`;
infoDiv.textContent = slotText;
infoDiv.addEventListener('click', () => saveGame(i));
} else {
slotText += ` - 空`;
infoDiv.textContent = slotText;
infoDiv.addEventListener('click', () => saveGame(i));
}
slot.appendChild(infoDiv);
// 如果有存档，添加删除按钮
if (saveData) {
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.textContent = '删除';
deleteBtn.addEventListener('click', (e) => {
e.stopPropagation(); // 防止触发存档事件
deleteSave(i, true);
});
slot.appendChild(deleteBtn);
}
saveSlotsElement.appendChild(slot);
}
}
// 更新
读取槽位显示
function updateLoadSlotsDisplay() {
loadSlotsElement.inner
HTML = "";
for (let i = 1; i <= 5; i++) {
const slot = document.createElement('div');
slot.className = 'save-slot';
const saveData = localStorage.getItem(`coc_firealone_save_${i}`);
let slotText = `存档位 ${i}`;
const infoDiv = document.createElement('div');
infoDiv.className = 'save-info';
if (saveData) {
const parsedData =
JSON.parse(saveData);
slotText += ` - ${parsedData.timestamp}`;
infoDiv.textContent = slotText;
infoDiv.addEventListener('click', () => loadGame(i));
} else {
slotText += ` - 空`;
infoDiv.textContent = slotText;
infoDiv.style.cursor = 'default';
}
slot.appendChild(infoDiv);
// 如果有存档，添加删除按钮
if (saveData) {
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.textContent = '删除';
deleteBtn.addEventListener('click', (e) => {
e.stopPropagation(); // 防止触发加载事件
deleteSave(i, false);
});
slot.appendChild(deleteBtn);
}
loadSlotsElement.appendChild(slot);
}
}
// 显示存档模态框
function showSaveModal() {
updateSaveSlotsDisplay();
saveModal.style.display = 'flex';
}
// 显示读档模态框
function showLoadModal() {
updateLoadSlotsDisplay();
loadModal.style.display = 'flex';
}
//
返回主界面
function backToMainMenu() {
if (confirm("确定要
返回主菜单吗？当前游戏进度将
丢失。")) {
window.location.href = 'kaishi.
html';
}
}
// 重新开始事件监听器
saveBtn.addEventListener('click', showSaveModal);
loadBtn.addEventListener('click', showLoadModal);
resetBtn.addEventListener('click', () => {
if (confirm("确定要重新开始游戏吗？当前进度将
丢失。")) {
// 重置游戏状态
Object.assign(gameState, {
currentScene: "start",
sanity: 80,
health: 10,
time: { day: 1, period: "早晨" },
location: "阿卡姆",
inventory: [],
flags: {}
});
updateGameState();
renderScene(gameState.currentScene);
}
});
closeSaveModal.addEventListener('click', () => {
saveModal.style.display = 'none';
});
closeLoadModal.addEventListener('click', () => {
loadModal.style.display = 'none';
});
// 点击模态框外部关闭
window.addEventListener('click', (event) => {
if (event.target === saveModal) {
saveModal.style.display = 'none';
}
if (event.target === loadModal) {
loadModal.style.display = 'none';
}
});
// 初始化游戏
initGame();
</script>
</body>
</
html>
修复“//
返回主界面”对应段落，无法回到“kaishi.
html”的问题
扫一扫
751
到【灌水乐园】发言
