<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Quantum Overlord – a cyber‑punk incremental clicker where you generate Qubits, upgrade quantum rigs, and unlock cosmic power." />
<title>Quantum Overlord</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Quantum Overlord</h1>
</header>
<main>
<section id="core">
<button id="click-btn" class="glow-btn">
<img src="assets/quantum_core.png" alt="Quantum Core" class="core-icon" />
<span>Generate Qubit</span>
</button>
<p class="resource-display">Qubits: <span id="qubit-count">0</span></p>
</section>
<section id="upgrades" class="cards-container">
<!-- Upgrade cards will be generated by JavaScript -->
</section>
</main>
<footer>
<p>© 2026 Quantum Overlord – All rights reserved.</p>
</footer>
<script defer src="game.js"></script>
</body>
</html>
/* Global design tokens */
:root {
--bg-primary: hsl(230, 15%, 10%);
--bg-card: hsla(230, 15%, 15%, 0.9);
--accent-cyan: hsl(180, 80%, 55%);
--accent-magenta: hsl(300, 80%, 55%);
--text-primary: hsl(0, 0%, 95%);
--text-secondary: hsl(0, 0%, 70%);
--glow-size: 0.3rem;
--transition: 0.2s ease-out;
}
/* Reset & base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: radial-gradient(circle at 20% 20%, var(--accent-cyan), var(--bg-primary) 70%);
color: var(--text-primary);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 2rem;
}
header h1 {
font-size: 2.5rem;
text-align: center;
margin-bottom: 1rem;
background: linear-gradient(45deg, var(--accent-cyan), var(--accent-magenta));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Core button */
.glow-btn {
background: var(--bg-card);
border: none;
border-radius: 1rem;
padding: 1.5rem 2rem;
display: flex;
align-items: center;
gap: 0.8rem;
cursor: pointer;
font-size: 1.2rem;
color: var(--text-primary);
box-shadow: 0 0 var(--glow-size) var(--accent-cyan);
transition: var(--transition);
}
.glow-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 1rem var(--accent-magenta);
}
.core-icon {
width: 2.5rem;
height: 2.5rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { filter: drop-shadow(0 0 4px var(--accent-cyan)); }
50% { filter: drop-shadow(0 0 12px var(--accent-magenta)); }
100% { filter: drop-shadow(0 0 4px var(--accent-cyan)); }
}
.resource-display {
margin-top: 0.5rem;
font-size: 1.1rem;
color: var(--text-secondary);
}
/* Upgrade cards */
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 2rem;
width: 100%;
max-width: 900px;
}
.upgrade-card {
background: var(--bg-card);
border-radius: 0.8rem;
padding: 1rem;
backdrop-filter: blur(6px);
border: 1px solid hsla(0,0%,100%,0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: var(--transition);
}
.upgrade-card:hover {
transform: translateY(-3px);
border-color: var(--accent-cyan);
}
.upgrade-card button {
background: var(--accent-cyan);
border: none;
color: #000;
padding: 0.5rem;
border-radius: 0.4rem;
cursor: pointer;
font-weight: 600;
}
.upgrade-card button:disabled {
background: var(--text-secondary);
cursor: not-allowed;
}
footer {
margin-top: auto;
font-size: 0.8rem;
color: var(--text-secondary);
}
// game.js – Core engine for Quantum Overlord incremental game
// ----- State -----
const state = {
qubits: 0,
clickPower: 1,
lastTick: Date.now(),
upgrades: {
script: {name: 'Quantum Script', qty: 0, baseCost: 10, costMul: 1.15, effect: () => state.autoRate += 1},
amplifier: {name: 'Cortex Amplifier', qty: 0, baseCost: 50, costMul: 1.2, effect: () => state.clickPower *= 2},
},
autoRate: 0, // qubits per second generated automatically
};
// ----- Persistence -----
function saveState() {
localStorage.setItem('quantumOverlord', JSON.stringify(state));
}
function loadState() {
const saved = localStorage.getItem('quantumOverlord');
if (saved) {
const parsed = JSON.parse(saved);
Object.assign(state, parsed);
}
}
// ----- UI helpers -----
function fmtNum(num) {
return Math.floor(num).toLocaleString();
}
function updateDisplay() {
document.getElementById('qubit-count').textContent = fmtNum(state.qubits);
}
function calcCost(up) {
return Math.floor(up.baseCost * Math.pow(up.costMul, up.qty));
}
function createUpgradeCard(key, up) {
const card = document.createElement('div');
card.className = 'upgrade-card';
const title = document.createElement('h3');
title.textContent = up.name;
const desc = document.createElement('p');
desc.textContent = key === 'script' ? `+1 Qubit/sec per purchase` : `×2 Click Power`;
const cost = document.createElement('p');
cost.className = 'cost';
cost.textContent = `Cost: ${fmtNum(calcCost(up))} Qubits`;
const btn = document.createElement('button');
btn.textContent = 'Buy';
btn.disabled = state.qubits < calcCost(up);
btn.addEventListener('click', () => {
const c = calcCost(up);
if (state.qubits >= c) {
state.qubits -= c;
up.qty++;
up.effect();
saveState();
refreshUpgrades();
updateDisplay();
}
});
card.appendChild(title);
card.appendChild(desc);
card.appendChild(cost);
card.appendChild(btn);
return card;
}
function refreshUpgrades() {
const container = document.getElementById('upgrades');
container.innerHTML = '';
for (const [key, up] of Object.entries(state.upgrades)) {
const card = createUpgradeCard(key, up);
container.appendChild(card);
}
}
// ----- Core click -----
function manualClick() {
state.qubits += state.clickPower;
updateDisplay();
saveState();
refreshUpgrades();
}
// ----- Game loop -----
function tick() {
const now = Date.now();
const dt = (now - state.lastTick) / 1000; // seconds
state.lastTick = now;
if (state.autoRate > 0) {
state.qubits += state.autoRate * dt;
updateDisplay();
saveState();
refreshUpgrades();
}
requestAnimationFrame(tick);
}
// ----- Init -----
function init() {
loadState();
document.getElementById('click-btn').addEventListener('click', manualClick);
updateDisplay();
refreshUpgrades();
tick();
}
window.addEventListener('DOMContentLoaded', init);