雨巷旧书店

by ElectricNinja89
153 lines5.0 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雨巷旧书店</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
    background:#1a1a22;
    color:#f0e6d6;
    font-family:"Microsoft Yahei",serif;
    text-align:center;
    padding:20px;
    line-height:1.6;
}
.container{
    max-width:600px;
    margin:0 auto;
    background:#2d2d3a;
    padding:30px 20px;
    border-radius:12px;
    box-shadow:0 0 20px rgba(100,80,60,0.3);
}
.title{
    font-size:24px;
    margin-bottom:20px;
    color:#d4b886;
}
.text-box{
    min-height:120px;
    margin-bottom:25px;
    font-size:16px;
}
.btn-group{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}
.btn{
    background:#6b5344;
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
    transition:0.2s;
}
.btn:hover{
    background:#8a6b52;
}
.end-tip{
    margin-top:20px;
    font-size:14px;
    color:#b9a380;
}
</style>
</head>
<body>
<div class="container">
    <div class="title">雨巷旧书店</div>
    <div class="text-box" id="text">初夏的细雨淅淅沥沥，打湿老城青石板路。你撑着素色油纸伞，走到巷口的云间书店，木门虚掩，暖光从窗内漫出。</div>
    <div class="btn-group" id="btnBox">
        <button class="btn" onclick="enterShop()">推开木门躲雨</button>
        <button class="btn" onclick="leaveRoad()">径直返回工作室</button>
    </div>
    <div class="end-tip" id="tip"></div>
</div>

<script>
let stage = 0;
const text = document.getElementById("text");
const btnBox = document.getElementById("btnBox");
const tip = document.getElementById("tip");

function leaveRoad(){
    stage = 99;
    text.innerText = "你没有走进书店，雨丝打湿袖口，你转身回到古籍修复工作室。日复一日修补旧纸，日子平淡安稳，却永远错过了一段旧缘。【平凡结局】";
    btnBox.innerHTML = "";
    tip.innerText = "雨巷的故事，停在了这一刻。";
}

function enterShop(){
    stage = 1;
    text.innerText = "风铃轻响，屋内旧书墨香混着茉莉茶香扑面而来。店主谢砚辞坐在窗边整理线装书，抬眼看向你，递来一杯温热花茶。他一眼认出你是古籍修复师。";
    btnBox.innerHTML = `
    <button class="btn" onclick="readYuefu()">翻看明版《乐府诗集》</button>
    <button class="btn" onclick="askBook()">询问书店来历</button>
    <button class="btn" onclick="lookShuyu()">查看民国版《漱玉词》</button>
    `;
}

function askBook(){
    stage = 2;
    text.innerText = "谢砚辞轻声说，书店是祖父留下的，藏着许多跨越时光的旧物，等待故人重逢。他的目光温柔，似乎早就认识你。";
    btnBox.innerHTML = `
    <button class="btn" onclick="lookShuyu()">翻看《漱玉词》</button>
    `;
}

function readYuefu(){
    stage = 2;
    text.innerText = "你仔细查看古籍，纸张墨色都是明代真品，保存完好。谢砚辞在一旁安静看着，没有打扰。";
    btnBox.innerHTML = `
    <button class="btn" onclick="lookShuyu()">转而查看《漱玉词》</button>
    `;
}

function lookShuyu(){
    stage = 3;
    text.innerText = "你翻开民国版《漱玉词》，一张泛黄的老照片从扉页滑落。照片上是年少的你和少年谢砚辞，小时候在这间书店许下的约定。";
    btnBox.innerHTML = `
    <button class="btn" onclick="recallMem()">唤醒童年回忆</button>
    <button class="btn" onclick="hidePic()">慌忙收起照片</button>
    `;
}

function hidePic(){
    stage = 4;
    text.innerText = "你连忙把照片塞进袖口，心跳骤然加快。谢砚辞缓缓开口：我等你很久了，小时候的约定，你还记得吗？";
    btnBox.innerHTML = `
    <button class="btn" onclick="recallMem()">坦然面对回忆</button>
    `;
}

function recallMem(){
    stage = 5;
    text.innerText = "尘封的记忆翻涌而来。儿时雨天，你们一起在书店翻书，约定长大以后还要守着旧书。书店泛起淡淡的微光，时空开始微微晃动。";
    btnBox.innerHTML = `
    <button class="btn" onclick="stayNow()">留在现实，相伴相守</button>
    <button class="btn" onclick="goBackTime()">触碰旧书，回到少年时代</button>
    `;
}

function stayNow(){
    stage = 100;
    text.innerText = "你选择留在当下。雨停之后，你常常来书店修复古籍，两人在墨香雨声里慢慢相伴，旧书为证，岁月温柔绵长。【圆满日常结局】";
    btnBox.innerHTML = "";
    tip.innerText = "最好的时光，就是此刻相守。";
}

function goBackTime(){
    stage = 101;
    text.innerText = "你指尖触碰泛黄书页，微光包裹全身。一瞬回到童年的雨天，少年谢砚辞正坐在窗边等你，所有遗憾都被时光弥补。【时光重逢结局】";
    btnBox.innerHTML = "";
    tip.innerText = "跨越岁月，终于赴约。";
}
</script>
</body>
</html>
Game Source: 雨巷旧书店

Creator: ElectricNinja89
Libraries: none
Complexity: moderate (153 lines, 5.0 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: game-electricninja89" to link back to the original. Then publish at arcadelab.ai/publish.