The Concept I wanted to build an engaging, interactive, state-driven web application from scratch. "Cyber Cookie Clicker" takes the familiar incremental game loop and gives it a cyberpunk overhaul. Instead of baking cookies, the player clicks a custom SVG core to extract "bytes" and purchases hardware upgrades to automate their extraction process.
Tech Stack
- HTML5 & Vanilla JavaScript: Used for structuring the app and handling all core game logic, state management, event listeners, and the main game loop.
- Tailwind CSS: Utilized via CDN for rapid, responsive UI styling, including hover states, custom animations (like the floating click numbers), and a dark, neon-accented aesthetic.
Core Mechanics & Features
- Game State Management: Implemented a central JavaScript object to track total bytes, current click power, and Cookies Per Second (CPS).
- Dynamic DOM Manipulation: The store inventory renders dynamically based on the state object. As the player accumulates bytes, the script automatically evaluates affordability and updates button states in real-time.
- Custom Automation Upgrades: To give the game a unique flavor, the store features automation upgrades ranging from basic Python Scripts and Server Racks to advanced tech like Neural Networks and Mechatronic Arms. The math scales exponentially, increasing the cost of items by a factor of 1.15x with each purchase.
- Custom Graphics & Animations: The main clickable element is a scalable SVG built directly into the HTML, paired with CSS keyframe animations for visual feedback on every interaction.
The Result A fully client-side, self-contained interactive game that runs seamlessly in the browser. It was a great exercise in managing complex UI states without relying on heavy frameworks, proving how capable Vanilla JS can be for rapid game prototyping.