Friendship Mystery Choice Game

by StormPilot69
88 lines6.8 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;
}
/* Final Score 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}
.score-show{font-size:60px;margin:15px 0;color:#fff}
.rank-text{font-size:30px;margin-bottom:30px;color:#ffdd77}
.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 Score Ending Page -->
  <div class="ending" id="endPage">
    <div class="end-title">All 10 Scenes Completed!</div>
    <div class="score-show">Your Final Score: <span id="finalScore">0</span>%</div>
    <div class="rank-text" id="rankText"></div>
    <button class="restart" onclick="resetGame()">Play Again</button>
  </div>
</div>

<script>
// Sound Effects
const correctSound = new Audio("data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8dRghv67t8NEAxQp+Nx/8MAxkQVQp/9/+3sLAKErA8
Game Source: Friendship Mystery Choice Game

Creator: StormPilot69
Libraries: none
Complexity: moderate (88 lines, 6.8 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-stormpilot69" to link back to the original. Then publish at arcadelab.ai/publish.