Hex Reactor ???↔컖 ?⑹튂湲?/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:560px;display:flex;align-items:center;justify-content:space-between; padding:10px 16px;gap:10px;} .title{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;} .title .em{font-size:20px;} .stats{display:flex;gap:8px;} .pill{background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:5px 12px;font-size:13px;font-weight:700;text-align:center;line-height:1.2;min-width:62px;} .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{touch-action:none;max-width:100%;max-height:100%;} footer{width:100%;max-width:560px;padding:6px 16px 14px;display:flex;flex-direction:column;gap:8px;align-items:center;} .hint{color:var(--muted);font-size:12px;text-align:center;line-height:1.5;} .controls{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:7px;} .controls button{font-size:18px;padding:0;border-radius:12px;border:1px solid var(--line); background:var(--panel);color:var(--cyan);font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;} .controls button:active{transform:scale(.92);background:#1c2533;} .row{display:flex;gap:10px;} 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 16px;} 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> Hex Reactor</div> <div class="stats"> <div class="pill"><span class="lab">SCORE</span><span id="score">0</span></div> <div class="pill"><span class="lab">BEST</span><span id="best">0</span></div> <div class="pill gold"><span class="lab">MAX</span><span id="max">2</span></div> </div> </header> <div id="stage"><canvas id="cv"></canvas></div> <footer> <div class="controls"> <button data-dir="ul">??/button> <button data-dir="u">??/button> <button data-dir="ur">??/button> <button data-dir="dl">??/button> <button data-dir="d">??/button> <button data-dir="dr">??/button> </div> <div class="hint">6諛⑺뼢?쇰줈 ???諛??媛숈? 媛믪쓣 ?⑹튂?몄슂 쨌 ?ㅼ??댄봽 / 踰꾪듉 / QWE쨌ASD ??/div> <div class="row"><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 RAD=2; // hexagon radius -> 19 cells // ---- audio ---- let AC=null; function beep(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.05;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=()=>beep(330,0.06,'triangle',0.035); const sMerge=()=>{beep(520,0.07,'square',0.04);}; const sOver=()=>{beep(200,0.2,'sawtooth',0.05);setTimeout(()=>beep(140,0.3,'sawtooth',0.05),120);}; // ---- hex cells (axial q,r), flat-top ---- let cells=[]; // list of {q,r} let board={}; // "q,r" -> value (0/undefined empty) function key(q,r){return q+','+r;} function buildCells(){ cells=[]; for(let q=-RAD;q<=RAD;q++)for(let r=-RAD;r<=RAD;r++){ if(Math.abs(q+r)<=RAD) cells.push({q,r}); } } function inBoard(q,r){return Math.abs(q)<=RAD&&Math.abs(r)<=RAD&&Math.abs(q+r)<=RAD;} // 6 directions (axial), flat-top const DIRS={ dr:{dq:1,dr:0}, ur:{dq:1,dr:-1}, u:{dq:0,dr:-1}, ul:{dq:-1,dr:0}, dl:{dq:-1,dr:1}, d:{dq:0,dr:1} }; let score=0,best=0,maxTile=2,over=false; try{best=+(localStorage.getItem('hexreactor_best')||0);}catch(e){} function emptyCells(){return cells.filter(c=>!board[key(c.q,c.r)]);} function spawn(){ const e=emptyCells(); if(!e.length) return false; const c=e[Math.floor(Math.random()*e.length)]; board[key(c.q,c.r)]=Math.random()<0.9?2:4; return true; } function reset(){ board={};score=0;maxTile=2;over=false; spawn();spawn(); updateStats();$('ov').classList.remove('show');resize();draw(); } function updateStats(){ $('score').textContent=score;$('best').textContent=best;$('max').textContent=maxTile; } // merge a line of values toward index 0 (front). returns {res,gained,changed} function mergeFront(vals){ const a=vals.filter(v=>v); const res=[];let gained=0; for(let i=0;i<a.length;i++){ if(i+1<a.length&&a[i]===a[i+1]){res.push(a[i]*2);gained+=a[i]*2;i++;} else res.push(a[i]); } while(res.length<vals.length)res.push(0); let changed=false; for(let i=0;i<vals.length;i++)if((vals[i]||0)!==res[i]){changed=true;break;} return {res,gained,changed}; } // grouping for a direction function lineKeyOrder(dir,q,r){ // returns [lineKey, order]; front = higher order = direction of movement switch(dir){ case 'dr': return ['r'+r, q]; case 'ul': return ['r'+r, -q]; case 'd': return ['q'+q, r]; case 'u': return ['q'+q, -r]; case 'ur': return ['s'+(q+r), q]; case 'dl': return ['s'+(q+r), -q]; } } function move(dir){ if(over) return; const lines={}; for(const c of cells){ const [lk,ord]=lineKeyOrder(dir,c.q,c.r); (lines[lk]=lines[lk]||[]).push({c,ord}); } let anyChange=false,gainTotal=0,merged=false; for(const lk in lines){ const arr=lines[lk].sort((a,b)=>b.ord-a.ord); // front first const vals=arr.map(x=>board[key(x.c.q,x.c.r)]||0); const {res,gained,changed}=mergeFront(vals); if(changed)anyChange=true; if(gained>0)merged=true; gainTotal+=gained; for(let i=0;i<arr.length;i++){ const k=key(arr[i].c.q,arr[i].c.r); if(res[i])board[k]=res[i];else delete board[k]; } } if(anyChange){ score+=gainTotal; for(const c of cells){const v=board[key(c.q,c.r)]||0;if(v>maxTile)maxTile=v;} if(score>best){best=score;try{localStorage.setItem('hexreactor_best',String(best));}catch(e){}} spawn(); updateStats(); merged?sMerge():sMove(); draw(); if(!canMove())gameOver(); } } function canMove(){ if(emptyCells().length)return true; for(const d in DIRS){ for(const c of cells){ const v=board[key(c.q,c.r)];if(!v)continue; const nq=c.q+DIRS[d].dq,nr=c.r+DIRS[d].dr; if(inBoard(nq,nr)&&board[key(nq,nr)]===v)return true; } } return false; } function gameOver(){ over=true;sOver(); const rp=Math.max(3,Math.min(50,Math.floor(score/120)+(Math.log2(maxTile)|0))); try{window.parent&&window.parent.postMessage({type:'game_result',game:'robo-2048-hex',score:score,rp:rp},'*');}catch(e){} $('ovtitle').textContent= maxTile>=2048?'?룇 2048 ?ъ꽦!':'寃뚯엫 ?ㅻ쾭'; $('ovdesc').textContent='?먯닔 '+score+' 쨌 理쒕? ? '+maxTile; $('ovrp').textContent='+'+rp+' RP'; setTimeout(()=>$('ov').classList.add('show'),300); } // ---- rendering (flat-top hex) ---- let size=34, cx=0, cy=0; function resize(){ const stage=$('stage'); const availW=Math.min(stage.clientWidth-4,520); const availH=stage.clientHeight-4; // board pixel extent: width = size*(3/2*(2RAD))+2*size ; height=size*sqrt3*(2RAD+RAD)+... // compute size to fit const w_units=3/2*(2*RAD)+2; // in 'size' units (x) const h_units=Math.sqrt(3)*(2*RAD+1)+0.5; // in 'size' units (y) size=Math.floor(Math.min(availW/w_units, availH/h_units)); size=Math.max(22,Math.min(size,46)); const W=Math.ceil(size*w_units), H=Math.ceil(size*h_units); 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); cx=W/2; cy=H/2; } function hexPixel(q,r){ return {x:cx+size*(3/2*q), y:cy+size*(Math.sqrt(3)*(r+q/2))}; } function hexPath(x,y,s){ ctx.beginPath(); for(let i=0;i<6;i++){const a=Math.PI/180*(60*i);ctx.lineTo(x+s*Math.cos(a),y+s*Math.sin(a));} ctx.closePath(); } function tileColor(v){ if(!v) return {bg:'#10151f',fg:'transparent',br:'#1b2433'}; const e=Math.log2(v); // 1..11 const t=Math.min(1,(e-1)/10); // blue(210) -> cyan(190) -> gold(45) let hue, sat=70, lig; if(t<0.5){ hue=210-(210-185)*(t/0.5); lig=26+18*(t/0.5); } else { hue=185-(185-45)*((t-0.5)/0.5); lig=44+8*((t-0.5)/0.5); sat=78; } const bg=`hsl(${hue.toFixed(0)},${sat}%,${lig.toFixed(0)}%)`; const fg= e<=2? '#cbd5e1' : (t>0.55?'#1a1206':'#eaf6ff'); return {bg,fg,br:`hsl(${hue.toFixed(0)},${sat}%,${(lig+10).toFixed(0)}%)`}; } function draw(){ ctx.clearRect(0,0,cv.width,cv.height); for(const c of cells){ const {x,y}=hexPixel(c.q,c.r); const v=board[key(c.q,c.r)]||0; const col=tileColor(v); hexPath(x,y,size*0.94); ctx.fillStyle=col.bg;ctx.fill(); ctx.lineWidth=2;ctx.strokeStyle=col.br;ctx.stroke(); if(v){ if(v>=128){ctx.shadowColor=col.bg;ctx.shadowBlur=12;hexPath(x,y,size*0.94);ctx.fillStyle=col.bg;ctx.fill();ctx.shadowBlur=0;} ctx.fillStyle=col.fg; let fs=size* (v<100?0.62: v<1000?0.5:0.4); ctx.font='800 '+fs+'px -apple-system,Segoe UI,Roboto,sans-serif'; ctx.textAlign='center';ctx.textBaseline='middle'; ctx.fillText(v,x,y+1); } } } // ---- input ---- document.querySelectorAll('.controls button').forEach(b=>{ b.addEventListener('click',()=>move(b.dataset.dir)); }); $('newgame').addEventListener('click',reset); $('ovbtn').addEventListener('click',reset); window.addEventListener('keydown',e=>{ const m={q:'ul',w:'u',e:'ur',a:'dl',s:'d',d:'dr'}; const k=e.key.toLowerCase(); if(m[k]){e.preventDefault();move(m[k]);} }); // swipe / drag -> nearest of 6 directions let sx=0,sy=0,sd=false; function dirFromVec(dx,dy){ const ang=Math.atan2(dy,dx); // radians // direction pixel angles (flat-top): dr=30,ur=-30 (-330? ), u=-90,ul=210/-150,dl=150,d=90 const cand={dr:30,ur:-30,u:-90,ul:-150,dl:150,d:90}; let bestd=null,bestdiff=999; for(const k in cand){ let diff=Math.abs(((ang*180/Math.PI)-cand[k]+540)%360-180); if(diff<bestdiff){bestdiff=diff;bestd=k;} } return bestd; } function down(x,y){sx=x;sy=y;sd=true;} function up(x,y){if(!sd)return;sd=false;const dx=x-sx,dy=y-sy;if(Math.hypot(dx,dy)>24)move(dirFromVec(dx,dy));} cv.addEventListener('mousedown',e=>down(e.clientX,e.clientY)); cv.addEventListener('mouseup',e=>up(e.clientX,e.clientY)); cv.addEventListener('touchstart',e=>{const t=e.changedTouches[0];down(t.clientX,t.clientY);},{passive:true}); cv.addEventListener('touchend',e=>{e.preventDefault();const t=e.changedTouches[0];up(t.clientX,t.clientY);},{passive:false}); window.addEventListener('resize',()=>{resize();draw();}); buildCells(); reset(); })(); </script> </body> </html>