CodePen Embed - Cookie Clicker

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie Clicker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="cookie-section">
            <!-- Chocolate chip cookie with more chocolate chips -->
            <div id="cookie" onclick="addCookie()">
                <!-- Chocolate chips placed inside the cookie -->
                <div class="chocolate-chip" style="top: 30px; left: 40px;"></div>
                <div class="chocolate-chip" style="top: 60px; left: 100px;"></div>
                <div class="chocolate-chip" style="top: 90px; left: 70px;"></div>
                <div class="chocolate-chip" style="top: 40px; left: 100px;"></div>
                <div class="chocolate-chip" style="top: 70px; left: 120px;"></div>
                <div class="chocolate-chip" style="top: 80px; left: 40px;"></div>
                <div class="chocolate-chip" style="top: 50px; left: 120px;"></div>
                <div class="chocolate-chip" style="top: 120px; left: 30px;"></div>
                <div class="chocolate-chip" style="top: 40px; left: 60px;"></div>
                <div class="chocolate-chip" style="top: 110px; left: 90px;"></div>
            </div>
            <p id="cookie-count">Cookies: 0</p>
        </div>
        <div class="shop-section">
            <h3>Shop</h3>
            <div class="shop-container">
                <!-- Shop items -->
                <div class="shop-item">
                    <button id="buy-clicker" onclick="buyAutoClicker()">Buy Auto Clicker (10 Cookies)</button>
                    <p id="clicker-count">Auto Clickers: 0</p>
                    <div id="clicker-warning" class="warning-icon">X</div>
                </div>

                <div class="shop-item">
                    <button id="buy-multiplier" onclick="buyMultiplier()">Buy Cookie Multiplier (50 Cookies)</button>
                    <p id="multiplier-count">Multipliers: 0</p>
                    <div id="multiplier-warning" class="warning-icon">X</div>
                </div>

                <div class="shop-item">
                    <button id="buy-farm" onclick="buyFarm()">Buy Cookie Farm (200 Cookies)</button>
                    <p id="farm-count">Cookie Farms: 0</p>
                    <div id="farm-warning" class="warning-icon">X</div>
                </div>

                <!-- More purchase options -->
                <div class="shop-item">
                    <button id="buy-chocolate-factory" onclick="buyChocolateFactory()">Buy Chocolate Factory (500 Cookies)</button>
                    <p id="chocolate-factory-count">Chocolate Factories: 0</p>
                    <div id="chocolate-factory-warning" class="warning-icon">X</div>
                </div>

                <div class="shop-item">
                    <button id="buy-cookie-empire" onclick="buyCookieEmpire()">Buy Cookie Empire (1000 Cookies)</button>
                    <p id="cookie-empire-count">Cookie Empires: 0</p>
                    <div id="cookie-empire-warning" class="warning-icon">X</div>
                </div>

                <div class="shop-item">
                    <button id="buy-super-baker" onclick="buySuperBaker()">Buy Super Baker (2500 Cookies)</button>
                    <p id="super-baker-count">Super Bakers: 0</p>
                    <div id="super-baker-warning" class="warning-icon">X</div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

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

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;

    /* Beautiful gradient background */
    background: linear-gradient(to top left, #f6d02f, #f5a623, #fc4c02);
    background-size: cover; /* Make the gradient cover the whole screen */
    background-position: center;
}

.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 30px;
    width: 70%;
    max-width: 800px;
    height: 80vh;
}

.cookie-section {
    text-align: center;
    position: relative;
}

#cookie {
    width: 150px;
    height: 150px;
    background-color: #d2691e; /* Warm brown color for the cookie */
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
    position: relative;
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.15); /* Shadow to add depth */
    background: radial-gradient(circle at 50%, #d2691e, #8b4513); /* Adds a baked, shaded effect */
    border: 3px solid #8b4513; /* Slight darker border for realism */
}

#cookie:hover {
    transform: scale(1.1);
}

.chocolate-chip {
    width: 20px;
    height: 20px;
    background-color: #6b3f20; /* Rich dark brown color for chocolate chips */
    border-radius: 50%;
    position: absolute;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3); /* Darker shade inside the chips for depth */
}

/* Randomized chocolate chip positions */
#cookie .chocolate-chip:nth-child(1) {
    top: 30px;
    left: 40px;
    width: 18px;
    height: 18px;
    background-color: #5c4033;
}

#cookie .chocolate-chip:nth-child(2) {
    top: 60px;
    left: 100px;
    width: 22px;
    height: 22px;
    background-color: #4f3626;
}

#cookie .chocolate-chip:nth-child(3) {
    top: 90px;
    left: 70px;
    width: 20px;
    height: 20px;
    background-color: #6b3f20;
}

#cookie .chocolate-chip:nth-child(4) {
    top: 40px;
    left: 100px;
    width: 15px;
    height: 15px;
    background-color: #5a3b2c;
}

#cookie .chocolate-chip:nth-child(5) {
    top: 70px;
    left: 120px;
    width: 18px;
    height: 18px;
    background-color: #4e2e1d;
}

#cookie .chocolate-chip:nth-child(6) {
    top: 80px;
    left: 40px;
    width: 21px;
    height: 21px;
    background-color: #6b3f20;
}

#cookie .chocolate-chip:nth-child(7) {
    top: 50px;
    left: 120px;
    width: 16px;
    height: 16px;
    background-color: #6b3f20;
}

#cookie .chocolate-chip:nth-child(8) {
    top: 120px;
    left: 30px;
    width: 22px;
    height: 22px;
    background-color: #5f3c27;
}

#cookie .chocolate-chip:nth-child(9) {
    top: 40px;
    left: 60px;
    width: 20px;
    height: 20px;
    background-color: #7c482d;
}

#cookie .chocolate-chip:nth-child(10) {
    top: 110px;
    left: 90px;
    width: 17px;
    height: 17px;
    background-color: #6b3f20;
}

.shop-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: auto;
    max-height: 90vh;
    width: 40%;
}

.shop-container {
    max-height: 75vh;
    overflow-y: auto;
    padding-right: 10px;
}

.shop-item {
    position: relative;
    margin-bottom: 20px;
}

.warning-icon {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    display: none; /* Hidden by default */
}

button {
    background-color: #ff7f50;
    border: none;
    padding: 10px 20px;
    font-size: 1.2rem;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 5px;
    transition: background-color 0.2s;
    width: 100%;
}

button:hover {
    background-color: #ff6347;
}

p {
    font-size: 1.2rem;
    margin-top: 10px;
}

/* Set black text for all elements */
body, button, p, .shop-item, .cookie-section {
    color: #000; /* Black text */
}

let cookieCount = 0;
let autoClickers = 0;
let multipliers = 0;
let farms = 0;
let chocolateFactories = 0;
let cookieEmpires = 0;
let superBakers = 0;

// Function to increase cookies on click
function addCookie() {
    cookieCount++;
    updateCookieCount();
}

// Function to update the cookie count display
function updateCookieCount() {
    document.getElementById('cookie-count').textContent = `Cookies: ${cookieCount}`;
    checkBuyableItems();
}

// Function to check if items are buyable
function checkBuyableItems() {
    // Auto Clicker
    document.getElementById('clicker-warning').style.display = cookieCount >= 10 ? 'none' : 'block';
    // Multiplier
    document.getElementById('multiplier-warning').style.display = cookieCount >= 50 ? 'none' : 'block';
    // Farm
    document.getElementById('farm-warning').style.display = cookieCount >= 200 ? 'none' : 'block';
    // Chocolate Factory
    document.getElementById('chocolate-factory-warning').style.display = cookieCount >= 500 ? 'none' : 'block';
    // Cookie Empire
    document.getElementById('cookie-empire-warning').style.display = cookieCount >= 1000 ? 'none' : 'block';
    // Super Baker
    document.getElementById('super-baker-warning').style.display = cookieCount >= 2500 ? 'none' : 'block';
}

// Function to buy auto clickers
function buyAutoClicker() {
    if (cookieCount >= 10) {
        cookieCount -= 10;
        autoClickers++;
        updateCookieCount();
        document.getElementById('clicker-count').textContent = `Auto Clickers: ${autoClickers}`;
    } else {
        alert('Not enough cookies!');
    }
}

// Function to buy cookie multipliers
function buyMultiplier() {
    if (cookieCount >= 50) {
        cookieCount -= 50;
        multipliers++;
        updateCookieCount();
        document.getElementById('multiplier-count').textContent = `Multipliers: ${multipliers}`;
    } else {
        alert('Not enough cookies!');
    }
}

// Function to buy cookie farms
function buyFarm() {
    if (cookieCount >= 200) {
        cookieCount -= 200;
        farms++;
        updateCookieCount();
        document.getElementById('farm-count').textContent = `Cookie Farms: ${farms}`;
    } else {
        alert('Not enough cookies!');
    }
}

// Function to buy chocolate factories
function buyChocolateFactory() {
    if (cookieCount >= 500) {
        cookieCount -= 500;
        chocolateFactories++;
        updateCookieCount();
        document.getElementById('chocolate-factory-count').textContent = `Chocolate Factories: ${chocolateFactories}`;
    } else {
        alert('Not enough cookies!');
    }
}

// Function to buy cookie empires
function buyCookieEmpire() {
    if (cookieCount >= 1000) {
        cookieCount -= 1000;
        cookieEmpires++;
        updateCookieCount();
        document.getElementById('cookie-empire-count').textContent = `Cookie Empires: ${cookieEmpires}`;
    } else {
        alert('Not enough cookies!');
    }
}

// Function to buy super bakers
function buySuperBaker() {
    if (cookieCount >= 2500) {
        cookieCount -= 2500;
        superBakers++;
        updateCookieCount();
        document.getElementById('super-baker-count').textContent = `Super Bakers: ${superBakers}`;
    } else {
        alert('Not enough cookies!');
    }
}

// Auto clicker functionality (click every second)
setInterval(function() {
    if (autoClickers > 0) {
        cookieCount += autoClickers;
        updateCookieCount();
    }
}, 1000);

This Pen is owned by Galex FNAF on CodePen.

See more by @Galex-FNAF on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.