---
title: 'Sign Code Breaker'
url: 'https://am4info.com/afterburner/sign-code-breaker'
markdown: 'https://am4info.com/afterburner/sign-code-breaker.md'
date: '2026-10-11'
description: "#sg{--bg:#f4f1ea;--card:#fff;--ink:#222;--muted:#777;--line:#d9d3c5;--slot:#faf8f3;--accent:#2d6a4f;--red:#d62839;--dark:#222;--gold:#e0a100;--g:#2eb86b;--y:#f2c230;--r:#e0404f; box-sizing:border-box;max-width:460px;margin:0 auto;padding:16px;background:var(--bg);color:var(--ink);border-radius:16px;font-family:system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;line-height:1.3} @media (prefers-color-scheme:dark){#sg{--bg:#15171a;--card:#1f2226;--ink:#eee;--muted:#999;--line:#363b41;--slot:#2a2e33;--accent:#52b788;--red:#ff5c6c;--dark:#e8e8e8;--gold:#ffc83d}} #sg *{box-sizing:border-box} #sg h2{text-align:center;margin:8px 0 2px;font-size:1.6rem;color:var(--ink)} #sg .sg-sub{text-align:center;color:var(--muted);font-size:.9rem;margin:0 0 12px} #sg .sg-board{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px} #sg .sg-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:10px;margin:0} #sg .sg-row.sg-active{background:color-mix(in srgb,var(--accent) 14%,transparent)} #sg .sg-num{width:20px;color:var(--muted);font-size:.8rem;text-align:right} #sg .sg-slots,#sg .sg-fb{display:flex;gap:6px} #sg .sg-slot{width:48px;height:48px;border:2px solid var(--line);border-radius:10px;background:var(--slot);display:flex;align-items:center;justify-content:center;font-size:1.8rem;line-height:1;padding:0;margin:0;box-shadow:none;font-family:inherit} #sg .sg-row.sg-active .sg-slot{border-color:var(--accent);cursor:pointer} #sg .sg-fb{padding-left:10px;border-left:2px dashed var(--line)} #sg .sg-dot{display:block;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:var(--slot)} #sg .sg-dot.g{background:var(--g);border-color:var(--g)} #sg .sg-dot.y{background:var(--y);border-color:var(--y)} #sg .sg-dot.r{background:var(--r);border-color:var(--r)} #sg .c0,#sg .c2{color:var(--red)} #sg .c1,#sg .c3{color:var(--dark)} #sg .c4{color:var(--gold)} #sg .sg-pal{display:flex;gap:8px;justify-content:center;margin:14px 0 8px;flex-wrap:wrap} #sg .sg-pal button{width:54px;height:54px;font-size:1.9rem;border-radius:12px;border:2px solid var(--line);background:var(--card);cursor:pointer;padding:0;margin:0;box-shadow:none;font-family:inherit} #sg .sg-pal button:hover{border-color:var(--accent)} #sg .sg-act{display:flex;justify-content:center} #sg .sg-act button{padding:10px 18px;border-radius:10px;border:0;font-size:1rem;cursor:pointer;background:var(--line);color:var(--ink);margin:0;box-shadow:none} #sg .sg-act button:disabled{opacity:.4;cursor:not-allowed} #sg .sg-msg{text-align:center;min-height:1.6em;margin:12px 0 4px;font-weight:600} #sg .sg-legend{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.8rem;margin-top:10px} #sg .sg-legend span{display:flex;align-items:center;gap:5px} #sg .sg-legend .sg-dot{width:14px;height:14px} #sg .sg-secret{display:flex;justify-content:center;gap:6px;margin-top:6px} #sg .sg-secret .sg-slot{width:40px;height:40px;font-size:1.5rem} #sg .sg-setup{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px} #sg .sg-setup[hidden]{display:none} #sg .sg-opts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} #sg .sg-opts button{padding:8px 14px;border-radius:10px;border:2px solid var(--line);background:var(--slot);color:var(--ink);cursor:pointer;font-size:.95rem;margin:0;box-shadow:none} #sg .sg-opts button.sg-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);font-weight:600} #sg .sg-start{padding:10px 26px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;margin:0;box-shadow:none} #sg .sg-clock{text-align:center;font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums;min-height:1.2em;margin-bottom:6px} #sg .sg-clock.sg-low{color:var(--red)} ♦ ♠ ♥ ♣ ★ Code Breaker Guess the hidden sequence of 4 signs (repeats possible). You have 10 attempts. Time limit No timer 1 min 3 min 5 min Start game ⌫ Delete right sign, right place right sign, wrong place wrong sign (function(){ const SIGNS=[{n:'Diamonds',s:'♦'},{n:'Spades',s:'♠'},{n:'Hearts',s:'♥'},{n:'Clubs',s:'♣'},{n:'Stars',s:'★'}]; const LEN=4,MAX=10; let secret,guesses,cur,over,tick,limit=0,endAt=0,sel=0; const $=id=>document.getElementById(id); function start(){ clearInterval(tick); secret=Array.from({length:LEN},()=>Math.floor(Math.random()*SIGNS.length)); guesses=[];cur=[];over=true; $('sg-setup').hidden=false;$('sg-clock').textContent='';$('sg-clock').classList.remove('sg-low'); $('sg-msg').textContent='Choose a time limit, then press Start.';$('sg-secret').innerHTML=''; render(); } function score(g,s){ let green=0;const gc=Array(5).fill(0),sc=Array(5).fill(0); for(let i=0;ib.onclick=()=>{ cur.splice(+b.dataset.i,1);render(); }); } function end(won,timeout){ clearInterval(tick);$('sg-setup').hidden=false;$('sg-start').textContent='Play again'; over=true; $('sg-msg').textContent=won?`🎉 You cracked it in ${guesses.length} attempt${guesses.length>1?'s':''}!`:(timeout?'⏰ Time is up! The sequence was:':'💥 Out of attempts. The sequence was:'); $('sg-secret').innerHTML=secret.map(v=>slot(v,'disabled')).join(''); } function submit(){ if(over||cur.length=MAX)end(false); render(); } function clock(){ const left=Math.max(0,Math.ceil((endAt-Date.now())/1000)); $('sg-clock').textContent='⏱ '+Math.floor(left/60)+':'+String(left%60).padStart(2,'0'); $('sg-clock').classList.toggle('sg-low',left{ const b=e.target.closest('button'); if(!b||over||cur.length>=LEN)return; cur.push(+b.dataset.v);if(cur.length===LEN)submit();else render(); }; $('sg-del').onclick=()=>{cur.pop();render()}; $('sg-opts').onclick=e=>{ const b=e.target.closest('button');if(!b)return; sel=+b.dataset.m; document.querySelectorAll('#sg-opts button').forEach(x=>x.classList.toggle('sg-on',x===b)); }; $('sg-start').onclick=()=>{ start();limit=sel;$('sg-setup').hidden=true;over=false;$('sg-msg').textContent=''; if(limit){endAt=Date.now()+limit*1000;clock();tick=setInterval(clock,250);} else $('sg-clock').textContent=''; render(); }; start(); })();"
---

# Sign Code Breaker

## ♦ ♠ ♥ ♣ ★ Code Breaker

Guess the hidden sequence of 4 signs (repeats possible). You have 10 attempts.

 **Time limit**     

 right sign, right place right sign, wrong place wrong sign

${fb}

`; } $('sg-board').innerHTML=h; $('sg-del').disabled=over||!cur.length; $('sg-board').querySelectorAll('.sg-row.sg-active .sg-slot').forEach(b=>b.onclick=()=>{ cur.splice(+b.dataset.i,1);render(); }); } function end(won,timeout){ clearInterval(tick);$('sg-setup').hidden=false;$('sg-start').textContent='Play again'; over=true; $('sg-msg').textContent=won?`🎉 You cracked it in ${guesses.length} attempt${guesses.length>1?'s':''}!`:(timeout?'⏰ Time is up! The sequence was:':'💥 Out of attempts. The sequence was:'); $('sg-secret').innerHTML=secret.map(v=>slot(v,'disabled')).join(''); } function submit(){ if(over||cur.length=MAX)end(false); render(); } function clock(){ const left=Math.max(0,Math.ceil((endAt-Date.now())/1000)); $('sg-clock').textContent='⏱ '+Math.floor(left/60)+':'+String(left%60).padStart(2,'0'); $('sg-clock').classList.toggle('sg-low',left<=30); if(left<=0&&!over){end(false,true);render();} } $('sg-pal').innerHTML=SIGNS.map((s,i)=>``).join(''); $('sg-pal').onclick=e=>{ const b=e.target.closest('button'); if(!b||over||cur.length>=LEN)return; cur.push(+b.dataset.v);if(cur.length===LEN)submit();else render(); }; $('sg-del').onclick=()=>{cur.pop();render()}; $('sg-opts').onclick=e=>{ const b=e.target.closest('button');if(!b)return; sel=+b.dataset.m; document.querySelectorAll('#sg-opts button').forEach(x=>x.classList.toggle('sg-on',x===b)); }; $('sg-start').onclick=()=>{ start();limit=sel;$('sg-setup').hidden=true;over=false;$('sg-msg').textContent=''; if(limit){endAt=Date.now()+limit\*1000;clock();tick=setInterval(clock,250);} else $('sg-clock').textContent=''; render(); }; start(); })();

---

## Navigation

- Parent: [Afterburner](https://am4info.com/afterburner.md)
- Previous: [Numbers Game](https://am4info.com/afterburner/numberion.md)