Donut Idle Clicker Game with JavaScript and CSS

37 0 Games jtdubzzz1 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Donut Idle Clicker Game with JavaScript and CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; font-family: "Segoe UI", system-ui, sans-serif; color: #4a2a1a; background: repeating-linear-gradient(45deg, #ffe3ec 0 30px, #ffd6e2 30px 60px); user-select: none; }
.app { display: grid; grid-template-columns: 1fr 380px; min-height: 100vh; }
.left { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; text-align: center; }
h1 { font-size: 2.2rem; color: #d6336c; text-shadow: 0 3px 0 #fff; }
.count { font-size: 1.4rem; } .count b { font-size: 3rem; color: #d6336c; display: block; line-height: 1; }
.rate { opacity: .7; }
#big { margin: 24px 0; border: 0; background: none; cursor: pointer; font-size: clamp(9rem, 26vw, 15rem); line-height: 1; filter: drop-shadow(0 16px 20px rgba(160,40,80,.35)); transition: transform .08s; animation: bob 3s ease-in-out infinite; }
#big:active { transform: scale(.92); }
#big span { display: inline-block; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-10px); } }
.frenzy #big { filter: drop-shadow(0 0 40px gold); }
.frenzy .rate { color: #e67700; font-weight: 800; opacity: 1; }
.tip { opacity: .6; max-width: 360px; font-size: .9rem; }
.right { background: rgba(255,255,255,.75); backdrop-filter: blur(6px); padding: 20px; overflow-y: auto; max-height: 100vh; border-left: 4px solid #f8a5c2; }
h2 { font-size: 1.15rem; margin: 6px 0 12px; color: #d6336c; }
h2 small { font-size: .8rem; opacity: .6; }
.item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; text-align: left; background: #fff; border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; box-shadow: 0 3px 0 #f3c1d3; transition: transform .1s; font: inherit; color: inherit; }
.item:hover:not(:disabled) { transform: translateX(-4px); }
.item:disabled { opacity: .45; cursor: not-allowed; }
.item .ic { font-size: 1.9rem; }
.item b { display: block; }
.item small { opacity: .7; }
.item .own { margin-left: auto; font-size: 1.5rem; font-weight: 800; opacity: .3; }
#ach { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.a { width: 40px; height: 40px; border-radius: 10px; background: #eee; display: grid; place-items: center; font-size: 1.3rem; filter: grayscale(1); opacity: .4; }
.a.on { filter: none; opacity: 1; background: #fff3bf; }
#reset { border: 0; background: none; color: #a61e4d; text-decoration: underline; cursor: pointer; }
.pop { position: fixed; pointer-events: none; font-weight: 800; color: #d6336c; font-size: 1.3rem; animation: rise 1s forwards; }
@keyframes rise { to { transform: translateY(-80px); opacity: 0; } }
.crumb { position: fixed; pointer-events: none; font-size: 1.2rem; animation: fall 1.2s forwards ease-in; }
@keyframes fall { to { transform: translate(var(--dx), 220px) rotate(300deg); opacity: 0; } }
#golden { position: fixed; display: none; font-size: 3rem; cursor: pointer; animation: glow 1s ease-in-out infinite alternate; z-index: 5; }
@keyframes glow { to { transform: scale(1.25) rotate(20deg); filter: drop-shadow(0 0 16px gold); } }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #4a2a1a; color: #fff; padding: 10px 18px; border-radius: 99px; animation: rise 2.6s forwards; animation-delay: 1.4s; }
@media (max-width: 800px) { .app { grid-template-columns: 1fr; } .right { max-height: none; border-left: 0; border-top: 4px solid #f8a5c2; } }

// DONUT FACTORY — original idle clicker game with upgrades, achievements, golden frenzy & autosave
var UP = [
  { id: 'cursor', n: 'Auto Finger', ic: '👆', base: 15, dps: 0.1 },
  { id: 'baker', n: 'Baker', ic: '🧑‍🍳', base: 100, dps: 1 },
  { id: 'oven', n: 'Oven', ic: '🔥', base: 1100, dps: 8 },
  { id: 'shop', n: 'Donut Shop', ic: '🏪', base: 12000, dps: 47 },
  { id: 'factory', n: 'Factory', ic: '🏭', base: 130000, dps: 260 },
  { id: 'truck', n: 'Delivery Fleet', ic: '🚚', base: 1.4e6, dps: 1400 },
  { id: 'rocket', n: 'Space Bakery', ic: '🚀', base: 2e7, dps: 7800 },
  { id: 'portal', n: 'Donut Portal', ic: '🌀', base: 3.3e8, dps: 44000 }
];
var CLICK_UP = { n: 'Sugar Glaze (click power ×2)', ic: '🍯', base: 50 };
var ACH = [
  ['🍩', 'First bite', function (s) { return s.total >= 1; }], ['💯', '100 donuts', function (s) { return s.total >= 100; }],
  ['🎂', '10k donuts', function (s) { return s.total >= 1e4; }], ['💰', '1 million', function (s) { return s.total >= 1e6; }],
  ['👆', '500 clicks', function (s) { return s.clicks >= 500; }], ['🧑‍🍳', '10 bakers', function (s) { return (s.own.baker || 0) >= 10; }],
  ['🏭', 'Industrialist', function (s) { return (s.own.factory || 0) >= 1; }], ['✨', 'Golden catch', function (s) { return s.golden >= 1; }],
  ['⚡', '1k per second', function (s) { return dps(s) >= 1000; }], ['🌀', 'Portal opened', function (s) { return (s.own.portal || 0) >= 1; }]
];
var st = { donuts: 0, total: 0, clicks: 0, own: {}, clickLvl: 0, golden: 0, ach: {} };
try { var saved = JSON.parse(localStorage.getItem('donut-factory') || 'null'); if (saved) st = Object.assign(st, saved); } catch (e) {}
var frenzy = 0;

Comments 0

…

Donut Idle Clicker Game with JavaScript and CSS

Recommended

Comments 0