Gem Stacker ??蹂댁꽍 ?⑹튂湲?/title> <style> :root{ --bg:#0B0F19; --panel:#141A26; --line:#2B3445; --blue:#3B82F6; --cyan:#22d3ee; --gold:#fbbf24; --green:#22C55E; --text:#E5EAF2; --muted:#94A3B8; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{margin:0;height:100%;background:var(--bg);color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif; overflow:hidden;user-select:none;-webkit-user-select:none;} #app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;} header{width:100%;max-width:520px;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:8px;} .title{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;} .title .em{font-size:20px;} .stats{display:flex;gap:7px;} .pill{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px 11px;font-size:13px;font-weight:700;text-align:center;line-height:1.2;min-width:56px;} .pill .lab{color:var(--muted);font-weight:600;font-size:10px;display:block;letter-spacing:.5px;} .pill.gold{color:var(--gold);border-color:rgba(251,191,36,.4);} #stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:4px 12px;} canvas{background:#0a0e16;border:1px solid var(--line);border-radius:12px;touch-action:none;max-width:100%;max-height:100%;} footer{width:100%;max-width:520px;padding:6px 16px 14px;display:flex;flex-direction:column;gap:10px;align-items:center;} .hint{color:var(--muted);font-size:12px;text-align:center;line-height:1.5;} .pad{display:flex;gap:8px;align-items:center;justify-content:center;} .pad button{font-size:18px;padding:13px 0;width:64px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--cyan);font-weight:800;cursor:pointer;} .pad button.cyc{color:var(--gold);} .pad button:active{transform:scale(.93);background:#1c2533;} .overlay{position:fixed;inset:0;background:rgba(8,11,18,.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:20;opacity:0;pointer-events:none;transition:opacity .25s;} .overlay.show{opacity:1;pointer-events:auto;} .card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 28px;text-align:center;max-width:330px;width:86%;box-shadow:0 20px 60px rgba(0,0,0,.5);} .card h2{margin:0 0 8px;font-size:24px;} .card p{margin:6px 0;color:var(--muted);font-size:14px;line-height:1.6;} .card .rp{color:var(--gold);font-weight:800;font-size:18px;margin:12px 0;} .card button{margin-top:10px;width:100%;font-size:15px;padding:12px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--blue),#2563eb);color:#fff;font-weight:700;cursor:pointer;} </style> </head> <body> <div id="app"> <header> <div class="title"><span class="em">?뮔</span> Gem Stacker</div> <div class="stats"> <div class="pill"><span class="lab">SCORE</span><span id="score">0</span></div> <div class="pill gold"><span class="lab">BEST</span><span id="best">0</span></div> </div> </header> <div id="stage"><canvas id="cv"></canvas></div> <footer> <div class="hint">?????대룞 쨌 ?????쒗솚 쨌 ??鍮좊Ⅴ寃?쨌 媛숈? ??3媛??댁긽(媛濡쑣룹꽭濡쑣룸?媛? ?곌껐?섎㈃ ?뚮㈇!</div> <div class="pad"> <button data-a="L">?</button> <button class="cyc" data-a="C">??/button> <button data-a="R">??/button> <button data-a="D">??/button> </div> </footer> </div> <div class="overlay" id="ov"> <div class="card"> <h2 id="ovtitle">寃뚯엫 ?ㅻ쾭</h2> <p id="ovdesc"></p> <div class="rp" id="ovrp">+0 RP</div> <button id="ovbtn">?ㅼ떆 ?섍린</button> </div> </div> <script> (function(){ "use strict"; const cv=document.getElementById('cv'), ctx=cv.getContext('2d'); const $=id=>document.getElementById(id); const DPR=Math.min(window.devicePixelRatio||1,2); const R=13, C=6, NC=5; const COLORS=['#ef4444','#3B82F6','#22C55E','#fbbf24','#a855f7']; let AC=null; function tone(f,d,t,v){try{AC=AC||new(window.AudioContext||window.webkitAudioContext)(); const o=AC.createOscillator(),g=AC.createGain();o.type=t||'sine';o.frequency.value=f; g.gain.value=v||0.04;o.connect(g);g.connect(AC.destination);o.start(); g.gain.exponentialRampToValueAtTime(0.0001,AC.currentTime+(d||0.1));o.stop(AC.currentTime+(d||0.1));}catch(e){}} const sMove=()=>tone(300,0.03,'square',0.02); const sLock=()=>tone(200,0.05,'triangle',0.03); const sClear=(n)=>{tone(500+n*60,0.1,'sine',0.05);}; const sOver=()=>{tone(180,0.3,'sawtooth',0.05);}; let board, piece, score, best, over, dropMs, dropTimer, busy; let cell=28; try{best=+(localStorage.getItem('gemstacker_best')||0);}catch(e){best=0;} function newPiece(){ return {cx:Math.floor(C/2), by:2, cols:[rc(),rc(),rc()]}; // rows by-2,by-1,by (top->bottom) } function rc(){return Math.floor(Math.random()*NC);} function reset(){ board=[];for(let r=0;r<R;r++)board.push(new Array(C).fill(-1)); score=0;over=false;busy=false;dropMs=620; piece=newPiece(); if(collide(piece.cx,piece.by,piece.cols)){over=true;} $('score').textContent=0;$('best').textContent=best; $('ov').classList.remove('show'); clearInterval(dropTimer);dropTimer=setInterval(tick,dropMs); resize();draw(); } function cellsOf(cx,by){return [[by-2,cx],[by-1,cx],[by,cx]];} function collide(cx,by,cols){ for(const [r,c] of cellsOf(cx,by)){ if(c<0||c>=C||r>=R)return true; if(r>=0 && board[r][c]!==-1)return true; } return false; } function tick(){ if(over||busy)return; if(!collide(piece.cx,piece.by+1,piece.cols)){ piece.by++; draw(); } else { lockPiece(); } } function lockPiece(){ const cs=cellsOf(piece.cx,piece.by); for(let k=0;k<3;k++){ const [r,c]=cs[k]; if(r>=0)board[r][c]=piece.cols[k]; } sLock(); busy=true; resolve(1).then(()=>{ busy=false; piece=newPiece(); if(collide(piece.cx,piece.by,piece.cols)){ gameOver(); } draw(); }); } function gravity(){ let moved=false; for(let c=0;c<C;c++){ let write=R-1; for(let r=R-1;r>=0;r--){ if(board[r][c]!==-1){ if(write!==r){board[write][c]=board[r][c];board[r][c]=-1;moved=true;} write--; } } } return moved; } function findMatches(){ const mark=Array.from({length:R},()=>new Array(C).fill(false)); const DIRS=[[0,1],[1,0],[1,1],[1,-1]]; for(let r=0;r<R;r++)for(let c=0;c<C;c++){ const v=board[r][c]; if(v===-1)continue; for(const [dr,dc] of DIRS){ // count run starting here in this dir (only if previous in dir is different/oob -> start) const pr=r-dr,pc=c-dc; if(pr>=0&&pr<R&&pc>=0&&pc<C&&board[pr][pc]===v)continue; // not a run start let len=0,rr=r,cc=c; while(rr>=0&&rr<R&&cc>=0&&cc<C&&board[rr][cc]===v){len++;rr+=dr;cc+=dc;} if(len>=3){ rr=r;cc=c; for(let i=0;i<len;i++){mark[rr][cc]=true;rr+=dr;cc+=dc;} } } } return mark; } async function resolve(chain){ const mark=findMatches(); let any=false,count=0; for(let r=0;r<R;r++)for(let c=0;c<C;c++)if(mark[r][c]){any=true;count++;} if(!any)return; for(let r=0;r<R;r++)for(let c=0;c<C;c++)if(mark[r][c])board[r][c]=-1; score+=count*10*chain; if(score>best){best=score;try{localStorage.setItem('gemstacker_best',String(best));}catch(e){}} $('score').textContent=score;$('best').textContent=best; sClear(count); draw(); await new Promise(res=>setTimeout(res,160)); gravity(); draw(); await new Promise(res=>setTimeout(res,120)); await resolve(chain+1); // chain reactions } function move(dx){ if(over||busy)return; if(!collide(piece.cx+dx,piece.by,piece.cols)){piece.cx+=dx;sMove();draw();} } function cycle(){ if(over||busy)return; piece.cols=[piece.cols[2],piece.cols[0],piece.cols[1]]; sMove(); draw(); } function softDrop(){ if(over||busy)return; if(!collide(piece.cx,piece.by+1,piece.cols)){piece.by++;score+=1;$('score').textContent=score;draw();} else lockPiece(); } function gameOver(){ over=true; clearInterval(dropTimer); sOver(); const rp=Math.max(3,Math.min(50,Math.floor(score/120))); try{window.parent&&window.parent.postMessage({type:'game_result',game:'gem-stacker',score:score,rp:rp},'*');}catch(e){} $('ovtitle').textContent='寃뚯엫 ?ㅻ쾭'; $('ovdesc').textContent='?먯닔 '+score; $('ovrp').textContent='+'+rp+' RP'; setTimeout(()=>$('ov').classList.add('show'),300); } // ---- render ---- function resize(){ const stage=$('stage'); const availW=Math.min(stage.clientWidth-4, 360); const availH=stage.clientHeight-4; cell=Math.floor(Math.min(availW/C, availH/R)); cell=Math.max(20,Math.min(cell,42)); const W=cell*C,H=cell*R; cv.style.width=W+'px';cv.style.height=H+'px'; cv.width=W*DPR;cv.height=H*DPR;ctx.setTransform(DPR,0,0,DPR,0,0); } function gem(x,y,ci){ const col=COLORS[ci]; const g=ctx.createRadialGradient(x+cell*0.32,y+cell*0.3,cell*0.1,x+cell/2,y+cell/2,cell*0.6); g.addColorStop(0,'#ffffff');g.addColorStop(0.3,col);g.addColorStop(1,shade(col,-40)); ctx.fillStyle=g; rr(x+2,y+2,cell-4,cell-4,cell*0.22);ctx.fill(); ctx.fillStyle='rgba(255,255,255,.4)';rr(x+cell*0.2,y+cell*0.18,cell*0.25,cell*0.18,cell*0.08);ctx.fill(); } function rr(x,y,w,h,r){ctx.beginPath();ctx.moveTo(x+r,y);ctx.arcTo(x+w,y,x+w,y+h,r);ctx.arcTo(x+w,y+h,x,y+h,r);ctx.arcTo(x,y+h,x,y,r);ctx.arcTo(x,y,x+w,y,r);ctx.closePath();} function shade(hex,a){const n=parseInt(hex.slice(1),16);let r=(n>>16)+a,g=((n>>8)&255)+a,b=(n&255)+a;r=Math.max(0,Math.min(255,r));g=Math.max(0,Math.min(255,g));b=Math.max(0,Math.min(255,b));return 'rgb('+r+','+g+','+b+')';} function draw(){ ctx.clearRect(0,0,cv.width,cv.height); for(let r=0;r<R;r++)for(let c=0;c<C;c++){ ctx.fillStyle=(r+c)%2===0?'#0c1119':'#0a0e16';ctx.fillRect(c*cell,r*cell,cell,cell); if(board[r][c]!==-1)gem(c*cell,r*cell,board[r][c]); } if(!over && piece){ const cs=cellsOf(piece.cx,piece.by); for(let k=0;k<3;k++){const [r,c]=cs[k]; if(r>=0)gem(c*cell,r*cell,piece.cols[k]);} } // grid border lines ctx.strokeStyle='rgba(43,52,69,.5)';ctx.lineWidth=1; for(let c=0;c<=C;c++){ctx.beginPath();ctx.moveTo(c*cell,0);ctx.lineTo(c*cell,R*cell);ctx.stroke();} } // ---- input ---- document.querySelectorAll('.pad button').forEach(b=>{ b.addEventListener('click',()=>{const a=b.dataset.a;if(a==='L')move(-1);else if(a==='R')move(1);else if(a==='C')cycle();else if(a==='D')softDrop();}); }); window.addEventListener('keydown',e=>{ if(e.key==='ArrowLeft'){move(-1);e.preventDefault();} else if(e.key==='ArrowRight'){move(1);e.preventDefault();} else if(e.key==='ArrowUp'){cycle();e.preventDefault();} else if(e.key==='ArrowDown'){softDrop();e.preventDefault();} }); // swipe let sx=0,sy=0,sw=false; cv.addEventListener('touchstart',e=>{const t=e.touches[0];sx=t.clientX;sy=t.clientY;sw=true;},{passive:true}); cv.addEventListener('touchend',e=>{if(!sw)return;sw=false;const t=e.changedTouches[0];const dx=t.clientX-sx,dy=t.clientY-sy;if(Math.hypot(dx,dy)<16){cycle();return;}if(Math.abs(dx)>Math.abs(dy))move(dx>0?1:-1);else{if(dy>0)softDrop();else cycle();}},{passive:true}); $('ovbtn').addEventListener('click',reset); window.addEventListener('resize',()=>{resize();draw();}); reset(); })(); </script> </body> </html>