Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie Clicker with Upgrades</title>
<style>
    body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    .container {
        display: flex;
        align-items: center;
    }
    #cookie {
        width: 200px;
        height: 200px;
        cursor: pointer;
        border-radius: 50%;
        background-color: #ffcc00;
        font-size: 24px;
        margin-right: 50px;
    }
    #score {
        font-size: 24px;
    }
    .sidebar {
        display: flex;
        flex-direction: column;
        max-height: 400px; /* Set a maximum height */
        overflow-y: auto; /* Enable vertical scroll */
    }
    .upgrade {
        padding: 10px;
        margin: 10px;
        background-color: #3cb371;
        color: #fff;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="container">
        <div>
            <h1>Cookie Clicker with Upgrades</h1>
            <p>Click the cookie to earn points!</p>
            <div id="cookie">Cookie</div>
            <p>Score: <span id="score">0</span></p>
        </div>
        <div class="sidebar">
            <button class="upgrade" id="upgrade1">Grandma (Cost: 10)</button>
            <button class="upgrade" id="upgrade2">Cookie Farm (Cost: 20)</button>
            <button class="upgrade" id="upgrade3">Factory (Cost: 30)</button>
            <button class="upgrade" id="upgrade4">Cookie Mine (Cost: 40)</button>
            <button class="upgrade" id="upgrade5">Cookie Universe (Cost: 50)</button>
            <button class="upgrade" id="upgrade6">Cookie Planet (Cost: 60)</button>
            <button class="upgrade" id="upgrade7">Cookie Galaxy (Cost: 70)</button>
            <button class="upgrade" id="upgrade8">Cookie Universe II (Cost: 80)</button>
            <button class="upgrade" id="upgrade9">Cookie Multiverse (Cost: 90)</button>
            <button class="upgrade" id="upgrade10">Cookie Omniverse (Cost: 100)</button>
        </div>
    </div>
 
    <script>
        let score = 0;
        let clickValue = 1;
        const cookie = document.getElementById('cookie');
        const scoreDisplay = document.getElementById('score');
        const upgradeButtons = document.querySelectorAll('.upgrade');
 
        cookie.addEventListener('click', () => {
            score += clickValue;
            scoreDisplay.textContent = score;
        });
 
        upgradeButtons.forEach(button => {
            button.addEventListener('click', () => {
                const upgradeCost = parseInt(button.textContent.match(/\d+/)[0]);
                if (score >= upgradeCost) {
                    score -= upgradeCost;
                    scoreDisplay.textContent = score;
                    clickValue++;
                    button.textContent = button.textContent.replace(/\d+/, upgradeCost * 2);
                    setInterval(() => {
                        score += clickValue;
                        scoreDisplay.textContent = score;
                    }, 1000); // Set the interval to generate points every second
                } else {
                    alert('Not enough score to purchase this upgrade!');
                }
            });
        });
    </script>
</body>
</html>
Editor is loading...