Jeu de clic inactif en forme de donut avec JavaScript et CSS

38 0 Jeux jtdubzzz1 Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Jeu de clic inactif en forme de donut avec JavaScript et CSS

Recommandé

30 January 2026

Animation de particules Canvas avec interaction à la souris

25 May 2025

Un code par Liamgilles76

27 January 2026

Jeu d'évolution de créatures - Unity JS

HTML

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;

Commentaires 0

…