Friendship Choice Game
by StormPilot69293 lines10.5 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 #ff78a8;
}
.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 Robot Tip */
.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 Box */
.scene-box{
position:absolute;top:130px;left:50%;transform:translateX(-50%);width:850px;
background:rgba(255,255,255,0.9);border:3px solid #ff8fb8;border-radius:16px;padding:24px 30px;text-align:center;
}
.scene-title{font-size:28px;color:#c82b60;margin-bottom:12px;font-weight:bold}
.scene-desc{font-size:20px;line-height:1.7;color:#222}
/* Choice Buttons - Clickable Options */
.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;
}
.opt1{background:#42b983}
.opt2{background:#f7b733}
.opt3{background:#e74c3c}
/* Robot Learning 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 #ff78a8;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 Girls -->
<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">
<!-- Tip Robot -->
<img class="robot" src="https://assets.arcadelab.ai/assets/robots/cute-mini-robot.svg">
<div class="tip-pop" id="robotTip"></div>
<!-- Scene Story Text -->
<div class="scene-box">
<div class="scene-title" id="title">Scene 1: Meet a crying girl in the elevator</div>
<div class="scene-desc" id="desc">You take the elevator alone. A strange girl stands beside you, she is crying and has no tissue to wipe her tears. What will you do?</div>
</div>
<!-- THREE CLICKABLE CHOICE BUTTONS -->
<div class="option-wrap" id="optionArea">
<button class="opt-btn opt1" onclick="pickChoice(1)">1. Hand tissue & ask if she is okay</button>
<button class="opt-btn opt2" onclick="pickChoice(2)">2. Only give tissue, do not talk</button>
<button class="opt-btn opt3" onclick="pickChoice(3)">3. Ignore her and look at your phone</button>
</div>
<!-- Final Ending Screen -->
<div class="ending" id="endPage">
<div class="end-title">Congratulations! You become best girlfriends!</div>
<div class="learn-list">
Qualities of a good friend:<br>
1. Empathy – Understand friends’ feelings<br>
2. Good Listener – Listen patiently<br>
3. Loyalty – Protect and support friends<br>
4. Trustworthy & Reliable – Keep promises and secrets
</div>
<button class="restart" onclick="resetGame()">Play Again</button>
</div>
</div>
<script>
// All 10 scenes with 3 choices each
const sceneList = [
{
title: "Scene 1: Meet a crying girl in the elevator",
desc: "You take the elevator alone. A strange girl stands beside you, she is crying and has no tissue to wipe her tears. What will you do?",
c1: "1. Hand tissue & ask if she is okay",
c2: "2. Only give tissue, do not talk",
c3: "3. Ignore her and look at your phone",
score1: 10,
score2: 5,
score3: -5,
lesson: "Virtue: Empathy & Good Listener — Show care for others’ feelings."
},
{
title: "Scene 2: Meet her outside the building",
desc: "You see her again after class. You want to get closer to her.",
c1: "1. Invite her for coffee and listen to her stories",
c2: "2. Say a quick hello then leave",
c3: "3. Walk past without greeting",
score1: 10,
score2: 5,
score3: -5,
lesson: "Virtue: Trustworthy — Spend time knowing your friend."
},
{
title: "Scene 3: She fails her exam and feels upset",
desc: "The girl tells you she gets a bad test score and feels sad.",
c1: "1. Listen carefully and cheer her up",
c2: "2. Say ‘It’s not a big deal’ quickly",
c3: "3. Laugh at her bad grade",
score1: 10,
score2: 5,
score3: -8,
lesson: "Virtue: Empathy & Loyalty — Stay with friends when they are hurt."
},
{
title: "Scene 4: Classmates talk bad things about her",
desc: "Other students speak unkind words about her behind her back.",
c1: "1. Defend her and stop their bad words",
c2: "2. Stay silent and do nothing",
c3: "3. Join them to talk about her",
score1: 10,
score2: 3,
score3: -10,
lesson: "Virtue: Loyalty — Always stand by your friend."
},
{
title: "Scene 5: She shares a private secret with you",
desc: "She tells you a personal secret and asks you not to tell anyone.",
c1: "1. Promise to keep her secret forever",
c2: "2. Agree but tell your roommate later",
c3: "3. Spread her secret to all classmates",
score1: 10,
score2: -6,
score3: -12,
lesson: "Virtue: Trustworthy — Never leak your friend’s privacy."
},
{
title: "Scene 6: You argue because of your mistake",
desc: "You two fight, and it is your fault.",
c1: "1. Say sorry sincerely and talk calmly",
c2: "2. Wait for her to apologize first",
c3: "3. Stop talking to her for many days",
score1: 10,
score2: 4,
score3: -7,
lesson: "Virtue: Reliable & Honest — Take responsibility for mistakes."
},
{
title: "Scene 7: You plan a weekend hangout",
desc: "You make an appointment to hang out together this Saturday.",
c1: "1. Arrive on time and text early to confirm",
c2: "2. Be 20 minutes late without message",
c3: "3. Cancel the plan last minute randomly",
score1: 10,
score2: -4,
score3: -9,
lesson: "Virtue: Reliable — Keep all your promises."
},
{
title: "Scene 8: She brings you homemade snacks",
desc: "She shares her favorite food and remembers your taste.",
c1: "1. Thank her warmly and share your snacks too",
c2: "2. Take food without any thanks",
c3: "3. Refuse her snacks rudely",
score1: 10,
score2: 2,
score3: -6,
lesson: "Virtue: Empathy — Value small kindness from friends."
},
{
title: "Scene 9: She needs help with homework",
desc: "She cannot finish hard exercises and asks you for help.",
c1: "1. Stay after school and teach her step by step",
c2: "2. Only give her answer sheet directly",
c3: "3. Refuse and leave quickly",
score1: 10,
score2: 1,
score3: -7,
lesson: "Virtue: Loyalty — Offer real help to your friend."
},
{
title: "Scene 10: Talk about your future dreams",
desc: "You chat about hopes, worries and life plans together.",
c1: "1. Listen deeply and share your true feelings",
c2: "2. Reply only with short simple words",
c3: "3. Change topic and ignore her words",
score1: 10,
score2: 3,
score3: -6,
lesson: "Virtue: All good friendship qualities combined."
}
];
// Page Elements
const fillBar = document.getElementById("fillBar");
const numText = document.getElementById("num");
const titleDom = document.getElementById("title");
const descDom = document.getElementById("desc");
const optBox = document.getElementById("optionArea");
const robotTip = document.getElementById("robotTip");
const endPage = document.getElementById("endPage");
let currentScene = 0;
let friendshipValue = 0;
// Full Screen Function
function fullScreen(){
const gameDom = document.getElementById("game");
if(!document.fullscreenElement) gameDom.requestFullscreen();
else document.exitFullscreen();
}
// Show virtue lesson popup
function showLessonTip(text){
robotTip.innerText = text;
robotTip.style.display = "block";
setTimeout(()=>robotTip.style.display = "none", 2800);
}
// Player click choice 1 / 2 / 3
function pickChoice(choiceNum){
const thisScene = sceneList[currentScene];
let addPoints = 0;
if(choiceNum === 1) addPoints = thisScene.score1;
if(choiceNum === 2) addPoints = thisScene.score2;
if(choiceNum === 3) addPoints = thisScene.score3;
// Update friendship percentage, minimum 0
friendshipValue = Math.max(0, friendshipValue + addPoints);
numText.innerText = friendshipValue;
fillBar.style.width = friendshipValue + "%";
// Pop up learning tip from robot
showLessonTip(thisScene.lesson);
// Reach 100% friendship → ending screen
if(friendshipValue >= 100){
optBox.style.display = "none";
setTimeout(()=>endPage.style.display = "flex", 1600);
return;
}
// Move to next scene
currentScene = currentScene + 1;
refreshSceneUI(currentScene);
}
// Refresh scene text & three choice buttons
function refreshSceneUI(index){
const s = sceneList[index];
titleDom.innerText = s.title;
descDom.innerText = s.desc;
optBox.children[0].innerText = s.c1;
optBox.children[1].innerText = s.c2;
optBox.children[2].innerText = s.c3;
}
// Restart entire game
function resetGame(){
location.reload();
}
</script>
</body>
</html>Game Source: Friendship Choice Game
Creator: StormPilot69
Libraries: none
Complexity: complex (293 lines, 10.5 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-choice-game-stormpilot69" to link back to the original. Then publish at arcadelab.ai/publish.