Claude Haiku 4.5
AnthropicOctober 2025
What it wrote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmic Clicker - Incremental Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #00d4ff;
--secondary: #ff006e;
--accent: #ffbe0b;
--dark: #0a0e27;
--darker: #050810;
--text: #f0f0f0;
--text-dim: #a0a0a0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, var(--darker) 0%, #1a1f3a 100%);
color: var(--text);
overflow: hidden;
height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
gap: 20px;
padding: 20px;
max-width: 1600px;
margin: 0 auto;
width: 100%;
}
/* Left Panel - Main Game */
.game-panel {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.header {
text-align: center;
padding: 20px;
background: rgba(0, 212, 255, 0.1);
border: 2px solid var(--primary);
border-radius: 15px;
backdrop-filter: blur(10px);
}
.header h1 {
font-size: 2.5em;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}
.stats-row {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-top: 15px;
}
.stat-box {
background: rgba(255, 190, 11, 0.15);
border: 1px solid var(--accent);
padding: 12px 20px;
border-radius: 8px;
min-width: 200px;
}
.stat-label {
font-size: 0.9em;
color: var(--text-dim);
margin-bottom: 5px;
}
.stat-value {
font-size: 1.8em;
font-weight: bold;
color: var(--accent);
font-family: 'Courier New', monospace;
}
/* Main Click Area */
.clicker-section {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
perspective: 1000px;
}
.click-button {
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(135deg, var(--secondary), var(--primary));
border: 4px solid var(--primary);
cursor: pointer;
font-size: 4em;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 0 50px rgba(0, 212, 255, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.2);
color: var(--dark);
position: relative;
overflow: hidden;
}
.click-button:hover {
transform: scale(1.1);
box-shadow: 0 0 80px rgba(0, 212, 255, 0.8), inset 0 0 30px rgba(255, 255, 255, 0.3);
}
.click-button:active {
transform: scale(0.95);
}
.click-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
animation: ripple 0.6s ease-out;
}
@keyframes ripple {
to {
width: 400px;
height: 400px;
opacity: 0;
}
}
.click-text {
font-size: 0.8em;
color: rgba(0, 0, 0, 0.6);
margin-top: 10px;
}
.floating-text {
position: fixed;
font-size: 1.5em;
font-weight: bold;
color: var(--accent);
pointer-events: none;
text-shadow: 0 0 10px rgba(255, 190, 11, 0.5);
font-family: 'Courier New', monospace;
animation: float-up 1.5s ease-out forwards;
z-index: 1000;
}
@keyframes float-up {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-80px) scale(1.2);
}
}
.bps-display {
font-size: 1.2em;
color: var(--primary);
margin-top: 15px;
}
/* Right Panel - Shop */
.shop-panel {
width: 350px;
display: flex;
flex-direction: column;
background: rgba(10, 14, 39, 0.8);
border: 2px solid var(--primary);
border-radius: 15px;
backdrop-filter: blur(10px);
overflow: hidden;
box-shadow: 0 0 40px rgba(0, 212, 255, 0.2);
}
.shop-header {
padding: 20px;
background: rgba(0, 212, 255, 0.15);
border-bottom: 1px solid var(--primary);
font-size: 1.5em;
font-weight: bold;
color: var(--primary);
}
.shop-items {
flex: 1;
overflow-y: auto;
padding: 15px;
display: flex;
flex-direction: column;
gap: 12px;
}
.shop-item {
background: rgba(255, 190, 11, 0.08);
border: 1px solid rgba(255, 190, 11, 0.3);
padding: 15px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.shop-item:hover:not(.disabled) {
background: rgba(255, 190, 11, 0.15);
border-color: var(--accent);
transform: translateX(5px);
}
.shop-item.disabled {
opacity: 0.5;
cursor: not-allowed;
border-color: rgba(255, 190, 11, 0.1);
}
.shop-item.disabled:hover {
transform: none;
}
.item-name {
font-weight: bold;
color: var(--accent);
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.item-count {
background: rgba(0, 212, 255, 0.2);
color: var(--primary);
padding: 2px 8px;
border-radius: 12px;
font-size: 0.8em;
font-weight: bold;
}
.item-effect {
font-size: 0.85em;
color: var(--text-dim);
margin-bottom: 8px;
}
.item-cost {
font-size: 0.95em;
color: var(--primary);
font-weight: bold;
font-family: 'Courier New', monospace;
}
.item-progress {
width: 100%;
height: 4px;
background: rgba(0, 212, 255, 0.2);
border-radius: 2px;
margin-top: 8px;
overflow: hidden;
}
.item-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--secondary));
transition: width 0.3s ease;
}
/* Tabs */
.tab-container {
display: flex;
gap: 10px;
padding: 10px;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid var(--primary);
}
.tab {
flex: 1;
padding: 8px;
background: rgba(255, 190, 11, 0.1);
border: 1px solid var(--accent);
border-radius: 8px;
cursor: pointer;
color: var(--accent);
font-weight: bold;
transition: all 0.3s ease;
text-align: center;
}
.tab.active {
background: var(--accent);
color: var(--dark);
}
/* Prestige Section */
.prestige-section {
padding: 15px;
background: rgba(255, 110, 110, 0.1);
border-top: 1px solid rgba(255, 110, 110, 0.3);
margin-top: auto;
}
.prestige-button {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, rgba(255, 0, 110, 0.4), rgba(255, 110, 110, 0.4));
border: 2px solid rgba(255, 110, 110, 0.6);
color: #ffaaaa;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 8px;
}
.prestige-button:hover {
background: linear-gradient(135deg, rgba(255, 0, 110, 0.6), rgba(255, 110, 110, 0.6));
border-color: #ff6e6e;
transform: translateY(-2px);
}
.prestige-info {
font-size: 0.8em;
color: #ffaaaa;
text-align: center;
}
/* Scrollbar */
.shop-items::-webkit-scrollbar {
width: 6px;
}
.shop-items::-webkit-scrollbar-track {
background: rgba(0, 212, 255, 0.1);
}
.shop-items::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 3px;
}
.shop-items::-webkit-scrollbar-thumb:hover {
background: var(--secondary);
}
/* Responsive */
@media (max-width: 1200px) {
.container {
flex-direction: column;
}
.shop-panel {
width: 100%;
height: 300px;
}
.header h1 {
font-size: 1.8em;
}
.click-button {
width: 150px;
height: 150px;
font-size: 3em;
}
}
.achievement-toast {
position: fixed;
top: 20px;
right: 20px;
background: rgba(0, 212, 255, 0.2);
border: 2px solid var(--primary);
padding: 20px;
border-radius: 10px;
color: var(--primary);
font-weight: bold;
animation: slideIn 0.5s ease, slideOut 0.5s ease 4.5s;
z-index: 2000;
max-width: 300px;
}
@keyframes slideIn {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(400px);
opacity: 0;
}
}
.tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.9);
color: var(--accent);
padding: 8px 12px;
border-radius: 6px;
font-size: 0.8em;
white-space: nowrap;
pointer-events: none;
z-index: 999;
border: 1px solid var(--accent);
opacity: 0;
transition: opacity 0.3s ease;
}
.shop-item:hover .tooltip:not(.disabled .tooltip) {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<!-- Left Panel -->
<div class="game-panel">
<!-- Header -->
<div class="header">
<h1>⚡ COSMIC CLICKER ⚡</h1>
<div class="stats-row">
<div class="stat-box">
<div class="stat-label">CREDITS</div>
<div class="stat-value" id="credits">0</div>
</div>
<div class="stat-box">
<div class="stat-label">TOTAL EARNED</div>
<div class="stat-value" id="total-earned">0</div>
</div>
<div class="stat-box">
<div class="stat-label">LEVEL</div>
<div class="stat-value" id="level">1</div>
</div>
</div>
</div>
<!-- Click Area -->
<div class="clicker-section">
<div style="text-align: center;">
<button class="click-button" id="click-button">
<span>🪨</span>
</button>
<div class="click-text">Click to mine asteroids</div>
<div class="bps-display" id="bps">+0.00 credits/sec</div>
</div>
</div>
</div>
<!-- Right Panel - Shop -->
<div class="shop-panel">
<div class="tab-container">
<div class="tab active" data-tab="buildings">🏗️ Buildings</div>
<div class="tab" data-tab="upgrades">⭐ Upgrades</div>
</div>
<div class="shop-items" id="shop-items">
<!-- Items will be generated by JavaScript -->
</div>
<div class="prestige-section">
<button class="prestige-button" id="prestige-button">
✨ PRESTIGE (Reset for Multiplier)
</button>
<div class="prestige-info">
Multiplier: <span id="prestige-multiplier">1.00x</span>
</div>
</div>
</div>
</div>
<script>
// Game State
const gameState = {
credits: 0,
totalEarned: 0,
level: 1,
clickValue: 1,
prestigeLevel: 0,
lastSave: 0,
buildings: [
{ id: 'robot', name: '🤖 Miner Bot', baseCost: 10, baseProduction: 0.1, count: 0 },
{ id: 'factory', name: '🏭 Factory', baseCost: 100, baseProduction: 1, count: 0 },
{ id: 'satellite', name: '📡 Satellite', baseCost: 1000, baseProduction: 10, count: 0 },
{ id: 'asteroid', name: '🌍 Asteroid Base', baseCost: 10000, baseProduction: 100, count: 0 },
{ id: 'dyson', name: '☀️ Dyson Sphere', baseCost: 100000, baseProduction: 1000, count: 0 },
],
upgrades: [
{ id: 'power1', name: '⚡ Power Surge I', baseCost: 50, effect: 'Double click value', multiplier: 2, count: 0 },
{ id: 'power2', name: '⚡ Power Surge II', baseCost: 500, effect: 'Click +2 value', baseCostMultiplier: 1.15, count: 0, requirement: 'power1' },
{ id: 'robot1', name: '🔧 Robot Enhancement', baseCost: 200, effect: 'Bots +50% production', buildingMultiplier: { robot: 1.5 }, count: 0 },
{ id: 'factory1', name: '⚙️ Factory Optimization', baseCost: 1500, effect: 'Factories +50% production', buildingMultiplier: { factory: 1.5 }, count: 0 },
]
};
// DOM Elements
const creditsDisplay = document.getElementById('credits');
const totalEarnedDisplay = document.getElementById('total-earned');
const levelDisplay = document.getElementById('level');
const clickButton = document.getElementById('click-button');
const shopItems = document.getElementById('shop-items');
const bpsDisplay = document.getElementById('bps');
const prestigeButton = document.getElementById('prestige-button');
const prestigeMultiplierDisplay = document.getElementById('prestige-multiplier');
let currentTab = 'buildings';
// Initialize Game
function init() {
loadGame();
renderShop();
setupEventListeners();
gameLoop();
}
// Event Listeners
function setupEventListeners() {
clickButton.addEventListener('click', handleClick);
prestigeButton.addEventListener('click', handlePrestige);
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
currentTab = tab.dataset.tab;
renderShop();
});
});
}
// Click Handler
function handleClick() {
const clickValue = gameState.clickValue * (1 + gameState.prestigeLevel * 0.1);
gameState.credits += clickValue;
gameState.totalEarned += clickValue;
// Update level
const newLevel = Math.floor(gameState.totalEarned / 1000) + 1;
if (newLevel > gameState.level) {
gameState.level = newLevel;
showAchievement(`🎉 Level ${gameState.level}!`);
}
// Floating text
const x = event.clientX || window.innerWidth / 2;
const y = event.clientY || window.innerHeight / 2;
showFloatingText(x, y, `+${clickValue.toFixed(1)}`);
updateDisplay();
}
// Buy Item
function buyItem(itemId) {
const building = gameState.buildings.find(b => b.id === itemId);
const upgrade = gameState.upgrades.find(u => u.id === itemId);
const item = building || upgrade;
if (!item) return;
const cost = calculateCost(item);
if (gameState.credits >= cost) {
gameState.credits -= cost;
item.count++;
gameState.totalEarned += cost;
if (building) {
showAchievement(`Purchased: ${item.name}`);
}
updateDisplay();
renderShop();
}
}
// Calculate cost with scaling
function calculateCost(item) {
const baseMultiplier = item.baseCostMultiplier || 1.15;
return Math.floor(item.baseCost * Math.pow(baseMultiplier, item.count));
}
// Calculate total production
function getProductionPerSecond() {
let total = 0;
// Buildings
gameState.buildings.forEach(building => {
let production = building.baseProduction * building.count;
// Apply upgrade multipliers
gameState.upgrades.forEach(upgrade => {
if (upgrade.count > 0 && upgrade.buildingMultiplier && upgrade.buildingMultiplier[building.id]) {
production *= upgrade.buildingMultiplier[building.id];
}
});
total += production;
});
// Apply prestige bonus
total *= (1 + gameState.prestigeLevel * 0.15);
return total;
}
// Game Loop
function gameLoop() {
const pps = getProductionPerSecond();
const ticksPerSecond = 10;
gameState.credits += pps / ticksPerSecond;
gameState.totalEarned += pps / ticksPerSecond;
updateDisplay();
autoSave();
setTimeout(gameLoop, 1000 / ticksPerSecond);
}
// Render Shop
function renderShop() {
shopItems.innerHTML = '';
const items = currentTab === 'buildings' ? gameState.buildings : gameState.upgrades;
items.forEach(item => {
// Check requirements for upgrades
if (currentTab === 'upgrades' && item.requirement) {
const reqItem = gameState.upgrades.find(u => u.id === item.requirement);
if (!reqItem || reqItem.count === 0) return;
}
const cost = calculateCost(item);
const canAfford = gameState.credits >= cost;
const affectProgress = cost > 0 ? Math.min(gameState.credits / cost, 1) : 0;
const div = document.createElement('div');
div.className = `shop-item ${canAfford ? '' : 'disabled'}`;
div.onclick = () => buyItem(item.id);
div.innerHTML = `
<div class="item-name">
<span>${item.name}</span>
<span class="item-count">${item.count}</span>
</div>
<div class="item-effect">${item.effect || ''}</div>
<div class="item-cost">Cost: ${formatNumber(cost)}</div>
<div class="item-progress">
<div class="item-progress-bar" style="width: ${affectProgress * 100}%"></div>
</div>
`;
shopItems.appendChild(div);
});
}
// Prestige System
function handlePrestige() {
const prestigeGain = Math.floor(Math.sqrt(gameState.totalEarned / 1000000));
if (prestigeGain > 0) {
gameState.prestigeLevel += prestigeGain;
gameState.credits = 0;
gameState.level = 1;
gameState.clickValue = 1;
gameState.buildings.forEach(b => b.count = 0);
gameState.upgrades.forEach(u => u.count = 0);
showAchievement(`⭐ Prestige! +${prestigeGain} multiplier levels`);
updateDisplay();
renderShop();
}
}
// Format Numbers
function formatNumber(num) {
if (num >= 1e12) return (num / 1e12).toFixed(2) + 'T';
if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B';
if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M';
if (num >= 1e3) return (num / 1e3).toFixed(2) + 'K';
return Math.floor(num).toString();
}
// Update Display
function updateDisplay() {
creditsDisplay.textContent = formatNumber(gameState.credits);
totalEarnedDisplay.textContent = formatNumber(gameState.totalEarned);
levelDisplay.textContent = gameState.level;
const pps = getProductionPerSecond();
bpsDisplay.textContent = `+${formatNumber(pps)} credits/sec`;
const prestigeGain = Math.floor(Math.sqrt(gameState.totalEarned / 1000000));
prestigeMultiplierDisplay.textContent = `${(1 + gameState.prestigeLevel * 0.1).toFixed(2)}x (${prestigeGain} available)`;
}
// Floating Text
function showFloatingText(x, y, text) {
const floatingText = document.createElement('div');
floatingText.className = 'floating-text';
floatingText.textContent = text;
floatingText.style.left = x + 'px';
floatingText.style.top = y + 'px';
document.body.appendChild(floatingText);
setTimeout(() => floatingText.remove(), 1500);
}
// Achievement Toast
function showAchievement(text) {
const toast = document.createElement('div');
toast.className = 'achievement-toast';
toast.textContent = text;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 5000);
}
// Auto Save
function autoSave() {
const now = Date.now();
if (now - gameState.lastSave > 5000) {
saveGame();
gameState.lastSave = now;
}
}
// Save/Load
function saveGame() {
localStorage.setItem('cosmicClickerGame', JSON.stringify(gameState));
}
function loadGame() {
const saved = localStorage.getItem('cosmicClickerGame');
if (saved) {
const loaded = JSON.parse(saved);
Object.assign(gameState, loaded);
}
}
// Start Game
init();
</script>
</body>
</html>