孙割人生模拟器 · 千金风
by FlashCobra671188 lines42.6 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>孙割人生模拟器 · 千金风</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&display=swap');
body {
font-family: 'Noto Serif SC', 'Georgia', serif;
background: #1a0a0e;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
#app {
width: 100%;
max-width: 420px;
height: 100vh;
max-height: 820px;
background: linear-gradient(165deg, #fce4ec 0%, #f8e8f0 30%, #fce4ec 60%, #f3d4e0 100%);
border-radius: 28px;
box-shadow: 0 20px 80px rgba(180, 60, 100, 0.5), 0 0 0 2px #f0c8d8 inset, 0 0 0 4px #d4a0b8 inset;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* 装饰光晕 */
#app::before {
content: '';
position: absolute;
top: -30%;
right: -20%;
width: 70%;
height: 70%;
background: radial-gradient(ellipse, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
#app::after {
content: '';
position: absolute;
bottom: -20%;
left: -20%;
width: 60%;
height: 60%;
background: radial-gradient(ellipse, rgba(255, 182, 193, 0.25) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* 花瓣飘落 */
.petal {
position: absolute;
color: rgba(255, 182, 193, 0.5);
font-size: 18px;
pointer-events: none;
z-index: 0;
animation: fall linear infinite;
opacity: 0;
}
@keyframes fall {
0% {
transform: translateY(-20px) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.7;
}
90% {
opacity: 0.7;
}
100% {
transform: translateY(calc(100vh)) rotate(720deg);
opacity: 0;
}
}
/* 页面容器 */
.page {
display: none;
flex-direction: column;
height: 100%;
padding: 20px 22px 28px;
position: relative;
z-index: 1;
flex: 1;
}
.page.active {
display: flex;
}
/* ===== 标题页 ===== */
#title-page {
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(165deg, #fce4ec 0%, #f8e0e8 40%, #fce4ec 100%);
}
.title-ornament {
font-size: 40px;
color: #d4a0b8;
letter-spacing: 12px;
margin-bottom: 6px;
text-shadow: 0 0 20px rgba(212, 160, 184, 0.3);
}
.title-main {
font-size: 42px;
font-weight: 900;
background: linear-gradient(135deg, #c87890, #d4a0b8, #c87890);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
letter-spacing: 6px;
line-height: 1.2;
margin-bottom: 4px;
position: relative;
}
.title-main::after {
content: '✦';
position: absolute;
right: -38px;
top: -4px;
font-size: 24px;
-webkit-text-fill-color: initial;
color: #d4a0b8;
opacity: 0.6;
}
.title-main::before {
content: '✦';
position: absolute;
left: -38px;
top: -4px;
font-size: 24px;
-webkit-text-fill-color: initial;
color: #d4a0b8;
opacity: 0.6;
}
.title-sub {
font-size: 16px;
color: #b08090;
letter-spacing: 8px;
font-weight: 400;
margin-top: 2px;
margin-bottom: 30px;
}
.title-sub span {
color: #d4a0b8;
font-weight: 600;
}
.title-deco {
width: 120px;
height: 2px;
background: linear-gradient(90deg, transparent, #d4a0b8, transparent);
margin: 6px auto 16px;
border-radius: 2px;
}
.title-desc {
font-size: 13px;
color: #b08898;
letter-spacing: 2px;
line-height: 1.8;
max-width: 280px;
margin: 0 auto 32px;
background: rgba(255, 255, 255, 0.4);
padding: 12px 20px;
border-radius: 30px;
backdrop-filter: blur(10px);
border: 1px solid rgba(212, 160, 184, 0.2);
}
.btn {
display: inline-block;
padding: 14px 48px;
border: none;
border-radius: 40px;
font-family: 'Noto Serif SC', serif;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 4px;
position: relative;
overflow: hidden;
}
.btn-primary {
background: linear-gradient(135deg, #d4a0b8, #c87890);
color: #fff;
box-shadow: 0 8px 32px rgba(200, 120, 144, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 40px rgba(200, 120, 144, 0.5);
}
.btn-primary:active {
transform: scale(0.96);
}
.btn-gold {
background: linear-gradient(135deg, #e8c878, #d4a058);
color: #fff;
box-shadow: 0 8px 32px rgba(212, 160, 88, 0.4);
}
.btn-gold:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 40px rgba(212, 160, 88, 0.5);
}
.btn-outline {
background: transparent;
color: #c87890;
border: 2px solid #d4a0b8;
box-shadow: none;
}
.btn-outline:hover {
background: rgba(212, 160, 184, 0.1);
transform: translateY(-2px);
}
/* ===== 选择页 ===== */
#select-page {
padding-top: 16px;
background: linear-gradient(165deg, #fce4ec 0%, #f5dce6 100%);
}
.select-title {
text-align: center;
font-size: 20px;
font-weight: 700;
color: #b08090;
letter-spacing: 4px;
margin-bottom: 4px;
}
.select-title span {
color: #d4a0b8;
}
.select-sub {
text-align: center;
font-size: 12px;
color: #c098a8;
letter-spacing: 2px;
margin-bottom: 18px;
}
.select-grid {
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
justify-content: center;
padding: 4px 0;
}
.select-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
border-radius: 20px;
padding: 16px 20px;
border: 2px solid rgba(212, 160, 184, 0.25);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 4px 20px rgba(180, 80, 120, 0.08);
}
.select-card:hover {
transform: translateX(6px) scale(1.01);
border-color: #d4a0b8;
box-shadow: 0 8px 32px rgba(180, 80, 120, 0.15);
}
.select-card:active {
transform: scale(0.97);
}
.select-avatar {
font-size: 40px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #fce4ec, #f5dce6);
border-radius: 50%;
flex-shrink: 0;
border: 2px solid #d4a0b8;
}
.select-info {
flex: 1;
}
.select-name {
font-size: 18px;
font-weight: 700;
color: #704858;
letter-spacing: 2px;
}
.select-name small {
font-weight: 400;
font-size: 12px;
color: #b08898;
letter-spacing: 0;
margin-left: 6px;
}
.select-desc {
font-size: 12px;
color: #b08898;
letter-spacing: 1px;
margin-top: 2px;
}
.select-tag {
font-size: 11px;
color: #d4a0b8;
border: 1px solid #d4a0b8;
padding: 2px 12px;
border-radius: 20px;
background: rgba(212, 160, 184, 0.08);
flex-shrink: 0;
}
/* ===== 游戏页 ===== */
#game-page {
padding: 12px 18px 20px;
background: linear-gradient(175deg, #fce4ec 0%, #f5dce6 100%);
}
.game-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px);
border-radius: 20px;
border: 1px solid rgba(212, 160, 184, 0.2);
margin-bottom: 12px;
flex-shrink: 0;
}
.game-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #704858;
}
.game-stat .icon {
font-size: 18px;
}
.game-stat .num {
font-size: 16px;
font-weight: 700;
color: #c87890;
min-width: 40px;
white-space: nowrap;
}
.game-stat .num.gold {
color: #d4a058;
}
.game-stat .num.love {
color: #e06080;
}
.game-hero {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
border-radius: 20px;
border: 1px solid rgba(212, 160, 184, 0.15);
margin-bottom: 12px;
flex-shrink: 0;
}
.game-hero-avatar {
font-size: 48px;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #fce4ec, #f5dce6);
border-radius: 50%;
border: 3px solid #d4a0b8;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(180, 80, 120, 0.15);
}
.game-hero-info {
flex: 1;
}
.game-hero-name {
font-size: 20px;
font-weight: 700;
color: #704858;
letter-spacing: 2px;
}
.game-hero-name small {
font-weight: 400;
font-size: 13px;
color: #b08898;
letter-spacing: 1px;
margin-left: 6px;
}
.game-hero-bar {
margin-top: 4px;
display: flex;
align-items: center;
gap: 10px;
}
.game-hero-bar .label {
font-size: 11px;
color: #b08898;
font-weight: 600;
letter-spacing: 1px;
}
.game-hero-bar .track {
flex: 1;
height: 6px;
background: rgba(212, 160, 184, 0.2);
border-radius: 6px;
overflow: hidden;
position: relative;
}
.game-hero-bar .track .fill {
height: 100%;
background: linear-gradient(90deg, #e06080, #d4a0b8);
border-radius: 6px;
transition: width 0.6s ease;
width: 0%;
}
.game-hero-bar .track .fill.gold-fill {
background: linear-gradient(90deg, #e8c878, #d4a058);
}
.game-hero-bar .pct {
font-size: 12px;
font-weight: 700;
color: #c87890;
min-width: 34px;
text-align: right;
}
.game-chat {
flex: 1;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(8px);
border-radius: 24px;
border: 1px solid rgba(212, 160, 184, 0.12);
padding: 16px 18px;
min-height: 0;
overflow: hidden;
margin-bottom: 10px;
}
.game-chat-scroll {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 4px;
}
.game-chat-scroll::-webkit-scrollbar {
width: 3px;
}
.game-chat-scroll::-webkit-scrollbar-track {
background: transparent;
}
.game-chat-scroll::-webkit-scrollbar-thumb {
background: #d4a0b8;
border-radius: 10px;
}
.chat-msg {
padding: 10px 16px;
border-radius: 18px;
max-width: 92%;
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.5px;
animation: msgIn 0.4s ease;
}
@keyframes msgIn {
0% {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.chat-msg.left {
background: rgba(255, 255, 255, 0.7);
color: #5a3a42;
align-self: flex-start;
border-bottom-left-radius: 6px;
border: 1px solid rgba(212, 160, 184, 0.1);
}
.chat-msg.left .name-tag {
font-size: 11px;
color: #d4a0b8;
font-weight: 700;
margin-bottom: 2px;
display: block;
}
.chat-msg.right {
background: linear-gradient(135deg, #d4a0b8, #c87890);
color: #fff;
align-self: flex-end;
border-bottom-right-radius: 6px;
box-shadow: 0 4px 12px rgba(200, 120, 144, 0.2);
}
.chat-msg.system {
background: rgba(212, 160, 184, 0.12);
color: #b08090;
align-self: center;
font-size: 12px;
padding: 6px 16px;
border-radius: 30px;
border: 1px dashed rgba(212, 160, 184, 0.2);
max-width: 80%;
text-align: center;
}
.chat-msg .cost {
display: inline-block;
font-size: 12px;
color: #d4a058;
font-weight: 700;
background: rgba(212, 160, 88, 0.1);
padding: 0 10px;
border-radius: 12px;
margin-top: 4px;
}
.chat-msg .love-gain {
display: inline-block;
font-size: 12px;
color: #e06080;
font-weight: 700;
background: rgba(224, 96, 128, 0.08);
padding: 0 10px;
border-radius: 12px;
margin-top: 4px;
margin-left: 4px;
}
.game-actions {
display: flex;
gap: 12px;
flex-shrink: 0;
padding-top: 4px;
}
.game-actions .btn {
flex: 1;
padding: 12px 0;
font-size: 15px;
letter-spacing: 2px;
border-radius: 30px;
text-align: center;
}
.btn-accept {
background: linear-gradient(135deg, #e8c878, #d4a058);
color: #fff;
box-shadow: 0 4px 20px rgba(212, 160, 88, 0.3);
}
.btn-accept:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(212, 160, 88, 0.4);
}
.btn-accept:active {
transform: scale(0.96);
}
.btn-accept:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
.btn-reject {
background: rgba(255, 255, 255, 0.5);
color: #b08090;
border: 2px solid rgba(212, 160, 184, 0.2);
backdrop-filter: blur(4px);
}
.btn-reject:hover {
background: rgba(255, 255, 255, 0.7);
transform: translateY(-2px);
}
.btn-reject:active {
transform: scale(0.96);
}
/* ===== 结局页 ===== */
#ending-page {
justify-content: center;
align-items: center;
text-align: center;
padding: 30px 28px;
background: linear-gradient(165deg, #fce4ec 0%, #f5dce6 100%);
}
.ending-icon {
font-size: 72px;
margin-bottom: 12px;
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.ending-title {
font-size: 32px;
font-weight: 900;
color: #704858;
letter-spacing: 4px;
margin-bottom: 4px;
}
.ending-title .highlight {
color: #e06080;
}
.ending-sub {
font-size: 14px;
color: #b08898;
letter-spacing: 2px;
line-height: 1.8;
max-width: 300px;
margin: 6px auto 16px;
}
.ending-stats {
display: flex;
gap: 30px;
justify-content: center;
margin: 12px 0 24px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.5);
border-radius: 30px;
backdrop-filter: blur(8px);
border: 1px solid rgba(212, 160, 184, 0.15);
}
.ending-stats .stat {
display: flex;
flex-direction: column;
align-items: center;
}
.ending-stats .stat .label {
font-size: 11px;
color: #b08898;
letter-spacing: 1px;
}
.ending-stats .stat .value {
font-size: 20px;
font-weight: 700;
color: #704858;
}
.ending-stats .stat .value.gold {
color: #d4a058;
}
.ending-stats .stat .value.love {
color: #e06080;
}
.ending-story {
font-size: 13px;
color: #8a6a78;
line-height: 2;
max-width: 340px;
margin: 4px auto 18px;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.3);
border-radius: 20px;
border: 1px solid rgba(212, 160, 184, 0.08);
letter-spacing: 1px;
}
/* 通用 */
.mt-8 {
margin-top: 8px;
}
.mt-12 {
margin-top: 12px;
}
.gap-8 {
gap: 8px;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
/* 响应式 */
@media (max-width: 440px) {
#app {
border-radius: 0;
max-height: 100vh;
height: 100vh;
}
.title-main {
font-size: 32px;
}
.title-main::before,
.title-main::after {
display: none;
}
.game-hero-avatar {
font-size: 36px;
width: 52px;
height: 52px;
}
.game-hero-name {
font-size: 17px;
}
.chat-msg {
font-size: 13px;
padding: 8px 14px;
}
.game-actions .btn {
font-size: 14px;
padding: 10px 0;
}
.select-card {
padding: 12px 16px;
}
.select-avatar {
font-size: 32px;
width: 46px;
height: 46px;
}
.select-name {
font-size: 16px;
}
.btn {
padding: 12px 32px;
font-size: 16px;
}
}
@media (max-height: 700px) {
.game-header {
padding: 5px 12px;
margin-bottom: 8px;
}
.game-hero {
padding: 8px 14px;
margin-bottom: 8px;
}
.game-chat {
padding: 12px 14px;
}
.chat-msg {
font-size: 12px;
padding: 6px 12px;
}
.game-actions .btn {
padding: 8px 0;
font-size: 13px;
}
.game-hero-avatar {
font-size: 32px;
width: 44px;
height: 44px;
}
.game-hero-name {
font-size: 15px;
}
}
/* 禁用滚动 */
.no-scroll {
overflow: hidden;
}
</style>
</head>
<body>
<div id="app">
<!-- 花瓣背景 -->
<div id="petals-container" style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden;"></div>
<!-- ===== 标题页 ===== -->
<div id="title-page" class="page active">
<div class="title-ornament">✧ ✦ ✧</div>
<div class="title-main">孙割人生模拟器</div>
<div class="title-sub">✦ <span>千金风</span> ✦</div>
<div class="title-deco"></div>
<div class="title-desc">
她是顶级富豪 · 她是「孙割」<br>
这一次，只为一人倾心。
</div>
<button class="btn btn-primary" id="startBtn">✦ 开始寻觅 ✦</button>
<div style="margin-top:20px;font-size:11px;color:#c098a8;letter-spacing:2px;">— 白月光 · 非他不可 —</div>
</div>
<!-- ===== 选择白月光 ===== -->
<div id="select-page" class="page">
<div class="select-title">✦ 选择你的 <span>白月光</span> ✦</div>
<div class="select-sub">— 他会在你的世界闪闪发光 —</div>
<div class="select-grid" id="selectGrid">
<!-- 由JS动态生成 -->
</div>
</div>
<!-- ===== 游戏主界面 ===== -->
<div id="game-page" class="page">
<div class="game-header">
<div class="game-stat"><span class="icon">👑</span> 金币 <span class="num gold" id="goldDisplay">1,000,000,000,000</span></div>
<div class="game-stat"><span class="icon">❤️</span> 好感 <span class="num love" id="loveDisplay">0</span></div>
</div>
<div class="game-hero">
<div class="game-hero-avatar" id="heroAvatar">👩💼</div>
<div class="game-hero-info">
<div class="game-hero-name" id="heroName">孙割 <small>✦ 女富豪</small></div>
<div class="game-hero-bar">
<span class="label">❤️ 好感</span>
<div class="track"><div class="fill" id="loveFill" style="width:0%;"></div></div>
<span class="pct" id="lovePercent">0%</span>
</div>
</div>
</div>
<div class="game-chat">
<div class="game-chat-scroll" id="chatScroll">
<!-- 动态消息 -->
</div>
</div>
<div class="game-actions" id="actionButtons">
<button class="btn btn-accept" id="acceptBtn">💎 满足他</button>
<button class="btn btn-reject" id="rejectBtn">✋ 婉拒</button>
</div>
</div>
<!-- ===== 结局页 ===== -->
<div id="ending-page" class="page">
<div class="ending-icon" id="endingIcon">💔</div>
<div class="ending-title" id="endingTitle">缘尽于此</div>
<div class="ending-sub" id="endingSub">故事有了结局</div>
<div class="ending-stats">
<div class="stat"><span class="label">剩余金币</span><span class="value gold" id="endingGold">0</span></div>
<div class="stat"><span class="label">最终好感</span><span class="value love" id="endingLove">0</span></div>
</div>
<div class="ending-story" id="endingStory">你和他走过了这段旅程……</div>
<button class="btn btn-primary" id="restartBtn">✦ 重新开始 ✦</button>
</div>
</div>
<script>
(function() {
// ===================== 配置数据 =====================
// 白月光（男性）候选人 —— 新增演员“苏屿”
const CRUSHES = [{
id: 'lu',
name: '陆沉',
emoji: '🧑💼',
desc: '集团总裁，清冷禁欲',
tag: '高冷',
baseLove: 10,
requests: [
{ cost: 12000000, love: 8, text: '想要一辆限量版跑车，陪我兜风。' },
{ cost: 18000000, love: 12, text: '想去瑞士滑雪，住山顶木屋。' },
{ cost: 25000000, love: 15, text: '为我举办一场私人音乐会。' },
{ cost: 30000000, love: 18, text: '在拍卖会上拍下那枚蓝钻胸针。' },
{ cost: 40000000, love: 22, text: '陪我环游世界，第一站巴黎。' },
{ cost: 50000000, love: 26, text: '收购那家濒临破产的设计师品牌，送给我。' },
]
}, {
id: 'gu',
name: '顾北',
emoji: '👨🎓',
desc: '天才画家，浪漫不羁',
tag: '文艺',
baseLove: 12,
requests: [
{ cost: 10000000, love: 10, text: '想要一套顶级的油画颜料和画布。' },
{ cost: 16000000, love: 14, text: '带我去佛罗伦萨写生一个月。' },
{ cost: 22000000, love: 17, text: '为我办一场个人画展，只邀请我们俩。' },
{ cost: 28000000, love: 20, text: '买下一座私人小岛，作为我的画室。' },
{ cost: 38000000, love: 24, text: '赞助我创作一幅巨型壁画，在市中心。' },
{ cost: 48000000, love: 28, text: '和我一起创作一本艺术画册，全球发行。' },
]
}, {
id: 'shen',
name: '沈辞',
emoji: '🧑🍳',
desc: '米其林主厨，温柔细腻',
tag: '暖男',
baseLove: 8,
requests: [
{ cost: 9000000, love: 7, text: '想要一套定制厨具，我想为你下厨。' },
{ cost: 15000000, love: 11, text: '带我去北海道品尝最新鲜的海产。' },
{ cost: 21000000, love: 15, text: '为我开一家只属于我们的法式餐厅。' },
{ cost: 27000000, love: 18, text: '陪我学习葡萄酒酿造，酿一瓶专属红酒。' },
{ cost: 35000000, love: 22, text: '举办一场私人晚宴，只邀请我最重要的你。' },
{ cost: 45000000, love: 26, text: '和我一起出版一本美食札记，记录我们的味道。' },
]
}, {
id: 'su',
name: '苏屿',
emoji: '🎬',
desc: '当红影帝，深情专一',
tag: '演员',
baseLove: 10,
requests: [
{ cost: 12000000, love: 8, text: '我想要包下整个电影院，只属于我们两个人的午夜场。' },
{ cost: 18000000, love: 11, text: '包下蒙太奇酒店，并且帮我把所有窗户用黑胶带粘上，我不要看到外面的阳光。' },
{ cost: 25000000, love: 14, text: '为我包下一架私人飞机，我想去冰岛看极光。' },
{ cost: 88880000, love: 20, text: '这是彩礼，8888万，一分不能少，我要你明媒正娶。' },
{ cost: 30000000, love: 16, text: '陪我参加电影节，走红毯的时候你要牵紧我的手。' },
{ cost: 40000000, love: 18, text: '在市中心最繁华的LED屏上，循环播放我们的爱情短片。' },
]
}];
// ===================== 游戏状态 =====================
let state = {
gold: 1000000000000, // 1万亿
love: 0,
maxLove: 100,
currentCrush: null,
requestIndex: 0,
isGameOver: false,
totalRequests: 0,
acceptedCount: 0,
rejectedCount: 0,
currentRequest: null,
};
// ===================== 工具函数 =====================
function formatMoney(num) {
return num.toLocaleString('zh-CN');
}
function shuffleArray(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
// 生成花瓣
function createPetals() {
const container = document.getElementById('petals-container');
const symbols = ['🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸', '🌸'];
for (let i = 0; i < 30; i++) {
const el = document.createElement('div');
el.className = 'petal';
el.textContent = symbols[Math.floor(Math.random() * symbols.length)];
el.style.left = Math.random() * 100 + '%';
el.style.fontSize = (12 + Math.random() * 18) + 'px';
el.style.animationDuration = (10 + Math.random() * 20) + 's';
el.style.animationDelay = (Math.random() * 15) + 's';
el.style.opacity = 0.3 + Math.random() * 0.4;
container.appendChild(el);
}
}
createPetals();
// ===================== 页面切换 =====================
function showPage(pageId) {
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.getElementById(pageId).classList.add('active');
}
// ===================== 选择白月光 =====================
function renderSelectPage() {
const grid = document.getElementById('selectGrid');
grid.innerHTML = '';
CRUSHES.forEach(crush => {
const card = document.createElement('div');
card.className = 'select-card';
card.innerHTML = `
<div class="select-avatar">${crush.emoji}</div>
<div class="select-info">
<div class="select-name">${crush.name} <small>${crush.desc}</small></div>
<div class="select-desc">✨ 初始好感 ${crush.baseLove}</div>
</div>
<div class="select-tag">${crush.tag}</div>
`;
card.addEventListener('click', () => selectCrush(crush.id));
grid.appendChild(card);
});
}
function selectCrush(id) {
const crush = CRUSHES.find(c => c.id === id);
if (!crush) return;
// 初始化状态
state.currentCrush = crush;
state.gold = 1000000000000;
state.love = crush.baseLove;
state.requestIndex = 0;
state.isGameOver = false;
state.totalRequests = 0;
state.acceptedCount = 0;
state.rejectedCount = 0;
// 打乱请求顺序
state.currentCrush.requests = shuffleArray([...crush.requests]);
showPage('game-page');
updateUI();
startGame();
}
// ===================== 游戏核心 =====================
function startGame() {
chatScroll.innerHTML = '';
const crush = state.currentCrush;
addSystemMsg(`✨ 你选择了 ${crush.name} 作为你的白月光 ✨`);
addSystemMsg(`💖 初始好感 ${state.love}，努力让他为你倾心吧！`);
nextRequest();
acceptBtn.disabled = false;
rejectBtn.disabled = false;
}
function nextRequest() {
if (state.isGameOver) return;
const requests = state.currentCrush.requests;
if (state.requestIndex >= requests.length) {
endGame(true);
return;
}
state.currentRequest = requests[state.requestIndex];
state.requestIndex++;
const req = state.currentRequest;
const msg = `「${state.currentCrush.name}」${req.text}`;
addChatMessage('left', msg, state.currentCrush.emoji);
const costInfo = `💎 ${formatMoney(req.cost)} 金币 ❤️ +${req.love}`;
addSystemMsg(`📌 满足需求：${costInfo}`);
acceptBtn.disabled = false;
rejectBtn.disabled = false;
updateUI();
}
function acceptRequest() {
if (state.isGameOver) return;
const req = state.currentRequest;
if (!req) return;
if (state.gold < req.cost) {
addSystemMsg('💔 金币不足，无法满足这个要求...');
acceptBtn.disabled = true;
addSystemMsg('⚠️ 金币不足，请点击「婉拒」');
return;
}
state.gold -= req.cost;
state.love += req.love;
state.acceptedCount++;
state.totalRequests++;
if (state.love > state.maxLove) state.love = state.maxLove;
const gainText = `✅ 你满足了「${state.currentCrush.name}」的要求，好感度 +${req.love}！`;
addChatMessage('right', gainText, '👩💼');
updateUI();
if (state.love >= state.maxLove) {
endGame(true);
return;
}
setTimeout(() => { nextRequest(); }, 400);
}
function rejectRequest() {
if (state.isGameOver) return;
const req = state.currentRequest;
if (!req) return;
state.rejectedCount++;
state.totalRequests++;
state.love = Math.max(0, state.love - 3);
const msg = `❌ 你婉拒了「${state.currentCrush.name}」，好感度 -3`;
addChatMessage('right', msg, '👩💼');
updateUI();
if (state.love <= 0) {
endGame(false);
return;
}
setTimeout(() => { nextRequest(); }, 400);
}
// ===================== 结局 =====================
function endGame(success) {
if (state.isGameOver) return;
state.isGameOver = true;
acceptBtn.disabled = true;
rejectBtn.disabled = true;
let icon, title, sub, story;
const crushName = state.currentCrush.name;
const finalLove = state.love;
const finalGold = state.gold;
if (success && state.love >= state.maxLove) {
icon = '💖';
title = '✦ 完美恋人 ✦';
sub = '他彻底为你倾心！';
story = `你用真心与财富打动了${crushName}，他愿意与你携手共度余生。你们的故事，成为整个上流圈层的传奇。`;
} else if (state.love <= 0) {
icon = '💔';
title = '缘尽人散';
sub = '他离开了你的世界';
story = `一次次婉拒让${crushName}心灰意冷，他选择从你的生活中消失。或许，有些缘分注定只能擦肩。`;
} else if (state.requestIndex >= state.currentCrush.requests.length && state.love < state.maxLove) {
icon = '🌙';
title = '未竟之约';
sub = '故事还在继续，但你们未能走到最后';
story = `你陪${crushName}走过了所有他提出的旅程，但最终好感度未能圆满。他依然感激你，但爱情，终究差了一点火候。`;
} else {
icon = '🌹';
title = '未完待续';
sub = '你们的故事尚未落幕';
story = `无论结局如何，这段与${crushName}的邂逅，都将是你人生中最绚烂的一章。或许未来，还会有新的可能。`;
}
endingIcon.textContent = icon;
endingTitle.innerHTML = title;
endingSub.textContent = sub;
endingGold.textContent = formatMoney(finalGold);
endingLove.textContent = finalLove;
endingStory.textContent = story;
showPage('ending-page');
}
// ===================== UI更新 =====================
function updateUI() {
goldDisplay.textContent = formatMoney(state.gold);
loveDisplay.textContent = state.love;
const pct = Math.min(100, (state.love / state.maxLove) * 100);
loveFill.style.width = pct + '%';
lovePercent.textContent = Math.round(pct) + '%';
if (state.currentCrush) {
heroAvatar.textContent = '👩💼';
heroName.innerHTML = `孙割 <small>✦ 女富豪</small>`;
}
}
// ===================== 消息系统 =====================
function addChatMessage(type, text, emoji = '') {
const div = document.createElement('div');
div.className = `chat-msg ${type}`;
if (type === 'left' && emoji) {
div.innerHTML = `<span class="name-tag">${emoji} ${state.currentCrush.name}</span> ${text}`;
} else {
div.textContent = text;
}
chatScroll.appendChild(div);
chatScroll.scrollTop = chatScroll.scrollHeight;
}
function addSystemMsg(text) {
const div = document.createElement('div');
div.className = 'chat-msg system';
div.textContent = text;
chatScroll.appendChild(div);
chatScroll.scrollTop = chatScroll.scrollHeight;
}
// ===================== 事件绑定 =====================
document.getElementById('startBtn').addEventListener('click', () => {
renderSelectPage();
showPage('select-page');
});
acceptBtn.addEventListener('click', acceptRequest);
rejectBtn.addEventListener('click', rejectRequest);
document.getElementById('restartBtn').addEventListener('click', () => {
showPage('title-page');
state.gold = 1000000000000;
state.love = 0;
state.currentCrush = null;
state.requestIndex = 0;
state.isGameOver = false;
state.totalRequests = 0;
state.acceptedCount = 0;
state.rejectedCount = 0;
state.currentRequest = null;
chatScroll.innerHTML = '';
updateUI();
});
// ===================== 初始化 =====================
showPage('title-page');
updateUI();
})();
</script>
</body>
</html>Game Source: 孙割人生模拟器 · 千金风
Creator: FlashCobra67
Libraries: none
Complexity: complex (1188 lines, 42.6 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-flashcobra67" to link back to the original. Then publish at arcadelab.ai/publish.