<!DOCTYPE html>
<html lang
="zh-CN">
<head>
<meta charset
="UTF-8">
<meta name
="v
iewport" 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 1
5px 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: 1
5px;
}
h1 {
color: var(--highlight-color);
font-size: 2
.2rem;
letter-spacing: 2px;
text-shadow: 0 0
5px rgba(212, 17
5,
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(1
5, 1
5, 1
5, 0
.8);
padding: 20px;
border: 1px solid var(--accent-color);
min-height: 2
50px;
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 1
5px;
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: 1
5px 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: #e
53e3e;
}
.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
.7
5s 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
.innerHTML
= "";
return;
}
// 更新故事文本
storyTextElement
.textContent
= scene
.text;
storyTextElement
.classList
.add('fade-in');
// 清除旧的选择按钮
choicesContainer
.innerHTML
= "";
// 创建新的选择按钮
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 save
Data = {
gameState: JSON
.parse(JSON
.stringify(gameState)), // 深拷贝
timestamp: new Date()
.toLocaleString()
};
localStorage
.setItem(`coc_firealone_save_${slot}`, JSON
.stringify(save
Data));
alert(`游戏已保存到存档位 ${slot}`);
updateSaveSlotsDisplay();
}
// 读档功能
function loadGame(slot) {
const save
Data = localStorage
.getItem(`coc_firealone_save_${slot}`);
if (save
Data) {
const parsed
Data = JSON
.parse(save
Data);
Object
.assign(gameState, parsed
Data.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
.innerHTML
= "";
for (let i
= 1; i <
= 5; i++) {
const slot
= document
.createElement('div');
slot
.className
= 'save-slot';
const save
Data = localStorage
.getItem(`coc_firealone_save_${i}`);
let slotText
= `存档位 ${i}`;
const infoDiv
= document
.createElement('div');
infoDiv
.className
= 'save-info';
if (save
Data) {
const parsed
Data = JSON
.parse(save
Data);
slotText +
= ` - ${parsed
Data.timestamp}`;
infoDiv
.textContent
= slotText;
infoDiv
.addEventListener('click', ()
=> saveGame(i));
} else {
slotText +
= ` - 空`;
infoDiv
.textContent
= slotText;
infoDiv
.addEventListener('click', ()
=> saveGame(i));
}
slot
.appendChild(infoDiv);
// 如果有存档，添加删除按钮
if (save
Data) {
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
.innerHTML
= "";
for (let i
= 1; i <
= 5; i++) {
const slot
= document
.createElement('div');
slot
.className
= 'save-slot';
const save
Data = localStorage
.getItem(`coc_firealone_save_${i}`);
let slotText
= `存档位 ${i}`;
const infoDiv
= document
.createElement('div');
infoDiv
.className
= 'save-info';
if (save
Data) {
const parsed
Data = JSON
.parse(save
Data);
slotText +
= ` - ${parsed
Data.timestamp}`;
infoDiv
.textContent
= slotText;
infoDiv
.addEventListener('click', ()
=> loadGame(i));
} else {
slotText +
= ` - 空`;
infoDiv
.textContent
= slotText;
infoDiv
.style
.cursor
= 'default';
}
slot
.appendChild(infoDiv);
// 如果有存档，添加删除按钮
if (save
Data) {
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”的问题
本文介绍了一种解决JavaScript链接在IE6及遨游浏览器中无法正常工作的问题方法。通过在onclick事件中添加return false, 成功解决了跨浏览器兼容性问题。
扫一扫
1424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
