Friendship Mystery Choice Game
by BravePhoenix59273 lines11.1 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial}
html,body{width:100%;height:100%;overflow:hidden}
#game{width:100vw;height:100vh;position:relative;background:#f4f4f8}
/* Friendship Progress Bar */
.affection-bar{
position:absolute;top:20px;left:20px;width:450px;height:48px;background:#ddd;border-radius:30px;border:3px solid #666;
}
.fill{
height:100%;width:0%;background:linear-gradient(#ff6096,#ffb6c1);border-radius:30px;transition:width 0.6s;
}
.bar-text{position:absolute;top:10px;left:170px;font-size:22px;font-weight:bold}
/* Two Girl Characters */
.me{width:200px;position:absolute;bottom:80px;left:100px}
.stranger-girl{width:200px;position:absolute;bottom:80px;right:100px}
/* Floating Tip Robot */
.robot{width:130px;position:absolute;top:25px;right:30px;animation:float 2s infinite ease-in-out}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* Scene Text Area */
.scene-box{
position:absolute;top:130px;left:50%;transform:translateX(-50%);width:850px;
background:rgba(255,255,255,0.95);border:3px solid #888;border-radius:16px;padding:24px 30px;text-align:center;
}
.scene-title{font-size:28px;color:#222;margin-bottom:12px;font-weight:bold}
.scene-desc{font-size:20px;line-height:1.7;color:#333}
/* Choice Buttons Container */
.option-wrap{
position:absolute;bottom:60px;left:50%;transform:translateX(-50%);display:flex;gap:20px;
}
.opt-btn{
width:260px;padding:18px 12px;font-size:18px;border:none;border-radius:10px;cursor:pointer;color:#fff;font-weight:bold;
}
/* Virtue Tip Popup */
.tip-pop{
position:absolute;top:200px;right:40px;width:360px;padding:18px;background:#fff;border:2px solid #40a9ff;border-radius:12px;font-size:18px;display:none;line-height:1.6;
}
/* Ending Screen */
.ending{
width:100%;height:100%;background:rgba(0,0,0,0.75);position:absolute;top:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:40px;
}
.end-title{font-size:46px;color:#ffc6d9;margin-bottom:20px}
.learn-list{font-size:23px;line-height:1.9;margin-bottom:30px;max-width:950px}
.restart{padding:16px 46px;font-size:24px;background:#ff78a8;border:none;border-radius:10px;color:#fff;cursor:pointer}
.fullscreen-btn{position:absolute;top:22px;right:180px;padding:9px 18px;font-size:17px;background:rgba(255,255,255,0.3);border:2px solid #666;border-radius:6px;cursor:pointer}
</style>
</head>
<body>
<div id="game">
<button class="fullscreen-btn" onclick="fullScreen()">Full Screen</button>
<!-- Friendship Progress Bar -->
<div class="affection-bar">
<div class="fill" id="fillBar"></div>
<div class="bar-text">Friendship Level: <span id="num">0</span>% / 100%</div>
</div>
<!-- Two Female Characters -->
<img class="me" src="https://assets.arcadelab.ai/assets/characters/girl-student.svg">
<img class="stranger-girl" src="https://assets.arcadelab.ai/assets/characters/girl-friend.svg">
<img class="robot" src="https://assets.arcadelab.ai/assets/robots/cute-mini-robot.svg">
<div class="tip-pop" id="robotTip"></div>
<!-- Scene Text Box -->
<div class="scene-box">
<div class="scene-title" id="title"></div>
<div class="scene-desc" id="desc"></div>
</div>
<!-- 3 Random Order Choice Buttons -->
<div class="option-wrap" id="optionArea">
<button class="opt-btn" id="b1" onclick="pick(0)"></button>
<button class="opt-btn" id="b2" onclick="pick(1)"></button>
<button class="opt-btn" id="b3" onclick="pick(2)"></button>
</div>
<!-- Final Ending Page -->
<div class="ending" id="endPage">
<div class="end-title">Congratulations! You two become best girlfriends!</div>
<div class="learn-list">
Key Qualities of a True Friend:<br>
1. Empathy — Understand your friend’s feelings<br>
2. Good Listener — Listen carefully without interruption<br>
3. Loyalty — Support and defend your friend<br>
4. Trustworthy & Reliable — Keep promises and secrets
</div>
<button class="restart" onclick="resetGame()">Play Again</button>
</div>
</div>
<script>
// All scenes, each with 3 options (random shuffle order every round)
const scenes = [
{
title: "Scene 1: Meet a crying girl in the elevator",
desc: "A strange girl next to you is crying and has no tissue. What do you choose to do?",
choices: [
{text: "Stare at her quietly and do nothing", score: -5},
{text: "Give her tissue and ask what troubles her", score: 10},
{text: "Hand her tissue without asking anything", score: 5}
],
lesson: "Virtue: Empathy & Good Listener — Care about other people’s feelings."
},
{
title: "Scene 2: You meet her after school",
desc: "You run into her outside the school gate, you want to build closer friendship.",
choices: [
{text: "Walk straight past without greeting", score: -5},
{text: "Say quick hi then rush home", score: 5},
{text: "Invite her for coffee and listen to her daily stories", score: 10}
],
lesson: "Virtue: Trustworthy — Spend time to know your new friend sincerely."
},
{
title: "Scene 3: She fails her math exam",
desc: "She tells you she feels really upset about her bad exam result.",
choices: [
{text: "Laugh and say she didn’t study hard enough", score: -8},
{text: "Sit with her and listen to all her worries", score: 10},
{text: "Briefly say it’s not a big deal and change topic", score: 5}
],
lesson: "Virtue: Empathy & Loyalty — Accompany friends through hard moments."
},
{
title: "Scene 4: Classmates gossip bad things about her",
desc: "Other students talk mean words about her behind her back.",
choices: [
{text: "Stay silent and pretend you hear nothing", score: 3},
{text: "Speak up and protect her from bad comments", score: 10},
{text: "Join them and share negative ideas about her", score: -10}
],
lesson: "Virtue: Loyalty — Always stand on your friend’s side."
},
{
title: "Scene 5: She shares a private secret with you",
desc: "She tells you a personal secret and begs you not to tell anyone else.",
choices: [
{text: "Promise you will never tell anybody her secret", score: 10},
{text: "Agree but tell your roommate later that night", score: -6},
{text: "Spread her secret to all your classmates next day", score: -12}
],
lesson: "Virtue: Trustworthy — Keep your friend’s private information safe."
},
{
title: "Scene 6: You have an argument caused by your mistake",
desc: "You two quarrel, and the fault belongs to you.",
choices: [
{text: "Refuse to talk to her for several days", score: -7},
{text: "Apologize honestly and communicate calmly", score: 10},
{text: "Wait for her to take the first step to make peace", score: 4}
],
lesson: "Virtue: Reliable & Honest — Take responsibility for your own mistakes."
},
{
title: "Scene 7: You make a weekend hanging plan",
desc: "You set a time to hang out together this Saturday afternoon.",
choices: [
{text: "Cancel the plan randomly at the last minute", score: -9},
{text: "Arrive on time and text to confirm in advance", score: 10},
{text: "Be late for 20 minutes without sending a message", score: -4}
],
lesson: "Virtue: Reliable — Keep all your appointments and promises."
},
{
title: "Scene 8: She brings homemade cookies for you",
desc: "She remembers your favorite flavor and shares snacks with you.",
choices: [
{text: "Refuse her cookies rudely without thanks", score: -6},
{text: "Thank her warmly and share your snacks in return", score: 10},
{text: "Take the food and walk away without saying thanks", score: 2}
],
lesson: "Virtue: Empathy — Cherish small kindness from your friends."
},
{
title: "Scene 9: She cannot finish difficult homework",
desc: "She asks you to help her with hard school exercises after class.",
choices: [
{text: "Refuse her request and leave the classroom quickly", score: -7},
{text: "Give her answer sheet directly without explaining", score: 1},
{text: "Stay after school and teach her step by step patiently", score: 10}
],
lesson: "Virtue: Loyalty — Offer real and useful support to your friend."
},
{
title: "Scene 10: Chat about your future dreams together",
desc: "You talk about your worries, hopes and life plans with each other.",
choices: [
{text: "Listen carefully and share your true inner thoughts", score: 10},
{text: "Reply only with short one-word answers", score: 3},
{text: "Cut her words off and talk only about yourself", score: -6}
],
lesson: "Virtue: All core friendship virtues combined together."
}
];
// Random button color pool (no fixed good/bad color rule)
const colorList = ["#3498db","#9b59b6","#e67e22","#1abc9c","#c0392b","#27ae60","#7f8c8d"];
let currentSceneIdx = 0;
let friendship = 0;
// DOM Elements
const fillBar = document.getElementById("fillBar");
const numText = document.getElementById("num");
const titleEl = document.getElementById("title");
const descEl = document.getElementById("desc");
const btnArr = [document.getElementById("b1"),document.getElementById("b2"),document.getElementById("b3")];
const robotTip = document.getElementById("robotTip");
const endPage = document.getElementById("endPage");
const optionBox = document.getElementById("optionArea");
// Shuffle array random order
function shuffle(arr){
let copy = [...arr];
for(let i=copy.length-1;i>0;i--){
const j = Math.floor(Math.random()*(i+1));
[copy[i],copy[j]] = [copy[j],copy[i]];
}
return copy;
}
// Load & refresh scene, shuffle options + random button colors
function loadScene(index){
const s = scenes[index];
titleEl.innerText = s.title;
descEl.innerText = s.desc;
// Shuffle three options randomly every time
const shuffledOpts = shuffle(s.choices);
// Random color for each button
const shuffledColors = shuffle(colorList);
for(let i=0;i<3;i++){
btnArr[i].innerText = shuffledOpts[i].text;
btnArr[i].style.background = shuffledColors[i];
btnArr[i].dataset.score = shuffledOpts[i].score;
}
}
// Player click button choice
function pick(btnIndex){
const score = Number(btnArr[btnIndex].dataset.score);
friendship = Math.max(0, friendship + score);
numText.innerText = friendship;
fillBar.style.width = friendship + "%";
// Show virtue learning tip
robotTip.innerText = scenes[currentSceneIdx].lesson;
robotTip.style.display = "block";
setTimeout(()=>robotTip.style.display = "none", 2800);
// Reach full friendship
if(friendship >= 100){
optionBox.style.display = "none";
setTimeout(()=>endPage.style.display = "flex",1600);
return;
}
// Next scene
currentSceneIdx++;
loadScene(currentSceneIdx);
}
// Full screen switch
function fullScreen(){
const gameDom = document.getElementById("game");
if(!document.fullscreenElement) gameDom.requestFullscreen();
else document.exitFullscreen();
}
// Restart whole game
function resetGame(){
location.reload();
}
// Initialize first scene when game loads
loadScene(0);
</script>
</body>
</html>Game Source: Friendship Mystery Choice Game
Creator: BravePhoenix59
Libraries: none
Complexity: complex (273 lines, 11.1 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: friendship-mystery-choice-game-bravephoenix59" to link back to the original. Then publish at arcadelab.ai/publish.