🎮ArcadeLab

Survive Your Finances

by SilverPirate47
1910 lines41.3 KB
▶ Play
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survive Your Finances</title>

<style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #07111f;
    color: #ffffff;
    min-height: 100vh;
}

button, input {
    font-family: inherit;
}

button {
    cursor: pointer;
}

#game {
    min-height: 100vh;
    padding: 20px;
}

.screen {
    max-width: 1050px;
    margin: auto;
}

.hidden {
    display: none !important;
}

/* ---------- INTRO ---------- */

.intro {
    min-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-card {
    width: 100%;
    max-width: 850px;
    text-align: center;
    padding: 50px 35px;
    background: #101f33;
    border: 1px solid #28415e;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.money-icon {
    font-size: 65px;
    margin-bottom: 15px;
}

.intro-card h1 {
    font-size: clamp(34px, 6vw, 62px);
    margin-bottom: 8px;
}

.intro-card h1 span {
    color: #62b0ff;
}

.subtitle {
    color: #b9c8d8;
    font-size: 18px;
    margin-bottom: 30px;
}

.mission {
    background: #0b1727;
    padding: 22px;
    border-radius: 18px;
    margin: 25px 0;
    line-height: 1.7;
    color: #d8e3ef;
}

.income-big {
    font-size: 35px;
    font-weight: bold;
    color: #71d69a;
    margin: 15px 0;
}

.start-btn,
.primary-btn {
    border: none;
    background: #368ee8;
    color: white;
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    transition: .2s;
}

.start-btn:hover,
.primary-btn:hover {
    transform: translateY(-2px);
    background: #4aa0f5;
}

/* ---------- GAME HEADER ---------- */

.game-header {
    max-width: 1050px;
    margin: 0 auto 20px;
}

.topbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 15px;
}

.stat-box {
    background: #101f33;
    border: 1px solid #28415e;
    border-radius: 14px;
    padding: 13px 15px;
    text-align: center;
}

.stat-label {
    color: #91a6bc;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.stat-value {
    font-size: 20px;
    font-weight: bold;
    margin-top: 4px;
}

.money-value {
    color: #71d69a;
}

.points-value {
    color: #ffd166;
}

.progress-wrap {
    height: 9px;
    background: #182b42;
    border-radius: 20px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background: #368ee8;
    width: 25%;
    transition: width .4s ease;
}

/* ---------- GAME CARD ---------- */

.game-card {
    background: #101f33;
    border: 1px solid #28415e;
    border-radius: 24px;
    padding: 30px;
    max-width: 1050px;
    margin: auto;
}

.round-label {
    color: #62b0ff;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.game-card h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.description {
    color: #aebed0;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* ---------- BUDGET ---------- */

.budget-income {
    background: #0b1727;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.budget-income strong {
    color: #71d69a;
    font-size: 24px;
}

.budget-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.input-card {
    background: #0b1727;
    padding: 17px;
    border-radius: 15px;
    border: 1px solid #1f3955;
}

.input-card label {
    display: block;
    color: #dce7f1;
    font-weight: bold;
    margin-bottom: 9px;
}

.input-card small {
    color: #7f94aa;
    display: block;
    margin-bottom: 9px;
}

.input-wrap {
    display: flex;
    align-items: center;
    background: #13253a;
    border: 1px solid #31506e;
    border-radius: 10px;
    padding: 0 12px;
}

.input-wrap span {
    color: #91a6bc;
}

.input-wrap input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    padding: 12px 8px;
    font-size: 16px;
}

.budget-summary {
    margin-top: 20px;
    background: #0b1727;
    border-radius: 16px;
    padding: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin: 9px 0;
    color: #c8d5e2;
}

.summary-row strong {
    color: white;
}

.remaining-good {
    color: #71d69a !important;
}

.remaining-bad {
    color: #ff6b6b !important;
}

.remaining-warning {
    color: #ffd166 !important;
}

/* ---------- CHOICES ---------- */

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.choice {
    background: #0b1727;
    border: 2px solid #1f3955;
    border-radius: 18px;
    padding: 22px;
    transition: .2s;
}

.choice:hover {
    border-color: #368ee8;
    transform: translateY(-2px);
}

.choice h3 {
    margin-bottom: 8px;
    font-size: 20px;
}

.choice p {
    color: #aebed0;
    line-height: 1.5;
    margin-bottom: 15px;
}

.choice-cost {
    color: #ffd166;
    font-weight: bold;
    margin-bottom: 14px;
}

.choice button {
    width: 100%;
    border: none;
    background: #183552;
    color: white;
    padding: 12px;
    border-radius: 10px;
    font-weight: bold;
}

.choice button:hover {
    background: #368ee8;
}

/* ---------- EMERGENCY ---------- */

.emergency-card {
    background: #211b22;
    border: 2px solid #b95757;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 18px;
}

.emergency-icon {
    font-size: 42px;
    margin-bottom: 10px;
}

.emergency-card h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

.emergency-cost {
    color: #ff8b8b;
    font-weight: bold;
    margin: 10px 0 18px;
}

.emergency-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.emergency-options button {
    border: 1px solid #3b536b;
    background: #13253a;
    color: white;
    padding: 13px;
    border-radius: 10px;
}

.emergency-options button:hover {
    background: #368ee8;
}

/* ---------- NEEDS VS WANTS ---------- */

.classify-card {
    background: #0b1727;
    border-radius: 18px;
    padding: 25px;
    text-align: center;
}

.product-icon {
    font-size: 60px;
    margin-bottom: 10px;
}

.classify-card h3 {
    font-size: 25px;
    margin-bottom: 8px;
}

.classify-card p {
    color: #aebed0;
    margin-bottom: 20px;
}

.classify-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.classify-buttons button {
    padding: 16px;
    border: 2px solid #28415e;
    background: #13253a;
    color: white;
    border-radius: 12px;
    font-weight: bold;
    font-size: 16px;
}

.classify-buttons button:hover {
    border-color: #368ee8;
}

/* ---------- FEEDBACK ---------- */

.feedback {
    margin-top: 20px;
    padding: 17px;
    border-radius: 14px;
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
}

.feedback.good {
    background: #103325;
    border: 1px solid #287b55;
    color: #7ce0a4;
}

.feedback.bad {
    background: #35191d;
    border: 1px solid #91424c;
    color: #ff8b8b;
}

.feedback.neutral {
    background: #302a14;
    border: 1px solid #8d7828;
    color: #ffe08a;
}

/* ---------- NEXT ---------- */

.next-wrap {
    margin-top: 20px;
    text-align: right;
}

.next-btn {
    border: none;
    background: #368ee8;
    color: white;
    padding: 13px 24px;
    border-radius: 11px;
    font-weight: bold;
}

/* ---------- FINAL ---------- */

.result-screen {
    max-width: 1000px;
    margin: auto;
}

.result-card {
    background: #101f33;
    border: 1px solid #28415e;
    border-radius: 26px;
    padding: 35px;
    text-align: center;
}

.trophy {
    font-size: 70px;
    margin-bottom: 8px;
}

.result-card h1 {
    font-size: clamp(30px, 5vw, 50px);
    margin-bottom: 5px;
}

.result-rank {
    color: #ffd166;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 25px;
}

.score-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #0b1727;
    border: 7px solid #368ee8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    flex-direction: column;
}

.score-number {
    font-size: 40px;
    font-weight: bold;
}

.score-label {
    color: #91a6bc;
    font-size: 12px;
}

.final-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 25px 0;
}

.final-stat {
    background: #0b1727;
    border-radius: 14px;
    padding: 17px 10px;
}

.final-stat span {
    display: block;
    color: #8da2b8;
    font-size: 12px;
    margin-bottom: 5px;
}

.final-stat strong {
    font-size: 18px;
}

.result-message {
    color: #bdcad8;
    line-height: 1.6;
    max-width: 700px;
    margin: auto;
}

.restart-btn {
    margin-top: 25px;
    border: none;
    background: #368ee8;
    color: white;
    padding: 14px 28px;
    border-radius: 11px;
    font-weight: bold;
}

/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    #game {
        padding: 12px;
    }

    .topbar {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 7px;
    }

    .stat-box {
        padding: 10px 5px;
    }

    .stat-value {
        font-size: 16px;
    }

    .game-card {
        padding: 20px;
    }

    .game-card h2 {
        font-size: 25px;
    }

    .budget-grid,
    .choice-grid {
        grid-template-columns: 1fr;
    }

    .emergency-options {
        grid-template-columns: 1fr;
    }

    .final-stats {
        grid-template-columns: 1fr 1fr;
    }

    .intro-card {
        padding: 35px 20px;
    }
}
</style>
</head>

<body>

<div id="game">

    <!-- INTRO SCREEN -->
    <section id="introScreen" class="intro">
        <div class="intro-card">
            <div class="money-icon">💰</div>

            <h1>SURVIVE YOUR <span>FINANCES</span></h1>

            <p class="subtitle">
                Can You Survive a Month With RM2,500?
            </p>

            <div class="mission">
                <p>
                    You are given a fixed monthly income of
                    <strong>RM2,500</strong>.
                </p>

                <div class="income-big">RM 2,500</div>

                <p>
                    Your mission is to manage your money wisely,
                    survive unexpected expenses, and make smart
                    financial decisions.
                </p>
            </div>

            <p style="color:#91a6bc; margin-bottom:20px;">
                4 Rounds • Budgeting • Lifestyle • Emergencies • Needs vs Wants
            </p>

            <button class="start-btn" onclick="startGame()">
                START GAME →
            </button>
        </div>
    </section>


    <!-- GAME AREA -->
    <section id="gameScreen" class="hidden">

        <div class="game-header">

            <div class="topbar">

                <div class="stat-box">
                    <div class="stat-label">Money</div>
                    <div id="moneyDisplay" class="stat-value money-value">
                        RM 2,500
                    </div>
                </div>

                <div class="stat-box">
                    <div class="stat-label">Points</div>
                    <div id="pointsDisplay" class="stat-value points-value">
                        ⭐ 0
                    </div>
                </div>

                <div class="stat-box">
                    <div class="stat-label">Round</div>
                    <div id="roundDisplay" class="stat-value">
                        1 / 4
                    </div>
                </div>

            </div>

            <div class="progress-wrap">
                <div id="progressBar" class="progress"></div>
            </div>

        </div>

        <div id="gameContent" class="game-card"></div>

    </section>


    <!-- RESULT -->
    <section id="resultScreen" class="result-screen hidden">
        <div class="result-card">

            <div id="resultTrophy" class="trophy">🏆</div>

            <h1 id="resultTitle">YOU DID IT!</h1>

            <div id="resultRank" class="result-rank">
                FINANCIAL MASTER
            </div>

            <div class="score-circle">
                <div id="finalScore" class="score-number">85</div>
                <div class="score-label">/ 100 POINTS</div>
            </div>

            <div class="final-stats">

                <div class="final-stat">
                    <span>Money Left</span>
                    <strong id="finalMoney">RM 0</strong>
                </div>

                <div class="final-stat">
                    <span>Savings</span>
                    <strong id="finalSavings">RM 0</strong>
                </div>

                <div class="final-stat">
                    <span>Emergency Fund</span>
                    <strong id="finalEmergency">RM 0</strong>
                </div>

                <div class="final-stat">
                    <span>Debt</span>
                    <strong id="finalDebt">RM 0</strong>
                </div>

            </div>

            <p id="resultMessage" class="result-message"></p>

            <button class="restart-btn" onclick="restartGame()">
                PLAY AGAIN
            </button>

        </div>
    </section>

</div>


<script>

/* =========================================
   GAME STATE
========================================= */

const STARTING_MONEY = 2500;

let money = STARTING_MONEY;
let points = 0;

let currentRound = 1;

let savings = 0;
let emergencyFund = 0;
let debt = 0;

let budgetSubmitted = false;
let round2Choices = 0;
let emergencyStep = 1;

let budget = {
    rent: 0,
    food: 0,
    transport: 0,
    bills: 0,
    wants: 0,
    savings: 0,
    emergency: 0
};


/* =========================================
   START / RESTART
========================================= */

function startGame() {

    document.getElementById("introScreen").classList.add("hidden");
    document.getElementById("resultScreen").classList.add("hidden");
    document.getElementById("gameScreen").classList.remove("hidden");

    money = STARTING_MONEY;
    points = 0;
    currentRound = 1;

    savings = 0;
    emergencyFund = 0;
    debt = 0;

    budgetSubmitted = false;
    round2Choices = 0;
    emergencyStep = 1;

    budget = {
        rent: 0,
        food: 0,
        transport: 0,
        bills: 0,
        wants: 0,
        savings: 0,
        emergency: 0
    };

    updateHeader();
    renderRound1();
}


function restartGame() {
    startGame();
}


/* =========================================
   HEADER
========================================= */

function updateHeader() {

    document.getElementById("moneyDisplay").textContent =
        "RM " + money.toLocaleString();

    document.getElementById("pointsDisplay").textContent =
        "⭐ " + points;

    document.getElementById("roundDisplay").textContent =
        currentRound + " / 4";

    document.getElementById("progressBar").style.width =
        (currentRound * 25) + "%";
}


/* =========================================
   POINT SYSTEM
========================================= */

function addPoints(amount) {

    points += amount;

    if (points > 100) points = 100;
    if (points < 0) points = 0;

    updateHeader();
}


/* =========================================
   ROUND 1
   BUILD YOUR OWN BUDGET
========================================= */

function renderRound1() {

    currentRound = 1;
    updateHeader();

    document.getElementById("gameContent").innerHTML = `

        <div class="round-label">ROUND 1 OF 4</div>

        <h2>💰 Build Your Own Budget</h2>

        <p class="description">
            You have RM2,500 for the month.
            Enter how much you want to allocate to each category.
            Think carefully — your decisions will affect the rest of the game.
        </p>

        <div class="budget-income">
            <span>Monthly Income</span>
            <strong>RM 2,500</strong>
        </div>

        <div class="budget-grid">

            <div class="input-card">
                <label>🏠 Rent</label>
                <small>Accommodation</small>
                <div class="input-wrap">
                    <span>RM</span>
                    <input id="rent" type="number" min="0" value="0"
                           oninput="calculateBudget()">
                </div>
            </div>

            <div class="input-card">
                <label>🍚 Food</label>
                <small>Meals and groceries</small>
                <div class="input-wrap">
                    <span>RM</span>
                    <input id="food" type="number" min="0" value="0"
                           oninput="calculateBudget()">
                </div>
            </div>

            <div class="input-card">
                <label>🚌 Transport</label>
                <small>Fuel, bus, e-hailing</small>
                <div class="input-wrap">
                    <span>RM</span>
                    <input id="transport" type="number" min="0" value="0"
                           oninput="calculateBudget()">
                </div>
            </div>

            <div class="input-card">
                <label>📱 Bills</label>
                <small>Phone, internet and utilities</small>
                <div class="input-wrap">
                    <span>RM</span>
                    <input id="bills" type="number" min="0" value="0"
                           oninput="calculateBudget()">
                </div>
            </div>

            <div class="input-card">
                <label>🛍️ Wants</label>
                <small>Entertainment and shopping</small>
                <div class="input-wrap">
                    <span>RM</span>
                    <input id="wants" type="number" min="0" value="0"
                           oninput="calculateBudget()">
                </div>
            </div>

            <div class="input-card">
                <label>💰 Savings</label>
                <small>Money saved for future use</small>
                <div class="input-wrap">
                    <span>RM</span>
                    <input id="savings" type="number" min="0" value="0"
                           oninput="calculateBudget()">
                </div>
            </div>

            <div class="input-card">
                <label>🚨 Emergency Fund</label>
                <small>For unexpected expenses</small>
                <div class="input-wrap">
                    <span>RM</span>
                    <input id="emergency" type="number" min="0" value="0"
                           oninput="calculateBudget()">
                </div>
            </div>

        </div>

        <div class="budget-summary">

            <div class="summary-row">
                <span>Total Allocated</span>
                <strong id="totalAllocated">RM 0</strong>
            </div>

            <div class="summary-row">
                <span>Remaining</span>
                <strong id="remainingBudget" class="remaining-good">
                    RM 2,500
                </strong>
            </div>

        </div>

        <div id="budgetFeedback"></div>

        <div class="next-wrap">
            <button id="submitBudgetBtn"
                    class="next-btn"
                    onclick="submitBudget()">
                SUBMIT MY BUDGET
            </button>
        </div>
    `;
}


function getInputValue(id) {

    const value = Number(document.getElementById(id).value);

    if (isNaN(value) || value < 0) {
        return 0;
    }

    return value;
}


function calculateBudget() {

    const total =
        getInputValue("rent") +
        getInputValue("food") +
        getInputValue("transport") +
        getInputValue("bills") +
        getInputValue("wants") +
        getInputValue("savings") +
        getInputValue("emergency");

    const remaining = STARTING_MONEY - total;

    document.getElementById("totalAllocated").textContent =
        "RM " + total.toLocaleString();

    const remainingEl = document.getElementById("remainingBudget");

    if (remaining < 0) {

        remainingEl.textContent =
            "RM " + Math.abs(remaining).toLocaleString() + " OVER";

        remainingEl.className = "remaining-bad";

    } else if (remaining === 0) {

        remainingEl.textContent = "RM 0";
        remainingEl.className = "remaining-good";

    } else {

        remainingEl.textContent =
            "RM " + remaining.toLocaleString();

        remainingEl.className = "remaining-warning";
    }
}


function submitBudget() {

    const total =
        getInputValue("rent") +
        getInputValue("food") +
        getInputValue("transport") +
        getInputValue("bills") +
        getInputValue("wants") +
        getInputValue("savings") +
        getInputValue("emergency");

    if (total !== STARTING_MONEY) {

        document.getElementById("budgetFeedback").innerHTML = `

            <div class="feedback bad">
                ❌ Your budget is not balanced.<br>
                Total allocation must equal exactly RM2,500.
            </div>

        `;

        return;
    }

    budget.rent = getInputValue("rent");
    budget.food = getInputValue("food");
    budget.transport = getInputValue("transport");
    budget.bills = getInputValue("bills");
    budget.wants = getInputValue("wants");
    budget.savings = getInputValue("savings");
    budget.emergency = getInputValue("emergency");

    savings = budget.savings;
    emergencyFund = budget.emergency;

    money = 0;

    budgetSubmitted = true;

    let roundPoints = 5;

    if (budget.savings >= 250) {
        roundPoints += 5;
    }

    if (budget.emergency >= 200) {
        roundPoints += 5;
    }

    if (budget.wants <= 250) {
        roundPoints += 5;
    }

    if (budget.food >= 350 && budget.food <= 650) {
        roundPoints += 5;
    }

    addPoints(roundPoints);

    document.getElementById("budgetFeedback").innerHTML = `

        <div class="feedback good">
            ✅ Budget submitted successfully!<br>
            You earned <strong>+${roundPoints} POINTS</strong>.
            ${
                budget.emergency >= 200
                ? " Great job preparing for emergencies!"
                : " Consider building a stronger emergency fund next time."
            }
        </div>

        <div class="next-wrap">
            <button class="next-btn" onclick="renderRound2()">
                CONTINUE TO ROUND 2 →
            </button>
        </div>

    `;

    document.getElementById("submitBudgetBtn").disabled = true;
    document.getElementById("submitBudgetBtn").style.opacity = ".5";
}


/* =========================================
   ROUND 2
   LIFESTYLE CHOICES
========================================= */

function renderRound2() {

    currentRound = 2;
    round2Choices = 0;

    updateHeader();

    document.getElementById("gameContent").innerHTML = `

        <div class="round-label">ROUND 2 OF 4</div>

        <h2>🛍️ Lifestyle Choices</h2>

        <p class="description">
            Your budget is set. Now real-life spending decisions begin.
            Choose wisely — small choices can affect your financial health.
        </p>

        <div id="lifestyleChoices"></div>

    `;

    showFoodChoice();
}


function showFoodChoice() {

    document.getElementById("lifestyleChoices").innerHTML = `

        <div class="choice-grid">

            <div class="choice">

                <h3>🍚 Affordable Meal</h3>

                <p>
                    You choose a simple meal at a nearby food stall.
                </p>

                <div class="choice-cost">Cost: RM10</div>

                <button onclick="chooseFood('cheap')">
                    CHOOSE THIS
                </button>

            </div>

            <div class="choice">

                <h3>🍔 Premium Meal</h3>

                <p>
                    You decide to treat yourself to an expensive meal.
                </p>

                <div class="choice-cost">Cost: RM35</div>

                <button onclick="chooseFood('expensive')">
                    CHOOSE THIS
                </button>

            </div>

        </div>

    `;
}


function chooseFood(type) {

    if (type === "cheap") {

        addPoints(5);

        document.getElementById("lifestyleChoices").innerHTML = `

            <div class="feedback good">
                ✅ Smart choice! You controlled your daily spending.
                <br>+5 POINTS
            </div>

            <div class="next-wrap">
                <button class="next-btn" onclick="showTransportChoice()">
                    CONTINUE →
                </button>
            </div>

        `;

    } else {

        addPoints(-5);

        document.getElementById("lifestyleChoices").innerHTML = `

            <div class="feedback bad">
                ⚠️ You spent more on lifestyle.
                Occasional treats are okay, but frequent spending can reduce savings.
                <br>-5 POINTS
            </div>

            <div class="next-wrap">
                <button class="next-btn" onclick="showTransportChoice()">
                    CONTINUE →
                </button>
            </div>

        `;
    }
}


function showTransportChoice() {

    document.getElementById("lifestyleChoices").innerHTML = `

        <div class="choice-grid">

            <div class="choice">

                <h3>🚌 Public Transport</h3>

                <p>
                    You use a bus or other affordable transport option.
                </p>

                <div class="choice-cost">Cost: RM5</div>

                <button onclick="chooseTransport('cheap')">
                    CHOOSE THIS
                </button>

            </div>

            <div class="choice">

                <h3>🚕 E-Hailing</h3>

                <p>
                    You choose a more convenient but expensive ride.
                </p>

                <div class="choice-cost">Cost: RM25</div>

                <button onclick="chooseTransport('expensive')">
                    CHOOSE THIS
                </button>

            </div>

        </div>

    `;
}


function chooseTransport(type) {

    if (type === "cheap") {

        addPoints(5);

        document.getElementById("lifestyleChoices").innerHTML = `

            <div class="feedback good">
                ✅ Good! You chose a lower-cost transport option.
                <br>+5 POINTS
            </div>

            <div class="next-wrap">
                <button class="next-btn" onclick="showEntertainmentChoice()">
                    CONTINUE →
                </button>
            </div>

        `;

    } else {

        addPoints(-5);

        document.getElementById("lifestyleChoices").innerHTML = `

            <div class="feedback bad">
                ⚠️ Convenience comes with a higher cost.
                <br>-5 POINTS
            </div>

            <div class="next-wrap">
                <button class="next-btn" onclick="showEntertainmentChoice()">
                    CONTINUE →
                </button>
            </div>

        `;
    }
}


function showEntertainmentChoice() {

    document.getElementById("lifestyleChoices").innerHTML = `

        <div class="choice-grid">

            <div class="choice">

                <h3>🎬 Free Entertainment</h3>

                <p>
                    You stay home, watch a movie or spend time with friends.
                </p>

                <div class="choice-cost">Cost: RM0</div>

                <button onclick="chooseEntertainment('free')">
                    CHOOSE THIS
                </button>

            </div>

            <div class="choice">

                <h3>🎮 Paid Entertainment</h3>

                <p>
                    You spend money on a movie, games or entertainment.
                </p>

                <div class="choice-cost">Cost: RM30</div>

                <button onclick="chooseEntertainment('paid')">
                    CHOOSE THIS
                </button>

            </div>

        </div>

    `;
}


function chooseEntertainment(type) {

    if (type === "free") {

        addPoints(5);

        document.getElementById("lifestyleChoices").innerHTML = `

            <div class="feedback good">
                ✅ You found a low-cost way to enjoy your free time.
                <br>+5 POINTS
            </div>

            <div class="next-wrap">
                <button class="next-btn" onclick="renderRound3()">
                    CONTINUE TO ROUND 3 →
                </button>
            </div>

        `;

    } else {

        addPoints(-5);

        document.getElementById("lifestyleChoices").innerHTML = `

            <div class="feedback bad">
                ⚠️ Entertainment is a want, so make sure it fits your budget.
                <br>-5 POINTS
            </div>

            <div class="next-wrap">
                <button class="next-btn" onclick="renderRound3()">
                    CONTINUE TO ROUND 3 →
                </button>
            </div>

        `;
    }
}


/* =========================================
   ROUND 3
   EMERGENCY EVENTS
========================================= */

function renderRound3() {

    currentRound = 3;
    emergencyStep = 1;

    updateHeader();

    document.getElementById("gameContent").innerHTML = `

        <div class="round-label">ROUND 3 OF 4</div>

        <h2>🚨 Emergency Events</h2>

        <p class="description">
            Unexpected expenses can happen at any time.
            Decide how you will handle each emergency.
        </p>

        <div id="emergencyArea"></div>

    `;

    showMotorcycleEmergency();
}


function showMotorcycleEmergency() {

    document.getElementById("emergencyArea").innerHTML = `

        <div class="emergency-card">

            <div class="emergency-icon">🏍️</div>

            <h3>Motorcycle Breakdown</h3>

            <p>
                Your motorcycle suddenly breaks down.
                You need repairs before you can continue using it.
            </p>

            <div class="emergency-cost">
                Repair Cost: RM350
            </div>

            <div class="emergency-options">

                <button onclick="handleMotorcycle('emergency')">
                    🚨 Emergency Fund
                </button>

                <button onclick="handleMotorcycle('savings')">
                    💰 Savings
                </button>

                <button onclick="handleMotorcycle('borrow')">
                    💳 Borrow Money
                </button>

            </div>

        </div>

    `;
}


function handleMotorcycle(method) {

    let message = "";

    if (method === "emergency") {

        if (emergencyFund >= 350) {

            emergencyFund -= 350;

            addPoints(10);

            message = `
                <div class="feedback good">
                    ✅ Excellent! You used your emergency fund as intended.
                    <br>+10 POINTS
                </div>
            `;

        } else {

            addPoints(2);

            message = `
                <div class="feedback neutral">
                    ⚠️ Your emergency fund was not enough.
                    You had to use other money as well.
                    <br>+2 POINTS
                </div>
            `;
        }

    } else if (method === "savings") {

        savings = Math.max(0, savings - 350);

        addPoints(5);

        message = `
            <div class="feedback good">
                👍 You protected yourself from debt by using your savings.
                <br>+5 POINTS
            </div>
        `;

    } else {

        debt += 350;

        addPoints(-10);

        message = `
            <div class="feedback bad">
                ❌ Borrowing solved the immediate problem,
                but now you have RM350 of debt.
                <br>-10 POINTS
            </div>
        `;
    }

    document.getElementById("emergencyArea").innerHTML =
        message +

        `
        <div class="next-wrap">
            <button class="next-btn" onclick="showMedicalEmergency()">
                NEXT EMERGENCY →
            </button>
        </div>
        `;
}


function showMedicalEmergency() {

    document.getElementById("emergencyArea").innerHTML = `

        <div class="emergency-card">

            <div class="emergency-icon">🏥</div>

            <h3>Unexpected Medical Bill</h3>

            <p>
                You suddenly need medical treatment.
                The bill comes to RM500.
            </p>

            <div class="emergency-cost">
                Medical Bill: RM500
            </div>

            <div class="emergency-options">

                <button onclick="handleMedical('emergency')">
                    🚨 Emergency Fund
                </button>

                <button onclick="handleMedical('savings')">
                    💰 Savings
                </button>

                <button onclick="handleMedical('borrow')">
                    💳 Borrow Money
                </button>

            </div>

        </div>

    `;
}


function handleMedical(method) {

    let message = "";

    if (method === "emergency") {

        if (emergencyFund >= 500) {

            emergencyFund -= 500;

            addPoints(10);

            message = `
                <div class="feedback good">
                    ✅ Great financial preparation!
                    Your emergency fund protected you from debt.
                    <br>+10 POINTS
                </div>
            `;

        } else {

            addPoints(2);

            message = `
                <div class="feedback neutral">
                    ⚠️ Your emergency fund was not enough to fully cover the bill.
                    <br>+2 POINTS
                </div>
            `;
        }

    } else if (method === "savings") {

        savings = Math.max(0, savings - 500);

        addPoints(5);

        message = `
            <div class="feedback good">
                👍 You used your savings instead of taking on debt.
                <br>+5 POINTS
            </div>
        `;

    } else {

        debt += 500;

        addPoints(-10);

        message = `
            <div class="feedback bad">
                ❌ You now have an additional RM500 debt.
                Emergency savings could have reduced this risk.
                <br>-10 POINTS
            </div>
        `;
    }

    document.getElementById("emergencyArea").innerHTML =
        message +

        `
        <div class="next-wrap">
            <button class="next-btn" onclick="renderRound4()">
                CONTINUE TO ROUND 4 →
            </button>
        </div>
        `;
}


/* =========================================
   ROUND 4
   NEEDS VS WANTS
========================================= */

function renderRound4() {

    currentRound = 4;

    updateHeader();

    document.getElementById("gameContent").innerHTML = `

        <div class="round-label">ROUND 4 OF 4</div>

        <h2>🛒 Needs or Wants?</h2>

        <p class="description">
            Your final challenge.
            Decide whether the item is a <strong>Need</strong> or a <strong>Want</strong>.
        </p>

        <div id="classificationArea"></div>

    `;

    showClassification();
}


function showClassification() {

    document.getElementById("classificationArea").innerHTML = `

        <div class="classify-card">

            <div class="product-icon">🎧</div>

            <h3>Wireless Headphones</h3>

            <p>
                You already have working headphones,
                but you want to buy a new premium pair.
            </p>

            <div class="classify-buttons">

                <button onclick="classify('want')">
                    🛍️ WANT
                </button>

                <button onclick="classify('need')">
                    🏠 NEED
                </button>

            </div>

        </div>

    `;
}


function classify(answer) {

    if (answer === "want") {

        addPoints(10);

        document.getElementById("classificationArea").innerHTML = `

            <div class="feedback good">
                ✅ Correct! This is a WANT because you already have
                a working pair.
                <br>+10 POINTS
            </div>

            <div class="next-wrap">
                <button class="next-btn" onclick="showFinalResult()">
                    SEE MY FINAL RESULT →
                </button>
            </div>

        `;

    } else {

        addPoints(-10);

        document.getElementById("classificationArea").innerHTML = `

            <div class="feedback bad">
                ❌ This is a WANT, not a NEED.
                Your existing headphones are still working.
                <br>-10 POINTS
            </div>

            <div class="next-wrap">
                <button class="next-btn" onclick="showFinalResult()">
                    SEE MY FINAL RESULT →
                </button>
            </div>

        `;
    }
}


/* =========================================
   FINAL SCORE
========================================= */

function calculateFinalScore() {

    let finalScore = points;

    /*
       Add a small financial health bonus based
       on savings/emergency preparation.
    */

    if (savings >= 300) {
        finalScore += 5;
    }

    if (emergencyFund >= 200) {
        finalScore += 5;
    }

    if (debt === 0) {
        finalScore += 5;
    }

    /*
       Keep score between 0 and 100.
    */

    finalScore = Math.max(0, Math.min(100, finalScore));

    return finalScore;
}


function showFinalResult() {

    currentRound = 4;
    updateHeader();

    const finalScore = calculateFinalScore();

    let rank;
    let trophy;
    let title;
    let message;

    if (finalScore >= 80) {

        rank = "🏆 FINANCIAL MASTER";
        trophy = "🏆";
        title = "YOU SURVIVED THE MONTH!";
        message =
            "Excellent financial management! You balanced your spending, prepared for emergencies and made responsible financial decisions.";

    } else if (finalScore >= 60) {

        rank = "🥇 MONEY SMART";
        trophy = "🥇";
        title = "GREAT JOB!";
        message =
            "You managed your finances fairly well. You made several smart decisions, but there is still room to improve your financial resilience.";

    } else if (finalScore >= 40) {

        rank = "📚 FINANCIAL LEARNER";
        trophy = "📚";
        title = "YOU SURVIVED!";
        message =
            "You made it through the month, but some decisions could be improved. Try to build stronger savings and emergency preparation.";

    } else {

        rank = "🛡️ FINANCIAL SURVIVOR";
        trophy = "🛡️";
        title = "YOU SURVIVED... BARELY!";
        message =
            "You survived the month, but your financial decisions left you vulnerable. Focus on needs, savings and emergency funds next time.";
    }

    document.getElementById("gameScreen").classList.add("hidden");
    document.getElementById("resultScreen").classList.remove("hidden");

    document.getElementById("resultTrophy").textContent = trophy;
    document.getElementById("resultTitle").textContent = title;
    document.getElementById("resultRank").textContent = rank;

    document.getElementById("finalScore").textContent = finalScore;

    document.getElementById("finalMoney").textContent =
        "RM " + money.toLocaleString();

    document.getElementById("finalSavings").textContent =
        "RM " + savings.toLocaleString();

    document.getElementById("finalEmergency").textContent =
        "RM " + emergencyFund.toLocaleString();

    document.getElementById("finalDebt").textContent =
        "RM " + debt.toLocaleString();

    document.getElementById("resultMessage").textContent = message;
}

</script>

</body>
</html>

Game Source: Survive Your Finances

Creator: SilverPirate47

Libraries: none

Complexity: complex (1910 lines, 41.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: survive-your-finances-silverpirate47" to link back to the original. Then publish at arcadelab.ai/publish.