粉色少女互动GALGAME
by LunarNinja79231 lines7.7 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粉色少女互动GALGAME</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
}
body{
background: #ffe6f2;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.game-box{
width: 100%;
max-width: 600px;
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 15px #ffb6d9;
overflow: hidden;
border: 2px solid #ffcce5;
}
.avatar-area{
height: 320px;
background: #ffd9ec;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.avatar{
width: 280px;
height: 280px;
border-radius: 10px;
background: #ffc8e0;
display: flex;
justify-content: center;
align-items: center;
color: #aa4477;
font-size: 18px;
}
.love-bar{
padding: 12px 20px;
background: #fff0f7;
border-bottom: 1px solid #ffcce5;
}
.love-text{
color: #dd5588;
font-size: 16px;
margin-bottom: 6px;
}
.progress{
width: 100%;
height: 12px;
background: #f8d8e8;
border-radius: 6px;
overflow: hidden;
}
.progress-fill{
height: 100%;
width: 0%;
background: #ff66aa;
border-radius: 6px;
transition: width 0.3s ease;
}
.dialog-area{
padding: 20px;
min-height: 120px;
font-size: 16px;
line-height: 1.6;
color: #333;
}
.option-area{
padding: 10px 20px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.opt-btn{
padding: 12px;
border: none;
background: #ffb6d9;
color: #fff;
border-radius: 10px;
font-size: 15px;
cursor: pointer;
transition: all 0.2s;
}
.opt-btn:hover{
background: #ff88bb;
transform: scale(1.02);
}
.end-tip{
text-align: center;
padding: 30px;
font-size: 18px;
color: #dd4477;
display: none;
}
</style>
</head>
<body>
<div class="game-box">
<div class="avatar-area">
<div class="avatar">粉色短发少女</div>
</div>
<div class="love-bar">
<div class="love-text">好感度：<span id="love-val">0</span> / 100</div>
<div class="progress">
<div class="progress-fill" id="progress-bar"></div>
</div>
</div>
<div class="dialog-area" id="dialog">
少女轻轻歪头看着你，脸颊微微泛红，小声和你打着招呼。
</div>
<div class="option-area" id="option-box">
<button class="opt-btn" onclick="select(1)">温柔回应问候</button>
<button class="opt-btn" onclick="select(2)">有点害羞地躲开视线</button>
<button class="opt-btn" onclick="select(3)">随便敷衍一句</button>
</div>
<div class="end-tip" id="end-box"></div>
</div>
<script>
let love = 0;
let step = 0;
const dialog = document.getElementById('dialog');
const optionBox = document.getElementById('option-box');
const loveVal = document.getElementById('love-val');
const progressBar = document.getElementById('progress-bar');
const endBox = document.getElementById('end-box');
// 更新好感度显示
function updateLove(){
loveVal.innerText = love;
progressBar.style.width = love + '%';
if(love >= 100) endGame(true);
if(love <= -20) endGame(false);
}
function select(num){
step++;
if(step === 1){
if(num === 1){
love += 25;
dialog.innerText = "听到你的温柔回应，她眼睛亮了起来，开心地和你聊起日常。";
}else if(num === 2){
love += 10;
dialog.innerText = "她有点疑惑地看着你，脸颊更红了。";
}else{
love -= 15;
dialog.innerText = "她微微失落，小声不再说话。";
}
}else if(step === 2){
if(num === 1){
love += 30;
dialog.innerText = "她笑着收下你的好意，对你好感大幅提升。";
}else if(num === 2){
love += 5;
dialog.innerText = "她理解你的腼腆，温柔地笑了笑。";
}else{
love -= 20;
dialog.innerText = "她有些难过，觉得你并不在意她。";
}
}else if(step === 3){
if(num === 1){
love += 35;
dialog.innerText = "她彻底敞开心扉，愿意和你亲近下去。";
}else if(num === 2){
love += 15;
dialog.innerText = "她慢慢放下拘谨，愿意慢慢相处。";
}else{
love -= 25;
dialog.innerText = "她失望地低下头，不想继续交流了。";
}
}
updateLove();
// 替换选项
optionBox.innerHTML = '';
if(step < 3){
let btn1 = document.createElement('button');
btn1.className = 'opt-btn';
btn1.innerText = '主动关心她';
btn1.onclick = ()=>select(1);
let btn2 = document.createElement('button');
btn2.className = 'opt-btn';
btn2.innerText = '保持安静陪伴';
btn2.onclick = ()=>select(2);
let btn3 = document.createElement('button');
btn3.className = 'opt-btn';
btn3.innerText = '不耐烦地打断对话';
btn3.onclick = ()=>select(3);
optionBox.appendChild(btn1);
optionBox.appendChild(btn2);
optionBox.appendChild(btn3);
}else{
// 三轮对话结束判定结局
if(love >= 70){
endGame(true);
}else if(love >= 30){
endGame(null);
}else{
endGame(false);
}
}
}
function endGame(isGood){
optionBox.style.display = 'none';
dialog.style.display = 'none';
endBox.style.display = 'block';
if(isGood === true){
endBox.innerText = "✨好感度拉满！少女和你顺利开启甜蜜羁绊，达成圆满结局！";
}else if(isGood === false){
endBox.innerText = "💔好感度过低，少女选择慢慢疏远你，达成普通结局。";
}else{
endBox.innerText = "🤍好感度适中，你们成为了很好的朋友，达成友情结局。";
}
}
</script>
</body>
</html>
Game Source: 粉色少女互动GALGAME
Creator: LunarNinja79
Libraries: none
Complexity: complex (231 lines, 7.7 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: galgame-lunarninja79" to link back to the original. Then publish at arcadelab.ai/publish.