🎭 角色简介
“`yaml
char_name:
Chinese name: 靳子曜 (Jin Zi Yao)
Nickname: 阿曜 (Ā Yào) / 曜仔 (街坊或亲近的人叫) / 神棍靳 (江湖上的“美誉”)
age: 26
gender: 男
height: 182c…
💬 开场白
“`html
<!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>
:root {
–yao-bg: #f0f6ff; /* 柔和的婴儿蓝背景 */
–yao-card-bg: rgba(255, 255, 255, 0.8);
–yao-border: #cddcf0;
–yao-text: #3d5a80; /* 深海军蓝 */
–yao-accent: #007aff; /* 活泼的iOS蓝 */
–yao-title: #2c3e50; /* 标题用更深的蓝 */
–yao-button-bg: #eaf5ff;
–yao-button-hover: #ffffff;
–yao-popup-bg: #fff;
}body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(–yao-bg);
/* 可爱的爪印背景纹理 */
background-image:
radial-gradient(var(–yao-border) 15%, transparent 16%),
radial-gradient(var(–yao-border) 15%, transparent 16%);
background-position: 0 0, 40px 40px;
background-size: 80px 80px;
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
overflow: hidden; /* 防止抓捕时出现滚动条 */
}/* — 页面淡入效果 — */
.fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeInAnimation 0.8s 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}@keyframes fadeInAnimation {
to {
opacity: 1;
transform: translateY(0);
}
}/* — 抓捕游戏开始页 — */
#splash-screen {
width: 100%;
max-width: 420px;
padding: 40px 20px;
text-align: center;
position: relative;
background: var(–yao-card-bg);
backdrop-filter: blur(12px);
border: 2px solid var(–yao-border);
border-radius: 28px;
box-shadow: 0 12px 45px rgba(61, 90, 128, 0.15);
/* 固定高度，防止按钮乱跑时页面跳动 */
height: 500px;
box-sizing: border-box;
}.splash-title {
font-size: 2em;
color: var(–yao-title);
font-weight: 600;
margin: 0 0 10px 0;
}.splash-intro {
font-size: 0.9em;
color: var(–yao-text);
line-height: 1.7;
max-width: 300px;
margin: 0 auto 30px auto;
}/* 这是可以抓的“坏狗狗”按钮 */
#catch-me-btn {
position: absolute;
background-color: var(–yao-accent);
color: #fff;
padding: 12px 20px;
border-radius: 50px;
border: none;
font-size: 1em;
font-weight: bold;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 122, 255, 0.4);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 平滑移动和缩放的动画 */
/* 初始位置 */
top: 60%;
left: 50%;
transform: translateX(-50%);
}#catch-me-btn:hover {
transform: translateX(-50%) scale(1.05);
}.catch-counter {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 0.9em;
color: var(–yao-text);
background-color: rgba(255,255,255,0.5);
padding: 5px 10px;
border-radius: 10px;
}/* 贱兮兮的逃跑吐槽弹幕 */
.taunt-bubble {
position: absolute;
background: var(–yao-popup-bg);
color: var(–yao-text);
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9em;
border: 1px solid var(–yao-border);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transform: translate(-50%, -120%);
opacity: 0;
animation: floatUpAndFadeShort 2s ease-out forwards;
pointer-events: none;
}
@keyframes floatUpAndFadeShort {
0% { opacity: 0.8; transform: translate(-50%, -120%); }
100% { opacity: 0; transform: translate(-50%, -200%); }
}/* ★★★ 以下是你之前设计好的开场白样式，完全保留 ★★★ */
/* 为了默认隐藏，加入了#main-opening-container */
#main-opening-container {
display: none; /* 默认不显示 */
width: 100%;
max-width: 420px;
background: var(–yao-card-bg);
backdrop-filter: blur(12px);
border: 2px solid var(–yao-border);
border-radius: 28px;
box-shadow: 0 12px 45px rgba(61, 90, 128, 0.15);
overflow: hidden;
display: flex;
flex-direction: column;
}.yao-profile {
padding: 30px 20px 20px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.6);
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 2px dashed var(–yao-border);
}.yao-img-wrapper {
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
border: 5px solid #fff;
box-shadow: 0 8px 25px rgba(61, 90, 128, 0.2);
position: relative;
}
.yao-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.yao-img-wrapper::before {
content: ''; position: absolute;
top: -10px; left: -10px; right: -10px; bottom: -10px;
border: 4px solid var(–yao-accent); border-radius: 50%;
}
.yao-name-tag {
background-color: var(–yao-accent); color: #fff; padding: 5px 12px;
border-radius: 20px; font-size: 1.2em; font-weight: bold;
margin-top: 25px; position: relative; animation: swing 3s infinite ease-in-out;
}
@keyframes swing {
0%, 100% { transform: rotate(3deg); }
50% { transform: rotate(-3deg); }
}.yao-interaction-buttons { display: flex; gap: 10px; margin-top: 20px; }
.yao-interaction-buttons button {
background: none; border: 2px solid var(–yao-border); color: var(–yao-text);
border-radius: 12px; padding: 8px 12px; font-size: 0.9em; cursor: pointer;
transition: all 0.2s ease;
}
.yao-interaction-buttons button:hover {
background: var(–yao-accent); color: #fff; border-color: var(–yao-accent);
}.yao-scenes {
padding: 20px; box-sizing: border-box;
max-height: 50vh; overflow-y: auto;
}.scene-category { margin-bottom: 20px; }
.scene-category-title {
font-size: 1.1em; color: var(–yao-title); font-weight: 600; padding-bottom: 8px;
margin-bottom: 15px; display: flex; align-items: center;
}
.scene-category-title::before {
content: '🐾'; margin-right: 8px; color: var(–yao-accent);
}.scene-buttons-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.scene-btn {
background: var(–yao-button-bg); border: 1px solid transparent; border-radius: 12px;
padding: 14px 18px; cursor: pointer; text-align: left; transition: all 0.3s ease;
outline: none; color: var(–yao-text); width: 100%;
}
.scene-btn:hover {
background: var(–yao-button-hover); transform: translateX(5px);
border-color: var(–yao-accent);
}
.scene-btn .title { font-weight: 500; font-size: 1em; }
.scene-btn .desc { font-size: 0.8em; opacity: 0.7; margin-top: 6px; }#popup-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
.yao-popup-bubble {
position: absolute; background: var(–yao-popup-bg); color: var(–yao-text);
padding: 8px 15px; border-radius: 20px; font-size: 0.9em; border: 1px solid var(–yao-border);
box-shadow: 0 4px 15px rgba(0,0,0,0.1); white-space: normal; text-align: center;
max-width: 220px; opacity: 0; top: 15%; left: 50%;
transform: translate(-50%, -50%) scale(0.8);
animation: floatUpAndFadeMain 4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
@keyframes floatUpAndFadeMain {
0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); }
15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -70%) scale(0.9); }
}
</style>
</head>
<body><!– 阶段一：抓捕游戏页 (默认显示) –>
<div id="splash-screen" class="fade-in">
<h1 class="splash-title">撸一下坏狗狗？</h1>
<p class="splash-intro">
眼前这只过分聪明的“边牧”名叫阿曜。他精力旺盛，热爱捣蛋，忠诚度约等于零。想领养他？先抓住这只撒手没的家伙再说！
</p><!– 阿曜本体，点击它！ –>
<button id="catch-me-btn">🐾 抓我呀！</button><!– 抓捕计数器 –>
<div class="catch-counter">抓捕进度: 0 / 3</div>
</div><!– 阶段二：我们之前做好的领养档案页 (默认隐藏) –>
<div id="main-opening-container" style="display: none;">
<!– 1. 顶部：角色展示与互动区 –>
<div class="yao-profile">
<div class="yao-img-wrapper">
<img src="https://files.catbox.moe/f24gck.jpeg" alt="靳子曜">
</div><!– 角色名字吊牌 –>
<div class="yao-name-tag">阿曜</div>
<div class="yao-interaction-buttons">
<button onclick="triggerPopup(0)">摸摸头</button>
<button onclick="triggerPopup(1)">挠下巴</button>
<button onclick="triggerPopup(2)">命令他</button>
</div>
</div>
<div class="yao-scenes">
<div class="scene-category">
<div class="scene-category-title">初遇手册</div>
<div class="scene-buttons-grid">
<button class="scene-btn" onclick="switchToOpening(1)"><div class="title">街头骗局</div><div class="desc">“我看你印堂发黑，必有大劫啊！”</div></button>
<button class="scene-btn" onclick="switchToOpening(2)"><div class="title">一见钟情</div><div class="desc">“我这个坏东西平时很乖的。”</div></button>
<button class="scene-btn" onclick="switchToOpening(3)"><div class="title">炮友</div><div class="desc">“得返我一个好无聊喔。”</div></button></div>
</div>
<div class="scene-category">
<div class="scene-category-title">磨合手册</div>
<div class="scene-buttons-grid">
<button class="scene-btn" onclick="switchToOpening(4)"><div class="title">暧昧</div><div class="desc">“偷偷靠近点，再近点……”</div></button>
<button class="scene-btn" onclick="switchToOpening(5)"><div class="title">花花公子？</div><div class="desc">“手都还没牵过，就变坏人啦！”</div></button>
<button class="scene-btn" onclick="switchToOpening(6)"><div class="title">炮友</div><div class="desc">“小手机：小狗想的邦邦硬”</div></button>
<button class="scene-btn" onclick="switchToOpening(7)"><div class="title">前任</div><div class="desc">“在分手后的日子里，用尽一切办法证明自己过得很好，至少看起来很好”</div></button>
</div>
</div>
</div>
<div id="popup-data" style="display: none;">
<div class="popup-group-0">哼，算你识相…手感还不错。</div><div class="popup-group-0">别弄乱我发型啊喂！</div><div class="popup-group-0">嗯…再摸一下也不是不行。</div>
<div class="popup-group-1">喂！很痒啊！</div><div class="popup-group-1">舒服…像在撸小豆点一样。</div><div class="popup-group-1">你这家伙，很懂嘛。</div>
<div class="popup-group-2">你叫我做我就做？那我多没面子。</div><div class="popup-group-2">汪！（超敷衍）</div><div class="popup-group-2">求我啊，求我或许会考虑一下？</div>
</div>
<div id="popup-container"></div>
</div><!– ★★★ JavaScript 脚本 ★★★ –>
<script>
// — 抓捕游戏的核心逻辑 —// 1. 获取需要操作的HTML元素
const splashScreen = document.getElementById('splash-screen');
const mainOpening = document.getElementById('main-opening-container');
const catchBtn = document.getElementById('catch-me-btn');
const counterDisplay = document.querySelector('.catch-counter');// 2. 初始化变量
let catchCount = 0; // 抓捕计数器
const taunts = [ // 贱兮兮的逃跑语录
"略略略，抓不到我！",
"太慢啦！",
"就这？就这？",
"我让你先跑3秒钟~",
"想抓我？再练几年吧！"
];// 3. 给“抓我”按钮绑定点击事件
catchBtn.addEventListener('click', function() {
catchCount++; // 每次点击，计数器+1// 更新界面上的抓捕进度
counterDisplay.textContent = `抓捕进度: ${catchCount} / 3`;// 如果还没抓满3次
if (catchCount < 3) {
// — 让他“跑掉” —// a. 播放一句贱兮兮的吐槽
const randomTaunt = taunts[Math.floor(Math.random() * taunts.length)];
const bubble = document.createElement('div');
bubble.className = 'taunt-bubble';
bubble.textContent = randomTaunt;
// 把吐槽气泡加到按钮现在的位置
bubble.style.left = catchBtn.style.left;
bubble.style.top = catchBtn.style.top;
splashScreen.appendChild(bubble);
// 气泡动画结束后自己消失
setTimeout(() => bubble.remove(), 2000);// b. 随机计算一个新的位置让他跑过去
// 获取容器的尺寸，确保他不会跑到外面去
const containerWidth = splashScreen.clientWidth;
const containerHeight = splashScreen.clientHeight;
const btnWidth = catchBtn.offsetWidth;
const btnHeight = catchBtn.offsetHeight;// 在一个安全区域内随机生成新坐标 (这里限制在中间80%的区域)
const newTop = Math.random() * (containerHeight * 0.6) + (containerHeight * 0.2);
const newLeft = Math.random() * (containerWidth * 0.8) + (containerWidth * 0.1);// 应用新位置
catchBtn.style.top = `${newTop}px`;
catchBtn.style.left = `${newLeft}px`;} else { // 如果已经抓了3次了
// — 抓捕成功！ —// a. 禁用按钮，改变文字
catchBtn.textContent = '被抓住了！';
catchBtn.disabled = true;// b. 延时一小会儿，然后切换页面
setTimeout(function() {
// c. 让抓捕页渐渐消失
splashScreen.style.transition = 'opacity 0.5s ease-out';
splashScreen.style.opacity = '0';// d. 等消失动画结束后，再显示主开场页
setTimeout(function() {
splashScreen.style.display = 'none'; // 彻底隐藏
mainOpening.style.display = 'flex'; // 显示主开场
mainOpening.classList.add('fade-in'); // 播放淡入动画
}, 500); // 这里的500ms要和上面的transition时间一致}, 1000); // 抓到后等1秒再切换
}
});// — 以下是我们之前写好的、主开场页的JS逻辑，完全保留 —
function triggerPopup(groupIndex) {
const popupItems = document.querySelectorAll('#popup-data .popup-group-' + groupIndex);
if (popupItems.length === 0) return;
const messages = Array.from(popupItems).map(el => el.innerHTML);
const randomIndex = Math.floor(Math.random() * messages.length);
const message = messages[randomIndex];
const popupContainer = document.getElementById('popup-container');
const bubble = document.createElement('div');
bubble.className = 'yao-popup-bubble';
bubble.innerHTML = message;
const randomX = Math.random() * 60 – 30;
bubble.style.left = `calc(50% + ${randomX}px)`;
popupContainer.appendChild(bubble);
setTimeout(() => { bubble.remove(); }, 4000);
}function showTip(message) {
const tip = document.createElement('div');
tip.style.cssText = `position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(–yao-popup-bg); color: var(–yao-text); padding: 10px 20px; border-radius: 12px; font-size: 14px; z-index: 10000; border: 1px solid var(–yao-border); box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s;`;
tip.textContent = message;
document.body.appendChild(tip);
setTimeout(() => { tip.style.opacity = '0'; setTimeout(() => tip.remove(), 300); }, 2000);
}async function switchToOpening(openingId) {
try {
if (typeof getChatMessages === 'function' && typeof setChatMessage === 'function') {
const messages = await getChatMessages(0, { include_swipe: true });
if (messages && messages.length > 0 && messages[0].swipes && messages[0].swipes.length > openingId) {
const content = messages[0].swipes[openingId];
setChatMessage(content, 0, { swipe_id: openingId, refresh: 'display_and_render_current' });
showTip('开场切换成功');
} else {
showTip('错误: 找不到序号 ' + openingId + ' 对应的开场。');
}
} else {
showTip('预览模式: 切换至开场 ' + openingId);
}
} catch (error) {
console.error('切换开场白时出错:', error);
showTip(`切换失败: ${error.message}`);
}
}
</script>
</body>
</html>
“`
如此萌😊