Robo Reversi ??AI ?ㅻ뜽濡?/title> <style> :root{ --bg:#0B0F19; --panel:#141A26; --line:#2B3445; --blue:#3B82F6; --cyan:#22d3ee; --gold:#fbbf24; --green:#22C55E; --red:#ef4444; --text:#E5EAF2; --muted:#94A3B8; --board:#0e7c5a; } *{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;} .scores{display:flex;gap:8px;} .sc{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px 12px;font-weight:800;font-size:15px;} .dot{width:15px;height:15px;border-radius:50%;} .dot.you{background:radial-gradient(circle at 35% 30%,#7de3ff,#22d3ee 60%,#0e7490);} .dot.ai{background:radial-gradient(circle at 35% 30%,#ff9a9a,#ef4444 60%,#7f1d1d);} .sc.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;} #stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:4px 12px;} canvas{background:var(--board);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:8px;align-items:center;} .turn{font-size:13px;font-weight:700;color:var(--muted);min-height:18px;text-align:center;} .row{display:flex;gap:10px;align-items:center;} select,button.act{font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:9px 14px;} button.act:active{transform:scale(.96);} .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> Robo Reversi</div> <div class="scores"> <div class="sc" id="scYou"><span class="dot you"></span><span id="cntYou">2</span></div> <div class="sc" id="scAi"><span class="dot ai"></span><span id="cntAi">2</span></div> </div> </header> <div id="stage"><canvas id="cv"></canvas></div> <footer> <div class="turn" id="turn">?뱀떊 李⑤? (?쒖븞)</div> <div class="row"> <select id="diff"> <option value="2">?ъ?</option> <option value="4" selected>蹂댄넻</option> <option value="6">?대젮?</option> </select> <button class="act" id="newgame">??寃뚯엫</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 N=8; const YOU=1, AI=2; const W=[ [120,-20,20,5,5,20,-20,120], [-20,-40,-5,-5,-5,-5,-40,-20], [20,-5,15,3,3,15,-5,20], [5,-5,3,3,3,3,-5,5], [5,-5,3,3,3,3,-5,5], [20,-5,15,3,3,15,-5,20], [-20,-40,-5,-5,-5,-5,-40,-20], [120,-20,20,5,5,20,-20,120]]; const DIRS=[[-1,-1],[-1,0],[-1,1],[0,-1],[0,1],[1,-1],[1,0],[1,1]]; 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 sPlace=()=>tone(420,0.06,'triangle',0.04); const sFlip=()=>tone(620,0.05,'sine',0.03); const sWin=()=>{[523,659,784,1046].forEach((f,i)=>setTimeout(()=>tone(f,0.14,'sine',0.06),i*100));}; const sLose=()=>{tone(200,0.25,'sawtooth',0.05);}; let board, turn, depth=4, busy=false, gameover=false; let cell=44, valid=[]; function init(){ board=[];for(let r=0;r<N;r++)board.push(new Array(N).fill(0)); board[3][3]=YOU;board[4][4]=YOU;board[3][4]=AI;board[4][3]=AI; turn=YOU;gameover=false;busy=false; depth=+$('diff').value; $('ov').classList.remove('show'); recompute();resize();draw(); } const opp=p=>p===YOU?AI:YOU; function flipsFor(bd,p,r,c){ if(bd[r][c]!==0)return []; const out=[]; for(const [dr,dc] of DIRS){ let rr=r+dr,cc=c+dc;const line=[]; while(rr>=0&&cc>=0&&rr<N&&cc<N&&bd[rr][cc]===opp(p)){line.push([rr,cc]);rr+=dr;cc+=dc;} if(line.length&&rr>=0&&cc>=0&&rr<N&&cc<N&&bd[rr][cc]===p)out.push(...line); } return out; } function validMoves(bd,p){ const m=[];for(let r=0;r<N;r++)for(let c=0;c<N;c++){if(bd[r][c]!==0)continue;if(flipsFor(bd,p,r,c).length)m.push([r,c]);}return m; } function applyMove(bd,p,r,c){ const nb=bd.map(row=>row.slice());const fl=flipsFor(bd,p,r,c); nb[r][c]=p;for(const [rr,cc] of fl)nb[rr][cc]=p;return {nb,flipped:fl.length}; } function counts(bd){let y=0,a=0;for(let r=0;r<N;r++)for(let c=0;c<N;c++){if(bd[r][c]===YOU)y++;else if(bd[r][c]===AI)a++;}return {y,a};} // ---- AI: minimax + alpha-beta, eval from AI perspective ---- function evalBoard(bd){ const empties=64-counts(bd).y-counts(bd).a; let pos=0; for(let r=0;r<N;r++)for(let c=0;c<N;c++){if(bd[r][c]===AI)pos+=W[r][c];else if(bd[r][c]===YOU)pos-=W[r][c];} const myM=validMoves(bd,AI).length, opM=validMoves(bd,YOU).length; const mob=(myM-opM)*5; if(empties<=8){const c=counts(bd);return (c.a-c.y)*50+pos;} // endgame: disc count dominates return pos+mob; } function minimax(bd,player,d,a,b){ const moves=validMoves(bd,player); if(d===0){return {score:evalBoard(bd)};} if(moves.length===0){ // pass; if opponent also can't move -> terminal if(validMoves(bd,opp(player)).length===0)return {score:evalBoard(bd)}; return minimax(bd,opp(player),d-1,a,b); } // order moves by static value (helps pruning) moves.sort((m1,m2)=>W[m2[0]][m2[1]]-W[m1[0]][m1[1]]); let bestMove=moves[0]; if(player===AI){ let best=-1e9; for(const [r,c] of moves){const {nb}=applyMove(bd,player,r,c); const s=minimax(nb,YOU,d-1,a,b).score; if(s>best){best=s;bestMove=[r,c];} a=Math.max(a,best);if(b<=a)break;} return {score:best,move:bestMove}; } else { let best=1e9; for(const [r,c] of moves){const {nb}=applyMove(bd,player,r,c); const s=minimax(nb,AI,d-1,a,b).score; if(s<best){best=s;bestMove=[r,c];} b=Math.min(b,best);if(b<=a)break;} return {score:best,move:bestMove}; } } function recompute(){ valid = turn===YOU ? validMoves(board,YOU) : []; const c=counts(board);$('cntYou').textContent=c.y;$('cntAi').textContent=c.a; $('scYou').classList.toggle('active',turn===YOU&&!gameover); $('scAi').classList.toggle('active',turn===AI&&!gameover); } function nextTurn(){ // check end / passes const youM=validMoves(board,YOU).length, aiM=validMoves(board,AI).length; if(youM===0&&aiM===0){endGame();return;} if(turn===YOU){ if(validMoves(board,YOU).length===0){ turn=AI; $('turn').textContent='?뱀떊? ??怨녹씠 ?놁뼱 ?⑥뒪'; setTimeout(aiTurn,700); recompute();draw(); return; } $('turn').textContent='?뱀떊 李⑤? (?쒖븞)'; recompute();draw(); } else { if(validMoves(board,AI).length===0){ turn=YOU; $('turn').textContent='AI ?⑥뒪 ???뱀떊 李⑤?'; recompute();draw(); return; } setTimeout(aiTurn,420); } } function aiTurn(){ if(gameover)return; busy=true;$('turn').textContent='AI媛 ?앷컖 以묅?;draw(); setTimeout(()=>{ const {move}=minimax(board,AI,depth,-1e9,1e9); if(move){const {nb,flipped}=applyMove(board,AI,move[0],move[1]);board=nb;sPlace();if(flipped)setTimeout(sFlip,80);} busy=false;turn=YOU;recompute(); nextTurn(); },30); } function endGame(){ gameover=true; const c=counts(board); const win=c.y>c.a, tie=c.y===c.a; win?sWin():sLose(); const rp=Math.max(4,Math.min(50, (win?22:tie?12:6) + Math.abs(c.y-c.a))); try{window.parent&&window.parent.postMessage({type:'game_result',game:'robo-reversi',score:c.y,rp:rp},'*');}catch(e){} $('turn').textContent=''; $('ovtitle').textContent=win?'?룇 ?밸━!':tie?'臾댁듅遺':'?⑤같'; $('ovdesc').textContent='?쒖븞 '+c.y+' : '+c.a+' ?덈뱶'; $('ovrp').textContent='+'+rp+' RP'; recompute();draw(); setTimeout(()=>$('ov').classList.add('show'),400); } // ---- render ---- function resize(){ const stage=$('stage'); const s=Math.min(stage.clientWidth-4, stage.clientHeight-4, 480); cell=Math.floor(s/N); const W2=cell*N; cv.style.width=W2+'px';cv.style.height=W2+'px'; cv.width=W2*DPR;cv.height=W2*DPR;ctx.setTransform(DPR,0,0,DPR,0,0); } function draw(){ const px=cell*N; ctx.clearRect(0,0,px,px); // board grid ctx.fillStyle='#0e7c5a';ctx.fillRect(0,0,px,px); ctx.strokeStyle='rgba(0,0,0,.35)';ctx.lineWidth=1; for(let i=0;i<=N;i++){ctx.beginPath();ctx.moveTo(i*cell,0);ctx.lineTo(i*cell,px);ctx.stroke();ctx.beginPath();ctx.moveTo(0,i*cell);ctx.lineTo(px,i*cell);ctx.stroke();} // star points ctx.fillStyle='rgba(0,0,0,.4)'; [[2,2],[2,6],[6,2],[6,6]].forEach(([r,c])=>{ctx.beginPath();ctx.arc(c*cell,r*cell,3,0,7);ctx.fill();}); // valid hints if(turn===YOU&&!gameover&&!busy){ for(const [r,c] of valid){ctx.fillStyle='rgba(255,255,255,.22)';ctx.beginPath();ctx.arc(c*cell+cell/2,r*cell+cell/2,cell*0.14,0,7);ctx.fill();} } // discs for(let r=0;r<N;r++)for(let c=0;c<N;c++){ if(board[r][c]===0)continue; disc(c*cell+cell/2,r*cell+cell/2,cell*0.40,board[r][c]); } } function disc(x,y,rad,p){ const g=ctx.createRadialGradient(x-rad*0.3,y-rad*0.35,rad*0.1,x,y,rad); if(p===YOU){g.addColorStop(0,'#bff3ff');g.addColorStop(0.55,'#22d3ee');g.addColorStop(1,'#0e7490');} else{g.addColorStop(0,'#ffc4c4');g.addColorStop(0.55,'#ef4444');g.addColorStop(1,'#7f1d1d');} ctx.fillStyle=g;ctx.beginPath();ctx.arc(x,y,rad,0,7);ctx.fill(); ctx.strokeStyle='rgba(0,0,0,.25)';ctx.lineWidth=1;ctx.stroke(); } // ---- input ---- function tap(cx,cy){ if(turn!==YOU||busy||gameover)return; const rct=cv.getBoundingClientRect(); const c=Math.floor((cx-rct.left)/cell), r=Math.floor((cy-rct.top)/cell); if(r<0||c<0||r>=N||c>=N)return; if(!valid.some(([vr,vc])=>vr===r&&vc===c))return; const {nb,flipped}=applyMove(board,YOU,r,c);board=nb;sPlace();if(flipped)setTimeout(sFlip,80); turn=AI;recompute();draw(); nextTurn(); } cv.addEventListener('click',e=>tap(e.clientX,e.clientY)); cv.addEventListener('touchend',e=>{e.preventDefault();const t=e.changedTouches[0];tap(t.clientX,t.clientY);},{passive:false}); $('newgame').addEventListener('click',init); $('ovbtn').addEventListener('click',init); $('diff').addEventListener('change',()=>{depth=+$('diff').value;}); window.addEventListener('resize',()=>{resize();draw();}); init(); })(); </script> </body> </html>