Cookie Clicker Developer Documentation

Cookie Clicker Developer Documentation

Overview

This page creates a simple Cookie Clicker game where a user can click on a cookie image and interact with buttons to upgrade their cookie production. The page uses:

Thymeleaf for dynamic HTML content.
Bootstrap for layout and basic styling.
Custom CSS for gradients, layout, and effects.
JavaScript for cookie animation and click logic.

HTML Structure

1. Thymeleaf Template

The page is a Thymeleaf HTML template using layout:decorate to extend a base layout.

<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" layout:decorate="~{layouts/base}" lang="en">

All page content is inside a layout:fragment block.

<th:block layout:fragment="body" th:remove="tag">
    <!-- Main content here -->
</th:block>

2. Header Section

Shows the main title for the game.

<header class="pb-3 mb-4 border-bottom border-primary text-light">
    <span class="fs-4">Cookie Clicker</span>
</header>

Displays the user’s GitHub profile picture (as the cookie), a hidden input with the UID, and a counter with upgrade buttons.

<img id="cookie" th:src="|https://github.com/${person.uid}.png|"
     alt="Profile Picture"
     onerror="this.onerror=null; this.src='https://github.com/user-attachments/assets/13dec9b2-21d6-458e-b099-f5f85ae9caf2';" />
<input type="text" th:value="${person.uid}" id="uid" placeholder="Uid Address" style="display: none;">

Counter and upgrade buttons:

<p><b id="counter">amount: 0</b></p>
<button id="multiplier">basic cookie, 10 cookies</button>
<button id="passive">basic cookie oven, 100 cookies</button>
<button id="sacrifice">SACRIFICE THE COOKIES!, 1000 cookies</button>

CSS Styling

The cookie is styled to appear in the center of the screen with a gradient and circular shape.

#cookie {
    display: block;
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10%;
    width: auto;
    transition: .25s linear;
    border-radius: 50%;
    z-index: 2;
}

Button and Table Styling

Basic styling for layout, tables, buttons, and error messages.

.btn-custom {
    background-color: #28a745;
    color: black;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.btn-custom:hover {
    background-color: #218838;
}

JavaScript Logic

The cookie moves and rotates on click using velocity and gravity. The click triggers an animation with a directional flip.

canvas.addEventListener("click", () => {
    rotationVelocity = Math.random() * 120 * directionMult;
    directionMult = directionMult >= 0 ? -0.5 : 0.5;
    velocityX = -rotationVelocity / 12;
    velocityY = 8;
    updatePositionToVelocity();
    updateStyle();

    var selectors = $("p,li,h1,h2,h3,h4").not('.gradient');
    if (selectors.length > 0) {
        selectors.eq(Math.floor(Math.random() * selectors.length)).addClass("gradient");
    } else {
        selectors = $("*:visible").not('.gradientB').not('.gradient');
        selectors.eq(Math.floor(Math.random() * selectors.length)).addClass("gradientB");
    }
});

Animation Loop

The frame loop handles movement and rotation every few milliseconds.

function frame() {
    velocityY -= gravity / fps;
    rotationVelocity *= 1 - 0.9 / fps;
    if (Math.abs(rotationVelocity) < 3) {
        rotationVelocity = 0;
        velocityX = 0;
    }
    rotation += rotationVelocity;
    updatePositionToVelocity();
    updateStyle();

    setTimeout(() => {
        if (active) requestAnimationFrame(frame);
    }, 1000 / fps);
}

Summary

This page features an animated cookie clicking game with upgrade buttons.
The cookie image uses the user’s GitHub avatar.
Clicking the cookie causes it to move and rotate using simple physics.
Styles use gradients, Bootstrap utilities, and basic layout rules.
JavaScript controls the motion, effects, and interactions.