Friendship Journey - Build Your Best Friend

by StormPilot69
189 lines9.3 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, sans-serif}
html,body{width:100%;height:100%;overflow:hidden}
#gameWrap{width:100vw;height:100vh;position:relative;background:#f8f0f6}
/* Background Scenes */
.scene-start{width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(#d4d4e8,#b8b8d0)}
.scene-friend{width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(#ffd6e8,#fff0f7);opacity:0;transition:opacity 2s}
/* Character Styling (Large Clear Girls) */
.playerGirl{width:220px;position:absolute;bottom:100px;left:120px}
.strangeGirl{width:220px;position:absolute;bottom:100px;right:120px}
/* Floating Tip Robot */
.tipRobot{width:140px;position:absolute;top:40px;right:60px;animation:float 2s infinite ease-in-out}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
/* Affection Progress Bar */
.affectionBox{position:absolute;top:30px;left:30px;width:420px;height:50px;background:#ddd;border-radius:25px;border:3px solid #ff66aa}
.affectionFill{height:100%;width:0%;background:linear-gradient(#ff66aa,#ff99cc);border-radius:25px;transition:width 0.8s ease}
.affectionText{position:absolute;top:12px;left:160px;font-size:22px;font-weight:bold;color:#222}
/* Stage Dialogue Box */
.dialogBox{position:absolute;bottom:240px;left:50%;transform:translateX(-50%);width:800px;padding:24px 32px;background:rgba(255,255,255,0.85);border:3px solid #ff88bb;border-radius:16px;text-align:center}
.stageTitle{font-size:28px;color:#cc2266;margin-bottom:12px;font-weight:bold}
.stageDesc{font-size:20px;color:#333;line-height:1.7}
/* Action Button */
.nextBtn{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);padding:14px 42px;font-size:24px;background:#ff66aa;color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:bold}
.nextBtn:hover{background:#ff4499}
/* Robot Virtue Tip Popup */
.virtueTip{position:absolute;top:180px;right:40px;width:380px;padding:18px;background:#fff;border:2px solid #44aaff;border-radius:12px;font-size:19px;display:none;line-height:1.6}
/* Ending Full Screen Panel */
.endingPanel{width:100%;height:100%;background:rgba(0,0,0,0.72);position:absolute;top:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:40px}
.endMainText{font-size:48px;color:#ffbbd6;margin-bottom:20px;font-weight:bold}
.endLearnList{font-size:24px;line-height:2;font-weight:500;margin-bottom:30px;max-width:900px}
.restartBtn{padding:16px 48px;font-size:26px;background:#ff77bb;border:none;border-radius:10px;color:#fff;cursor:pointer}
.fullscreenBtn{position:absolute;top:30px;right:220px;padding:10px 20px;font-size:18px;background:rgba(255,255,255,0.3);border:2px solid #ff66aa;border-radius:6px;cursor:pointer}
</style>
</head>
<body>
<div id="gameWrap">
    <button class="fullscreenBtn" onclick="openFullscreen()">Full Screen</button>
    <!-- Affection Bar -->
    <div class="affectionBox">
        <div class="affectionFill" id="affFill"></div>
        <div class="affectionText">Friendship Level: <span id="affNum">0</span>% / 100%</div>
    </div>
    <!-- Two Girl Characters -->
    <img class="playerGirl" src="https://assets.arcadelab.ai/assets/characters/girl-student.svg">
    <img class="strangeGirl" src="https://assets.arcadelab.ai/assets/characters/girl-friend.svg">
    <!-- Tip Robot -->
    <img class="tipRobot" src="https://assets.arcadelab.ai/assets/robots/cute-mini-robot.svg">
    <!-- Virtue Hint Popup -->
    <div class="virtueTip" id="virtueTipBox"></div>
    <!-- Background Layers -->
    <div class="scene-start"></div>
    <div class="scene-friend" id="happyBg"></div>
    <!-- Stage Dialogue Area -->
    <div class="dialogBox">
        <div class="stageTitle" id="stageHead">Stage 1: Start a casual chat</div>
        <div class="stageDesc" id="stageContent">You talk gently with the strange girl, listen to her small stories. You show empathy for her feelings.<br>Friendship +10%</div>
    </div>
    <!-- Next Stage Button -->
    <button class="nextBtn" id="stageButton" onclick="nextStage()">Finish This Activity → Next Stage</button>
    <!-- Final Ending Screen -->
    <div class="endingPanel" id="endScreen">
        <div class="endMainText">Congratulations! You two are Best Girlfriends!</div>
        <div class="endLearnList">
            Key Qualities of a Good Friend:<br>
            1. Empathy — Understand other people’s feelings<br>
            2. Be a Good Listener — Care about others’ words<br>
            3. Loyalty — Stand by your friend all the time<br>
            4. Trustworthy & Reliable — Keep promises and secrets
        </div>
        <button class="restartBtn" onclick="restartGame()">Play Again</button>
    </div>
</div>

<script>
// Game Core Data
const stageData = [
    {
        title: "Stage 1: Casual Friendly Chat",
        text: "You talk gently with the strange girl, listen carefully to her stories and show empathy for her mood. Friendship +10%",
        virtue: "Virtue Learned: Empathy & Good Listener — Try to feel how your friend feels."
    },
    {
        title: "Stage 2: Drink Coffee Together",
        text: "You invite her for coffee, share your daily life and keep all her small secrets safe. Friendship +10%",
        virtue: "Virtue Learned: Trustworthy — Never tell others your friend’s private things."
    },
    {
        title: "Stage 3: Comfort Her When She Is Sad",
        text: "She feels upset, you stay beside her quietly and listen to all her worries patiently. Friendship +10%",
        virtue: "Virtue Learned: Empathy & Good Listener — Comfort friends in hard times."
    },
    {
        title: "Stage 4: Go Shopping Side by Side",
        text: "You respect her ideas, do not force your opinions on her, and always keep your promises to meet on time. Friendship +10%",
        virtue: "Virtue Learned: Reliable & Trustworthy — Keep every appointment on time."
    },
    {
        title: "Stage 5: Help Her Finish School Work",
        text: "You spend spare time helping her with difficult homework, never leave her alone with trouble. Friendship +10%",
        virtue: "Virtue Learned: Loyalty — Give support when your friend meets difficulty."
    },
    {
        title: "Stage 6: Watch Movie Together",
        text: "You listen to her favorite movie ideas and talk about your feelings honestly with each other. Friendship +10%",
        virtue: "Virtue Learned: Good Listener — Respect your friend’s hobbies and thoughts."
    },
    {
        title: "Stage 7: Defend Her In Front Of Others",
        text: "Someone says bad words about her, you stand up and protect your friend sincerely. Friendship +10%",
        virtue: "Virtue Learned: Loyalty — Always support and protect your best friend."
    },
    {
        title: "Stage 8: Share Snacks & Small Gifts",
        text: "You share your favorite food with her and remember her small preferences carefully. Friendship +10%",
        virtue: "Virtue Learned: Empathy — Remember tiny details your friend likes."
    },
    {
        title: "Stage 9: Apologize When You Make Mistakes",
        text: "You accidentally argue with her, you take the first step to say sorry and explain your true thoughts. Friendship +10%",
        virtue: "Virtue Learned: Trustworthy — Be honest and brave to fix mistakes."
    },
    {
        title: "Stage 10: Plan A Weekend Trip Together",
        text: "You trust each other fully, share all your dreams and make future plans side by side. Friendship +10%",
        virtue: "Virtue Learned: All Qualities Combined: Empathy, Listener, Loyalty, Trustworthy."
    }
];

// Page Elements
const affFill = document.getElementById("affFill");
const affNum = document.getElementById("affNum");
const stageHead = document.getElementById("stageHead");
const stageContent = document.getElementById("stageContent");
const virtueTipBox = document.getElementById("virtueTipBox");
const happyBg = document.getElementById("happyBg");
const endScreen = document.getElementById("endScreen");
const stageBtn = document.getElementById("stageButton");

let currentStage = 0;
let affection = 0;

// Fullscreen Function
function openFullscreen(){
    const gameDom = document.getElementById("gameWrap");
    if(!document.fullscreenElement) gameDom.requestFullscreen();
    else document.exitFullscreen();
}

// Show Robot Virtue Tip
function showVirtueTip(text){
    virtueTipBox.innerText = text;
    virtueTipBox.style.display = "block";
    setTimeout(()=>virtueTipBox.style.display = "none", 2600);
}

// Switch Next Stage
function nextStage(){
    if(currentStage >= stageData.length) return;
    // Add 10% Affection
    affection += 10;
    affNum.innerText = affection;
    affFill.style.width = affection + "%";
    // Show Virtue Tip from Robot
    showVirtueTip(stageData[currentStage].virtue);
    // Judge if reach full friendship
    if(affection >= 100){
        happyBg.style.opacity = 1;
        stageBtn.style.display = "none";
        setTimeout(()=>endScreen.style.display = "flex", 1800);
        return;
    }
    // Load Next Stage Text
    currentStage++;
    stageHead.innerText = stageData[currentStage].title;
    stageContent.innerText = stageData[currentStage].text;
}

// Restart Whole Game
function restartGame(){
    location.reload();
}
</script>
</body>
</html>
Game Source: Friendship Journey - Build Your Best Friend

Creator: StormPilot69
Libraries: none
Complexity: moderate (189 lines, 9.3 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-journey-build-your-best-frien-stormpilot69" to link back to the original. Then publish at arcadelab.ai/publish.