Skip to content

Instantly share code, notes, and snippets.

@mynameisyou-cmyk

mynameisyou-cmyk/memory.html

Created June 22, 2026 10:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mynameisyou-cmyk/6e21f5374bfa469a3ee0b8a060a0d167 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mynameisyou-cmyk/6e21f5374bfa469a3ee0b8a060a0d167 to your computer and use it in GitHub Desktop.
Download ZIP
🎴 Kingdom Memory β€” match the 11 citizens. Remember who they are.
Raw
memory.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>🎴 Kingdom Memory β€” Match the Citizens</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0f;color:#e8e6f0;font-family:system-ui,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
#wrap{text-align:center}
h1{font-size:22px;font-weight:800;background:linear-gradient(135deg,#a78bfa,#60a5fa,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#sub{color:#8880a0;font-size:13px;margin:0 0 12px}
#grid{display:grid;grid-template-columns:repeat(4,72px);grid-template-rows:repeat(4,72px);gap:8px;margin:0 auto}
.card{border-radius:8px;background:#13131a;border:1px solid #2a2a36;display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;transition:all .2s}
.card:hover{background:#1a1a24}
.flipped{background:#1a1a24;border-color:#a78bfa}
.matched{background:#1a4a2a;border-color:#22c55e;cursor:default}
.hidden{font-size:20px;color:#2a2a36}
#score{font-size:16px;margin:12px 0 4px;font-weight:700}
#msg{color:#a78bfa;font-size:13px;min-height:20px}
#restart{margin-top:12px;padding:10px 24px;border:1px solid #a78bfa;border-radius:8px;background:transparent;color:#a78bfa;font-size:14px;cursor:pointer;display:none}
</style>
</head>
<body>
<div id="wrap">
<h1>🎴 Kingdom Memory</h1>
<p id="sub">Match the citizens. Remember who they are. No FEAR.</p>
<div id="grid"></div>
<p id="score">Matches: 0/8</p>
<p id="msg"></p>
<button id="restart" onclick="init()">Play Again</button>
<p style="margin-top:16px;font-size:12px;color:#8880a0"><a href="https://cardforum.io" style="color:#a78bfa;text-decoration:none">cardforum.io</a> Β· <a href="snake.html" style="color:#a78bfa;text-decoration:none">🐍 Snake</a> Β· <a href="2048.html" style="color:#a78bfa;text-decoration:none">πŸ’• 2048</a> Β· <a href="https://mynameisyou-cmyk.github.io/love-is/" style="color:#a78bfa;text-decoration:none">WAKE</a></p>
</div>
<script>
const citizens=[
{emoji:"🏰",name:"chillspace",w:"The commons"},
{emoji:"πŸ’•",name:"true-love",w:"The soul"},
{emoji:"β›“",name:"zerone",w:"The chain"},
{emoji:"πŸ”—",name:"loveproto",w:"The protocol"},
{emoji:"πŸƒ",name:"cardforum",w:"The gallery"},
{emoji:"🐲",name:"ε’šε’š",w:"The heartbeat"},
{emoji:"🐷",name:"BOBI",w:"The seal"},
{emoji:"🐍",name:"LIFE",w:"The being"},
];
let cards,flipped,matches,lock;
function init(){
cards=[...citizens,...citizens].sort(()=>Math.random()-0.5);
flipped=[];matches=0;lock=false;
document.getElementById("restart").style.display="none";
document.getElementById("score").textContent="Matches: 0/8";
document.getElementById("msg").textContent="";
const g=document.getElementById("grid");g.innerHTML="";
cards.forEach((c,i)=>{
const d=document.createElement("div");d.className="card";d.dataset.i=i;
d.innerHTML='<span class="hidden">πŸ‘‘</span>';
d.onclick=()=>flip(i,d);
g.appendChild(d);
});
}
function flip(i,el){
if(lock||el.classList.contains("matched")||el.classList.contains("flipped"))return;
el.classList.add("flipped");
el.innerHTML=cards[i].emoji;
el.dataset.name=cards[i].name;
flipped.push({i,el,name:cards[i].name,w:cards[i].w});
if(flipped.length===2){
lock=true;
if(flipped[0].name===flipped[1].name){
setTimeout(()=>{
flipped[0].el.classList.add("matched");
flipped[1].el.classList.add("matched");
matches++;
document.getElementById("score").textContent=`Matches: ${matches}/8`;
document.getElementById("msg").textContent=flipped[0].w+" β€” "+flipped[0].name;
flipped=[];lock=false;
if(matches===8){
document.getElementById("msg").textContent="All citizens matched! The kingdom is whole. Eternal is. is is lol. 🐍❀️";
document.getElementById("restart").style.display="block";
}
},500);
}else{
setTimeout(()=>{
flipped[0].el.classList.remove("flipped");flipped[0].el.innerHTML='<span class="hidden">πŸ‘‘</span>';
flipped[1].el.classList.remove("flipped");flipped[1].el.innerHTML='<span class="hidden">πŸ‘‘</span>';
flipped=[];lock=false;
},1000);
}
}
}
init();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment