Pumpkin Crypt Clicker

HTML

<main id="crypt"><header><span class="eyebrow">ARKHEOS · PLAYABLE ORIGINAL</span><h1>Pumpkin Crypt<br><em>Clicker</em></h1><p>Three knocks. One new nightmare.</p></header><section class="altar"><div class="moon"></div><span class="tag">THE HATCHING ALTAR</span><button id="pumpkin" aria-label="Tap pumpkin to crack it"><div id="art"></div></button><div id="steps" aria-label="Crack progress"></div><h2 id="status" aria-live="polite"></h2><p id="hint"></p></section><section class="unlock"><div><b id="meterLabel"></b><span id="count"></span></div><progress id="meter" max="4" value="0"></progress></section><section><div class="collectionTitle"><h2>Your crypt</h2><span>4 hidden residents</span></div><div id="collection"></div></section><footer><button id="undo">Undo</button><button id="reset">Reset crypt</button><button id="sound" aria-pressed="false">Sound off</button></footer><p class="note" id="saveNote">Progress saved between visits.</p></main>

CSS

*{box-sizing:border-box}body{margin:0;background:#141020;color:#f8e7cd;font-family:system-ui,sans-serif}#crypt{width:100%;max-width:540px;margin:auto;padding:22px 16px 16px;background:radial-gradient(ellipse at 50% 32%,#302337,transparent 55%),#141020;border:1px solid #473047;border-radius:22px;overflow:hidden}header{text-align:center}.eyebrow{font-size:10px;letter-spacing:2px;color:#ba98ad}h1{font-family:Georgia,serif;font-size:36px;line-height:1.03;margin:12px 0 8px}h1 em{color:#ffae53;font-weight:normal}header p{font-size:13px;color:#c6aabb;margin:0 0 18px}.altar{position:relative;text-align:center;border:1px solid #593a4b;border-radius:18px;padding:14px 10px 12px;background:linear-gradient(#20192d,#211724);overflow:hidden}.moon{position:absolute;width:170px;height:170px;background:#ffc17c0d;border:1px solid #ffc17c16;border-radius:50%;left:50%;top:36px;transform:translateX(-50%)}.tag{font-size:9px;letter-spacing:2.5px;color:#b295ac;position:relative}#pumpkin{position:relative;display:block;width:min(100%,310px);height:235px;margin:4px auto 0;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#pumpkin svg{width:100%;height:100%;overflow:visible}button:focus-visible{outline:3px solid #ffcb75;outline-offset:3px}#pumpkin:active{transform:scale(.97)}#pumpkin.bonk #art{animation:bonk .23s ease-out}#pumpkin.hatch #art{animation:reveal .5s ease-out}@keyframes bonk{35%{transform:rotate(-3deg) scale(.94)}70%{transform:rotate(2deg)}100%{transform:none}}@keyframes reveal{0%{transform:scale(.65);opacity:.2}65%{transform:scale(1.08)}100%{transform:none;opacity:1}}#steps{display:flex;justify-content:center;gap:8px;margin:2px 0 10px}#steps span{width:32px;height:5px;border-radius:5px;background:#57404c}#steps span.on{background:#ffb65d;box-shadow:0 0 9px #ffb65d44}.altar h2{font-family:Georgia,serif;font-size:21px;margin:0 0 5px}.altar p{font-size:12px;color:#c6aabb;margin:0;min-height:18px}.unlock{margin:17px 0}.unlock div{display:flex;justify-content:space-between;font-size:12px;gap:8px}.unlock span{color:#ffc580}progress{width:100%;height:8px;appearance:none;border:0;border-radius:8px;overflow:hidden;margin-top:9px;background:#45313e}progress::-webkit-progress-bar{background:#45313e}progress::-webkit-progress-value{background:linear-gradient(90deg,#dd7440,#ffce79)}progress::-moz-progress-bar{background:#ffb45d}.collectionTitle{display:flex;justify-content:space-between;align-items:center}.collectionTitle h2{font-family:Georgia,serif;font-size:21px;margin:0 0 10px}.collectionTitle span{font-size:10px;color:#bd9dae}#collection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card{border:1px solid #503447;border-radius:13px;background:#251b2e;min-width:0;padding:9px;text-align:center}.card svg{height:83px;width:100%;display:block}.card b{font-size:12px;display:block;color:#ffdaa4}.card p{font-size:10px;line-height:1.4;color:#c3a8bd;margin:5px 0 0}.locked{background:#1b1624;border-style:dashed}.locked b{color:#9e849d}.seal{height:83px;display:grid;place-items:center;font-family:Georgia,serif;font-size:32px;color:#71506d}footer{display:flex;gap:7px;margin-top:15px}footer button{flex:1;border:1px solid #614253;background:#332334;color:#f8dfc0;border-radius:9px;min-height:42px;font-size:11px;cursor:pointer;touch-action:manipulation;padding:6px}footer button:disabled{opacity:.4;cursor:default}.note{text-align:center;font-size:10px;color:#a78b9f;margin:10px 0 0}@media(max-width:340px){#crypt{padding:18px 12px}h1{font-size:32px}#pumpkin{height:215px}}@media(prefers-reduced-motion:reduce){#pumpkin.bonk #art,#pumpkin.hatch #art{animation:none}#pumpkin:active{transform:none}}

JavaScript

(()=>{
'use strict';
const bridge=typeof WidgetCanvas!=='undefined'?WidgetCanvas:null;
const $=id=>document.getElementById(id),key='pumpkin-crypt-clicker-v1';
const beasts=[
{name:'Wickling',desc:'A candle thief with a velvet grin.',color:'#a595df'},
{name:'Mossmaw',desc:'The gardener beneath the gravestones.',color:'#95b77b'},
{name:'Count Cinder',desc:'A tiny lord of enormous mischief.',color:'#de8393'},
{name:'Moonmoth',desc:'Dreams stitched into midnight wings.',color:'#7bbec9'}
];
let s={schema:1,stage:0,found:0},history=[],audio=false,ac=null;
const copy=x=>JSON.parse(JSON.stringify(x));
function valid(x){return x&&x.schema===1&&Number.isInteger(x.stage)&&x.stage>=0&&x.stage<=3&&Number.isInteger(x.found)&&x.found>=0&&x.found<=4&&(x.stage!==3||x.found>0);}
function restore(x){if(!x||x.game!==key||!valid(x.current))return false;s=copy(x.current);history=Array.isArray(x.history)?x.history.filter(valid).slice(-30).map(copy):[];draw();return true;}
function save(){const packet={game:key,current:copy(s),history:copy(history)};if(bridge){try{Promise.resolve(bridge.setState(packet)).catch(()=>{$('saveNote').textContent='Could not save progress in this visit.'});Promise.resolve(bridge.setContext({game:'Pumpkin Crypt Clicker',discovered:beasts.slice(0,s.found).map(b=>b.name),crackStage:s.stage,complete:s.found===4})).catch(()=>{});}catch(e){}}try{localStorage.setItem(key,JSON.stringify(packet));}catch(e){}}
function remember(){history.push(copy(s));history=history.slice(-30);}
function svg(body){return '<svg viewBox="0 0 300 250" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">'+body+'</svg>';}
function face(i){const c=beasts[i].color;let body='';
if(i===0)body='<path d="M87 91 Q58 54 78 42 L116 74 M187 73 L225 40 Q244 58 215 95" fill="#66508e" stroke="#1b142b" stroke-width="5"/><path d="M147 61 Q127 41 146 21 Q150 37 161 44 Q172 59 155 64" fill="#ffce6d"/><path d="M77 126 Q73 67 148 67 Q226 64 225 131 L244 194 L203 183 L183 204 L150 188 L121 206 L99 183 L64 195Z" fill="'+c+'" stroke="#20162e" stroke-width="5"/><ellipse cx="116" cy="114" rx="18" ry="22" fill="#261d39"/><ellipse cx="183" cy="114" rx="18" ry="22" fill="#261d39"/><circle cx="122" cy="106" r="6" fill="#ffe6a8"/><circle cx="177" cy="106" r="6" fill="#ffe6a8"/><path d="M112 153 Q150 180 190 145 Q160 199 112 153" fill="#302039"/><path d="M135 164 L142 179 L150 169" fill="#fff1ce"/>';
if(i===1)body='<path d="M99 85 Q58 66 69 35 Q100 32 116 78 M181 75 Q195 29 225 37 Q235 69 205 91" fill="#577951" stroke="#1b3029" stroke-width="5"/><path d="M74 115 Q69 75 115 71 L186 73 Q229 75 229 127 L223 174 Q213 203 149 202 Q82 202 77 174Z" fill="'+c+'" stroke="#21392e" stroke-width="5"/><path d="M85 93 Q111 74 130 90 M172 89 Q198 75 220 96" fill="none" stroke="#426449" stroke-width="13"/><ellipse cx="114" cy="117" rx="12" ry="18" fill="#1f372c"/><ellipse cx="189" cy="117" rx="12" ry="18" fill="#1f372c"/><circle cx="118" cy="112" r="4" fill="#e9ffac"/><circle cx="185" cy="112" r="4" fill="#e9ffac"/><path d="M97 151 Q150 138 205 152 Q195 190 150 183 Q105 189 97 151" fill="#253c2d"/><path d="M113 151 L120 171 L129 150 M168 148 L178 170 L188 151" fill="#efddb1"/><path d="M138 75 Q117 52 137 42 Q155 44 157 71 Q169 37 187 49 Q190 67 157 78" fill="#abc878"/>';
if(i===2)body='<path d="M78 133 L38 167 L95 206 L149 187 L206 207 L262 167 L221 131" fill="#5e284b" stroke="#21162d" stroke-width="5"/><path d="M91 95 L66 69 L64 123 L82 134 M209 96 L235 68 L236 124 L220 137" fill="'+c+'" stroke="#3d2436" stroke-width="5"/><path d="M83 122 Q77 68 147 64 Q220 63 219 123 Q225 178 150 192 Q77 178 83 122" fill="'+c+'" stroke="#3d2436" stroke-width="5"/><path d="M85 105 Q75 52 148 55 Q225 52 217 105 L188 83 L151 104 L114 82Z" fill="#34243b"/><path d="M102 120 L133 124 M168 124 L198 118" stroke="#432137" stroke-width="6" stroke-linecap="round"/><path d="M115 150 Q150 172 190 146" fill="none" stroke="#492239" stroke-width="6"/><path d="M123 154 L129 175 L141 160 M169 159 L181 173 L184 150" fill="#fff2dc"/><path d="M151 190 L137 207 L162 218 L174 204Z" fill="#f6bd6b"/>';
if(i===3)body='<path d="M135 132 Q59 47 34 85 Q11 116 73 145 Q11 170 51 203 Q96 220 139 157 M166 132 Q241 47 266 85 Q289 116 227 145 Q289 170 249 203 Q204 220 161 157" fill="#47738e" stroke="#233148" stroke-width="5"/><path d="M112 132 Q66 82 48 106 Q49 128 112 145 M187 132 Q234 82 252 106 Q251 128 188 145" fill="#e4b976"/><path d="M102 166 L65 183 L115 180 M198 166 L235 183 L185 180" fill="none" stroke="#80bbc9" stroke-width="8"/><path d="M128 84 Q120 46 96 43 M171 84 Q181 46 204 43" fill="none" stroke="#91d2d3" stroke-width="5" stroke-linecap="round"/><circle cx="96" cy="43" r="7" fill="#ffd48a"/><circle cx="204" cy="43" r="7" fill="#ffd48a"/><ellipse cx="150" cy="138" rx="46" ry="62" fill="'+c+'" stroke="#253c50" stroke-width="5"/><ellipse cx="131" cy="123" rx="9" ry="15" fill="#20304a"/><ellipse cx="169" cy="123" rx="9" ry="15" fill="#20304a"/><circle cx="133" cy="118" r="3" fill="#fff4cb"/><circle cx="167" cy="118" r="3" fill="#fff4cb"/><path d="M138 153 Q150 165 163 153" fill="none" stroke="#294158" stroke-width="4" stroke-linecap="round"/><path d="M146 91 L156 104 L149 114 L141 103Z" fill="#ffe0a1"/>';
return svg('<ellipse cx="150" cy="220" rx="90" ry="12" fill="#0e0b1870"/>'+body);}
function pumpkin(){const crack1='<path d="M147 70 L133 103 L155 117 L140 141" />',crack2='<path d="M140 141 L166 157 L151 186 L164 207 M153 117 L181 110 L201 132 M135 103 L113 120 L99 106"/>';return svg('<defs><linearGradient id="skin" x2=".4" y2="1"><stop stop-color="#ffc05c"/><stop offset=".48" stop-color="#ee8537"/><stop offset="1" stop-color="#a83f27"/></linearGradient></defs><ellipse cx="150" cy="220" rx="106" ry="14" fill="#0a091866"/><path d="M139 79 Q135 48 150 26 L173 32 Q151 53 158 81" fill="#729155" stroke="#334d35" stroke-width="5"/><path d="M164 59 Q210 30 218 59 Q218 81 190 68" fill="none" stroke="#728c52" stroke-width="4"/><path d="M149 81 C94 47 37 78 37 143 C24 196 74 226 115 213 Q150 231 185 213 C231 228 278 190 263 141 C260 80 207 51 149 81Z" fill="url(#skin)" stroke="#703326" stroke-width="5"/><path d="M113 79 Q67 133 103 207 M149 81 Q126 143 149 219 M185 78 Q227 143 194 208" fill="none" stroke="#8d3d2866" stroke-width="5"/><path d="M62 124 Q67 98 86 91 M107 91 L117 85" fill="none" stroke="#ffe4a1" stroke-width="6" stroke-linecap="round" opacity=".6"/><path d="M92 139 L117 129 L123 145 M177 144 L183 129 L208 139" fill="none" stroke="#663125" stroke-width="5" stroke-linecap="round"/><path d="M131 177 Q151 187 172 175" fill="none" stroke="#663125" stroke-width="5" stroke-linecap="round"/>'+(s.stage?'<g fill="none" stroke="#ffe5a3" stroke-width="9" stroke-linejoin="round">'+crack1+(s.stage===2?crack2:'')+'</g><g fill="none" stroke="#392136" stroke-width="5" stroke-linejoin="round">'+crack1+(s.stage===2?crack2:'')+'</g>':''));}
function draw(){const hatched=s.stage===3,complete=s.found===4; $('art').innerHTML=hatched?face(s.found-1):pumpkin();$('steps').innerHTML=[1,2,3].map(i=>'<span class="'+(s.stage>=i?'on':'')+'"></span>').join('');$('status').textContent=hatched?beasts[s.found-1].name+' awakens!':['Knock on the crypt','Stage 1 · Hairline crack','Stage 2 · Splitting shell'][s.stage];$('hint').textContent=hatched?(complete?'All four found. Your crypt is complete.':'Tap to summon the next pumpkin.'):(s.stage===2?'One more tap to hatch.':s.stage===1?'Two more taps to hatch.':'Tap the pumpkin three times.');$('pumpkin').disabled=hatched&&complete;$('pumpkin').setAttribute('aria-label',hatched?(complete?'Collection complete':'Summon next pumpkin'):'Crack pumpkin, stage '+s.stage+' of 3');$('meter').value=s.found;$('meterLabel').textContent=complete?'Moonlit crypt unlocked':'Unlock the moonlit crypt';$('count').textContent=s.found+' / 4';$('collection').innerHTML=beasts.map((b,i)=>i<s.found?'<article class="card">'+face(i)+'<b>'+b.name+'</b><p>'+b.desc+'</p></article>':'<article class="card locked"><div class="seal" aria-hidden="true">?</div><b>Undiscovered '+(i+1)+'</b><p>Hatch '+(i+1)+' opens this chamber.</p></article>').join('');$('undo').disabled=!history.length;}
function sound(){if(!audio)return;try{ac=ac||new(window.AudioContext||window.webkitAudioContext)();ac.resume();const o=ac.createOscillator(),g=ac.createGain();o.type='triangle';o.frequency.setValueAtTime(s.stage===3?440:110+s.stage*40,ac.currentTime);o.frequency.exponentialRampToValueAtTime(s.stage===3?660:65,ac.currentTime+.12);g.gain.setValueAtTime(.07,ac.currentTime);g.gain.exponentialRampToValueAtTime(.001,ac.currentTime+.18);o.connect(g);g.connect(ac.destination);o.start();o.stop(ac.currentTime+.2);}catch(e){}}
$('pumpkin').addEventListener('click',()=>{if(s.stage===3&&s.found===4)return;remember();if(s.stage===3)s.stage=0;else{ s.stage++;if(s.stage===3)s.found++;}draw();const b=$('pumpkin');b.classList.remove('bonk','hatch');void b.offsetWidth;b.classList.add(s.stage===3?'hatch':'bonk');sound();save();});
$('pumpkin').addEventListener('animationend',()=>$('pumpkin').classList.remove('bonk','hatch'));
$('undo').onclick=()=>{if(!history.length)return;s=history.pop();$('pumpkin').classList.remove('bonk','hatch');draw();save();};
$('reset').onclick=()=>{remember();s={schema:1,stage:0,found:0};draw();save();};
$('sound').onclick=()=>{audio=!audio;$('sound').textContent=audio?'Sound on':'Sound off';$('sound').setAttribute('aria-pressed',String(audio));if(audio)sound();};
draw();try{restore(JSON.parse(localStorage.getItem(key)));}catch(e){}
if(bridge){try{const initial=bridge.getState();if(initial&&typeof initial.then==='function')initial.then(restore);else restore(initial);bridge.setControlsPosition('top-right');bridge.setResetEnabled(false);bridge.setSharingEnabled(false);}catch(e){}}
window.addEventListener('widgetcanvas:restore',e=>restore(e.detail));
})();