경제 블록 퍼즐

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>경제 블록 퍼즐 – 안전 임베드</title> <meta http-equiv="Content-Security-Policy" content=" default-src 'none'; script-src 'self' 'unsafe-inline' data: blob:; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; media-src 'self' blob:; connect-src 'none'; worker-src blob:; object-src 'none'; frame-src 'none'; base-uri 'none'; form-action 'none'; prefetch-src 'none'; navigate-to 'none'; "> <style> :root{ --bg:#f6f8fd; --panel:#fff; --border:#e5e7eb; --text:#0f172a; --muted:#475569; --accent:#1f2937; --good:#0ea5e9; --bad:#ef4444 } *{ box-sizing:border-box } html,body{ height:100% } body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Pretendard,sans-serif; overflow-wrap:anywhere } .wrap{ max-width:980px; margin:0 auto; padding:16px 16px 28px } .hud{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:10px 0 } .card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px; min-width:0 } .grid{ display:grid; gap:6px; user-select:none } .cell{ width:38px; height:38px; display:grid; place-items:center; border-radius:9px; position:relative; transition:transform .12s, opacity .12s } .cell i{ display:block; width:100%; height:100%; border-radius:8px; background:#ddd; } .cell .centerBadge{ position:absolute; inset:auto 4px 4px auto; font-size:14px } .sel{ outline:2px solid var(--good) } .lineH::after, .lineV::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; opacity:.8; border-radius:2px } .lineH::after{ width:80%; height:6px } .lineV::after{ width:6px; height:80% } .wild{ background:repeating-conic-gradient(from 0deg,#fff 0 10%,#ddd 10% 20%) !important } .hint{ box-shadow:0 0 0 3px #fde047 inset } .toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); background:#111; color:#fff; padding:10px 14px; border-radius:22px; transition:opacity .3s; z-index:9999; max-width:calc(100vw - 32px) } .bar{ height:8px; border-radius:999px; background:linear-gradient(90deg,#22d3ee,#60a5fa) } .muted{ color:var(--muted) } .btn{ padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--panel); cursor:pointer; color:inherit } .btn:disabled{ opacity:.5; cursor:not-allowed } .row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center } .kv{ display:flex; gap:8px; align-items:center; justify-content:space-between; min-width:0 } .mono{ font-variant-numeric:tabular-nums } footer.site-footer{ max-width:980px; margin:12px auto 0; padding:10px 12px; font-size:12px; color:var(--muted); text-align:center; border-top:1px dashed var(--border); background:transparent; } select.btn,input.btn{ appearance:auto } @media (max-width:720px){ .hud{ grid-template-columns:1fr 1fr } } @media (max-width:420px){ .hud{ grid-template-columns:1fr } .cell{ width:34px; height:34px } } </style> </head> <body> <div class="wrap"> <h1 style="margin:8px 0 4px;">경제 블록 퍼즐 <span class="muted" style="font-size:14px;">– 안전 임베드</span></h1> <script> 'use strict'; (function harden(){ try{ const block = (name, obj, prop) => { try{ const fn = function(){ throw new Error('blocked:' + name) }; Object.defineProperty(obj, prop, { configurable:false, enumerable:false, writable:false, value: fn }); }catch(_){} }; block('eval', window, 'eval'); block('Function', window, 'Function'); block('open', window, 'open'); block('doc.write', Document.prototype, 'write'); block('doc.writeln', Document.prototype, 'writeln'); block('fetch', window, 'fetch'); block('XMLHttpRequest', window, 'XMLHttpRequest'); block('WebSocket', window, 'WebSocket'); block('EventSource', window, 'EventSource'); if(navigator && 'sendBeacon' in navigator){ try{ navigator.sendBeacon = function(){ return false } }catch(_){ } } try{ window.name = '' }catch(_){} try{ const safeLog = console.log.bind(console); console.debug = function(){}; console.trace = function(){}; safeLog('%c[SECURE MODE] 콘솔 디버그 최소화', 'font-weight:bold'); }catch(_){} }catch(_){} })(); </script> <div class="hud"> <div class="card kv"><div>점수</div><div id="score" class="mono">0</div></div> <div class="card kv"><div>콤보</div><div id="combo" class="mono">x1</div></div> <div class="card kv"><div>피버</div><div class="mono"><span id="feverTxt">OFF</span><div class="bar" id="feverBar" style="margin-top:6px;width:0%"></div></div></div> <div class="card kv"><div>미션</div><div id="mission" class="mono">-</div></div> <div class="card kv"><div>코인</div><div id="coins" class="mono">0</div></div> <div class="card kv"><div>최고</div><div id="best" class="mono">0</div></div> </div> <div class="card"> <div class="row" style="margin-bottom:8px;"> <label>모드 <select id="modeSel" class="btn"> <option value="casual">캐주얼</option> <option value="moves">이동 제한</option> <option value="timer">타이머</option> </select> </label> <label>난이도 <select id="diffSel" class="btn"> <option value="easy">쉬움</option> <option value="normal" selected>보통</option> <option value="hard">어려움</option> <option value="master">마스터</option> </select> </label> <label class="kv"><span>효과음</span><input id="soundChk" type="checkbox" class="btn" /></label> <div id="limitBox" class="kv" style="margin-left:auto;"> <span>제한</span><strong id="limit" class="mono">∞</strong> </div> </div> <div class="row"> <button id="hint" class="btn" type="button">힌트</button> <button id="quest" class="btn" type="button">미션 변경</button> <button id="shuffle" class="btn" type="button">셔플</button> <button id="reset" class="btn" type="button">새로 시작</button> <button id="help" class="btn" type="button">도움말</button> <button id="p_line" class="btn" type="button">파워업: 세로라인(-2c)</button> <button id="p_bomb" class="btn" type="button">파워업: 폭탄3×3(-3c)</button> <button id="p_shuffle" class="btn" type="button">파워업: 셔플(-1c)</button> </div> <div id="helpBox" class="muted" style="display:none; margin-top:8px; font-size:14px;"> 퀴즈를 풀면 목표 모양이 단계적으로 공개됩니다. 모두 공개되면 ‘배경 블록 1개만 남기기’ 조건을 달성해 중앙을 해제해 보세요. </div> </div> <div class="card"> <div class="kv"><div>뉴스</div><div id="news" class="mono">시작!</div></div> <div id="statusList" class="muted" style="margin-top:6px; font-size:14px;"></div> <div style="margin-top:6px;"> 진행: <span id="revealProg" class="mono">0 / 0</span> · 배경 잔여: <span id="bgLeft" class="mono">-</span> · 중앙: <span id="centerLock" class="mono">🔒 잠김</span> </div> </div> <div id="board" class="card"></div> <div id="quoteBox" class="card" style="display:none;"> <div id="quoteText" style="font-style:italic;"></div> <div id="quoteWho" class="muted" style="margin-top:6px;"></div> </div> <footer class="site-footer" aria-label="저작권 표기"> 경제 블록 퍼즐 © 2025 Happycode7. All rights reserved. </footer> </div> <script> 'use strict'; const __ECON_EMBED_TOKEN__ = '__ECON_EMBED_TOKEN__'; const Store = (() => { const ok = (() => { try { const k='__t'; localStorage.setItem(k,'1'); localStorage.removeItem(k); return true } catch(e){ return false } })(); const P = 'econPuzzle:'; return { get: (k, f=null) => { if(!ok) return f; try{ const v=localStorage.getItem(P+k); return v==null?f:JSON.parse(v) }catch(e){ return f } }, set: (k, v) => { if(!ok) return; try{ localStorage.setItem(P+k, JSON.stringify(v)) }catch(e){} }, getStr: (k, f='') => { if(!ok) return f; try{ const v=localStorage.getItem(P+k); return v==null?f:v }catch(e){ return f } }, setStr: (k, v) => { if(!ok) return; try{ localStorage.setItem(P+k, String(v)) }catch(e){} } } })(); const rnd = n => Math.floor(Math.random()*n); const toast = (msg,ms=1600) => { const t=document.createElement('div'); t.className='toast'; t.textContent=msg; document.body.appendChild(t); setTimeout(()=>{ t.style.opacity='0'; setTimeout(()=>t.remove(),350) },ms) }; const news = t => { const el = document.getElementById('news'); if(el) el.textContent = t }; let sOn = false, audioBooted = false, ac, o, g; const bootAudio = () => { if(audioBooted) return; try{ ac = new (window.AudioContext||window.webkitAudioContext)(); g = ac.createGain(); g.connect(ac.destination); g.gain.value = 0.05; audioBooted = true; }catch(e){} }; const beep = (type='ok') => { if(!sOn || !audioBooted || !ac) return; try{ o = ac.createOscillator(); o.type='sine'; o.frequency.value = (type==='bad'?220:(type==='combo'?660:440)); o.connect(g); const t=ac.currentTime; g.gain.setValueAtTime(0.05,t); g.gain.exponentialRampToValueAtTime(0.0001,t+0.12); o.start(); o.stop(t+0.14); }catch(e){} }; let W=6,H=8,COLORS=6; let grid=[], sel=null, busy=false; let score=0, combo=1, feverLeft=0, feverId=null, eventMul=1, eventLeft=0, timerId=null; let coins = 0, best = 0, mode='casual'; let finalStage=false, needBgOne=true; let patternMask=[], revealSteps=[], revealIndex=0; let badges=[], quest={k:'score',n:1500,left:1500,prize:1}; const colBG = ['#fee2e2','#e0e7ff','#dcfce7','#fef3c7','#e9d5ff','#cffafe','#fde68a']; const boardEl = document.getElementById('board'); const modeSel = document.getElementById('modeSel'); const diffSel = document.getElementById('diffSel'); const soundChk = document.getElementById('soundChk'); const scoreEl = document.getElementById('score'); const comboEl = document.getElementById('combo'); const feverTxt = document.getElementById('feverTxt'); const feverBar = document.getElementById('feverBar'); const missionEl= document.getElementById('mission'); const coinsEl = document.getElementById('coins'); const bestEl = document.getElementById('best'); const limitEl = document.getElementById('limit'); const limitBox = document.getElementById('limitBox'); const statusList = document.getElementById('statusList'); const bgLeftEl = document.getElementById('bgLeft'); const centerLockEl = document.getElementById('centerLock'); const revealProg = document.getElementById('revealProg'); const helpBox = document.getElementById('helpBox'); const quoteBox = document.getElementById('quoteBox'); const quoteText= document.getElementById('quoteText'); const quoteWho = document.getElementById('quoteWho'); function setStatusLines(lines){ const frag = document.createDocumentFragment(); for(const t of lines){ const div = document.createElement('div'); div.textContent = '• '+t; frag.appendChild(div); } statusList.replaceChildren(frag); } function shapeEmoji(s){ if(s.startsWith('heart')) return '❤'; if(s.startsWith('clover')) return '🍀'; if(s.startsWith('shamrock')) return '☘'; return '★'; } function makeCell(color,kind='N',shape=''){return {color,kind,shape}} function key(r,c){return r+','+c} function isAdj(a,b){return a&&b&&((Math.abs(a.r-b.r)+Math.abs(a.c-b.c))===1)} function eq(a,b){ return !!(a && b && ((a.kind==='W'||b.kind==='W') || a.color===b.color)) } function setGridCSS(){ boardEl.style.setProperty('display','grid'); boardEl.style.setProperty('grid-template-columns', `repeat(${W}, 38px)`); boardEl.style.setProperty('gap','6px'); boardEl.style.setProperty('justify-content','start'); boardEl.style.setProperty('overflow','auto'); } function render(){ boardEl.innerHTML=''; for(let r=0;r<H;r++){ for(let c=0;c<W;c++){ const d=document.createElement('div'); d.className='cell'; d.id='r'+r+'c'+c; d.addEventListener('click', () => onCellClick(r,c,d), {passive:true}); boardEl.appendChild(d); } } renderCells(Array.from({length:H*W},(_,i)=>({r:Math.floor(i/W), c:i%W}))); updateHUD(); } function renderCells(list){ for(const p of list){ const d=document.getElementById('r'+p.r+'c'+p.c); if(!d) continue; d.classList.remove('lineH','lineV'); d.innerHTML=''; const i=document.createElement('i'); const v=grid[p.r] && grid[p.r][p.c]; if(!v){ continue } if(v.kind==='S'){ i.textContent=shapeEmoji(v.shape); i.style.background=colBG[v.color%colBG.length]; i.style.color='#be123c' } else{ i.style.background=colBG[v.color%colBG.length]; if(v.kind==='H') d.classList.add('lineH'); if(v.kind==='V') d.classList.add('lineV'); if(v.kind==='W') i.className='wild'; } if(finalStage && p.r===Math.floor(H/2) && p.c===Math.floor(W/2)){ const b=document.createElement('div'); b.className='centerBadge'; const can=(!needBgOne||countBackgroundBlocks()<=1); b.textContent=can?'🔓 해제':'🔒 잠김'; d.appendChild(b) } d.appendChild(i); d.style.transform='scale(1.06)'; setTimeout(()=>{ if(d.isConnected) d.style.transform='' },90) } } function swap(a,b){ if(!grid[a.r] || !grid[b.r]) return; const t=grid[a.r][a.c]; grid[a.r][a.c]=grid[b.r][b.c]; grid[b.r][b.c]=t; renderCells([a,b]) } function onCellClick(r,c,el){ if(!audioBooted) bootAudio(); if(finalStage){ const cr=Math.floor(H/2), cc=Math.floor(W/2); if(r===cr && c===cc){ const bgLeft=countBackgroundBlocks(); if(!needBgOne||bgLeft<=1){ showQuote(); return } news('중앙은 아직 잠금입니다. 배경 블록을 1개만 남겨주세요. (현재 '+bgLeft+'개)'); toast('배경 1개 조건 충족 시 해제됩니다.'); return; } } if(busy) return; const cur={r,c}; if(sel && sel.r===r && sel.c===c){ document.getElementById('r'+sel.r+'c'+sel.c)?.classList.remove('sel'); sel=null; return } if(!sel){ sel=cur; el.classList.add('sel'); return } if(isAdj(sel,cur)){ swap(sel,cur); let m=findMatches(); if(m.total>0){ document.getElementById('r'+sel.r+'c'+sel.c)?.classList.remove('sel'); sel=null; if(mode==='moves') moves=Math.max(0,moves-1); resolve(m); }else{ swap(sel,cur); news('인접 교체 후 3개 이상 연결되어야 합니다.'); document.getElementById('r'+sel.r+'c'+sel.c)?.classList.remove('sel'); sel=null; beep('bad'); } }else{ document.getElementById('r'+sel.r+'c'+sel.c)?.classList.remove('sel'); sel=cur; el.classList.add('sel'); } } function findMatches(){ const del=new Set(), created=[]; for(let r=0;r<H;r++){ let run=1; for(let c=1;c<=W;c++){ const left = c-1 < W ? grid[r][c-1] : null; const cur = c < W ? grid[r][c] : null; const same = c<W && eq(cur,left); if(same) run++; else{ if(run>=3){ for(let k=0;k<run;k++) del.add(key(r,c-1-k)) } if(run===4){ created.push({r, c:c-1, dir:'H'}) } if(run>=5){ created.push({r, c:c-1, dir:'W'}) } run=1; } } } for(let c=0;c<W;c++){ let run=1; for(let r=1;r<=H;r++){ const up = r-1 < H ? grid[r-1][c] : null; const cur = r < H ? grid[r][c] : null; const same = r<H && eq(cur,up); if(same) run++; else{ if(run>=3){ for(let k=0;k<run;k++) del.add(key(r-1-k,c)) } if(run===4){ created.push({r:r-1, c, dir:'V'}) } if(run>=5){ created.push({r:r-1, c, dir:'W'}) } run=1; } } } return {set:del, total:del.size, create:created} } let moves=Infinity, timeLeft=Infinity; function resolve(match){ if(busy) return; busy=true; const del=match.set; const count=match.total; if(!count){busy=false; return} let mult=combo>=3?2:1; if(feverLeft>0) mult*=2; score+=Math.round(count*60*combo*mult); for(const cr of match.create){ const rr=cr.r, cc=cr.c; if(rr>=0 && cc>=0 && rr<H && cc<W){ const v=grid[rr][cc]; if(!v) continue; if(cr.dir==='H') v.kind='H'; else if(cr.dir==='V') v.kind='V'; else if(cr.dir==='W') v.kind='W'; } } updateHUD(); beep('ok'); for(const keyv of del){ const [r,c]=keyv.split(',').map(Number); const d=document.getElementById('r'+r+'c'+c); if(d) d.style.opacity=.25; if(grid[r]) grid[r][c]=null; } setTimeout(()=>{ for(let c=0;c<W;c++){ let write=H-1; for(let r=H-1;r>=0;r--){ if(grid[r][c]!=null){ grid[write][c]=grid[r][c]; if(write!==r) grid[r][c]=null; write--; } } for(let r=write;r>=0;r--) grid[r][c]=makeCell(rnd(COLORS)); } render(); const more=findMatches(); if(more.total){ combo++; if(combo===3) startFever(); resolve(more); }else{ if(combo>=5 && !badges.includes('콤보5+')) badges.push('콤보5+'); combo=1; maybeQuest(count); checkEnd(); checkStuck(); busy=false; if(Math.random()<.35) news('팁: 힌트로 가능한 교환을 확인하세요.'); saveAll(); } },160) } function findHint(){ for(let r=0;r<H;r++)for(let c=0;c<W;c++){ const cur={r,c}, dirs=[[0,1],[1,0]]; for(const [dr,dc] of dirs){ const nr=r+dr,nc=c+dc; if(nr>=H||nc>=W) continue; swap(cur,{r:nr,c:nc}); const m=findMatches(); swap(cur,{r:nr,c:nc}); if(m.total>0) return [cur,{r:nr,c:nc}]; } } return null; } function showHint(){ const pair=findHint(); if(!pair){ news('가능한 수가 없어 자동 셔플합니다.'); shuffle(); return } const [a,b]=pair; [a,b].forEach(p=>{ const d=document.getElementById('r'+p.r+'c'+p.c); d?.classList.add('hint'); setTimeout(()=>d?.classList.remove('hint'),1200); }); news('힌트: ('+a.r+','+a.c+') ↔ ('+b.r+','+b.c+') 를 바꿔보세요.'); toast('반짝이는 두 칸을 교환!'); } function checkStuck(){ const h=findHint(); if(!h){ shuffle(); news('가능한 수가 없어 셔플했습니다.') } } function shuffle(){ for(let r=0;r<H;r++) for(let c=0;c<W;c++){ const rr=rnd(H), cc=rnd(W); const t=grid[r][c]; grid[r][c]=grid[rr][cc]; grid[rr][cc]=t; } render(); } function startFever(){ feverLeft=8; updateHUD(); clearInterval(feverId); feverId=setInterval(()=>{ feverLeft--; updateHUD(); if(feverLeft<=0){ clearInterval(feverId); feverId=null } },1000); news('피버! 8초간 점수 x2'); } function randomEvent(){ if(eventLeft>0) return; if(Math.random()<.28){ const kinds=[{mul:1.2,sec:15,msg:'강세장 이벤트! 15초간 +20%'},{mul:1.1,sec:12,msg:'인플레이션 압력! 12초간 +10%'},{mul:0.9,sec:12,msg:'세금 이슈… 12초간 -10%'}]; const e=kinds[rnd(kinds.length)]; eventMul=e.mul; eventLeft=e.sec; news(e.msg); const t=setInterval(()=>{ eventLeft--; if(eventLeft<=0){ clearInterval(t); eventMul=1; news('이벤트 종료'); } updateHUD(); },1000); } } setInterval(()=>{ if(!busy) randomEvent() },3000); function applyMode(){ mode=modeSel.value; clearInterval(timerId); timerId=null; if(mode==='casual'){ moves=Infinity; timeLeft=Infinity; limitBox.style.opacity=0.7 } if(mode==='moves'){ moves=30; timeLeft=Infinity; limitBox.style.opacity=1 } if(mode==='timer'){ timeLeft=90; moves=Infinity; limitBox.style.opacity=1; timerId=setInterval(()=>{ timeLeft--; updateHUD(); if(timeLeft<=0){ clearInterval(timerId); timerId=null; endGame('시간 종료'); } },1000); } buildRevealSteps(); updateHUD(); } function checkEnd(){ if(mode==='moves' && moves<=0) return endGame('이동 소진') } function endGame(reason){ const final=Math.round(score*eventMul); news(reason+'. 최종 '+final.toLocaleString()+'점'); if(final>best){ best=final; bestEl.textContent=best.toLocaleString(); Store.setStr('best', String(best)); news(reason+'. 하이스코어 갱신! '+best.toLocaleString()+'점'); } maybeBadgeEnd(final); } function maybeBadgeEnd(finalScore){ if(finalScore>=10000 && !badges.includes('1만점')) badges.push('1만점'); if(coins>=10 && !badges.includes('코인10')) badges.push('코인10'); saveAll(); updateHUD(); } function getTargetShape(){ const m=modeSel?.value||'casual'; const d=diffSel?.value||'normal'; if(m==='casual'){ if(d==='easy') return 'heart'; if(d==='normal') return 'heart2'; return 'heart3' } if(m==='moves'){ if(d==='hard'||d==='master') return 'shamrock2'; return 'shamrock' } if(m==='timer'){ if(d==='hard'||d==='master') return 'clover2'; return 'clover' } return 'heart'; } function buildPatternMask(shapeKey){ const family=shapeKey.startsWith('heart')?'heart':shapeKey.startsWith('shamrock')?'shamrock':'clover'; const coords=[]; const cx=(W-1)/2, cy=(H-1)/2; const rx=W/2.2, ry=H/2.6; for(let r=0;r<H;r++){ for(let c=0;c<W;c++){ const x=(c-cx)/rx, y=-(r-cy)/ry; let inside=false; if(family==='heart'){ const v=Math.pow(x*x+y*y-1,3)-x*x*Math.pow(y,3); inside=(v<=0); }else if(family==='clover'){ const a=0.5, rad=0.68; const d1=(x- a)**2+y**2<=rad*rad; const d2=(x+ a)**2+y**2<=rad*rad; const d3=x**2+(y- a)**2<=rad*rad; const d4=x**2+(y+ a)**2<=rad*rad; inside=d1||d2||d3||d4; }else{ const rad=0.72; const p=(ux,uy)=>(((x-ux)**2 + (y-uy)**2 )<=rad*rad); const k=0.6; const u1=[0,k], u2=[-k*Math.cos(Math.PI/6),-k*Math.sin(Math.PI/6)], u3=[k*Math.cos(Math.PI/6),-k*Math.sin(Math.PI/6)]; inside=p(u1[0],u1[1])||p(u2[0],u2[1])||p(u3[0],u3[1]); } if(inside) coords.push({r,c}); } } if(coords.length<(W*H*0.25)){ const set=new Set(coords.map(o=>key(o.r,o.c))); const add=[]; for(const {r,c} of coords){ [[1,0],[-1,0],[0,1],[0,-1]].forEach(([dr,dc])=>{ const rr=r+dr, cc=c+dc; if(rr>=0&&rr<H&&cc>=0&&cc<W&&!set.has(key(rr,cc))) add.push({r:rr,c:cc}); }); } coords.push(...add); } return coords; } function buildRevealSteps(){ patternMask=buildPatternMask(getTargetShape()); const total=Math.min(quizzes.length,Math.max(12,Math.floor(patternMask.length/3))); const shuffled=[...patternMask].sort(()=>Math.random()-0.5); revealSteps=[]; const stepSize=Math.ceil(shuffled.length/total); for(let i=0;i<total;i++){ revealSteps.push(shuffled.slice(i*stepSize,(i+1)*stepSize)) } revealIndex=0; finalStage=false; setSteps(true,false,false,false); updateHUD(); } function revealNextStep(){ if(revealIndex>=revealSteps.length){ completePattern(); return } const shape=getTargetShape(); const list=revealSteps[revealIndex++]; busy=true; let i=0; const t=setInterval(()=>{ if(i>=list.length){ clearInterval(t); busy=false; if(revealIndex>=revealSteps.length) completePattern(); updateHUD(); return; } const {r,c}=list[i++]; grid[r][c]=makeCell(rnd(COLORS),'S',shape); const d=document.getElementById('r'+r+'c'+c); if(d){ d.style.opacity=0.15; setTimeout(()=>{ renderCells([{r,c}]); if(d.isConnected) d.style.opacity=1; },60); } },14); setSteps(true,false,false,false); } function completePattern(){ if(finalStage) return; finalStage=true; const shape=getTargetShape(); for(const {r,c} of patternMask){ grid[r][c]=makeCell(rnd(COLORS),'S',shape) } render(); news('모양 공개 완료! 이제 배경 블록을 1개만 남기세요. 중앙 칸이 해제됩니다.'); toast('최종 단계 진입'); setSteps(true,true,true,false); } function countBackgroundBlocks(){ let n=0; for(let r=0;r<H;r++) for(let c=0;c<W;c++) if(grid[r][c] && grid[r][c].kind!=='S') n++; return n; } const quizzes=[ {q:'인덱스 투자란?', a:['시장 지수 추종','테마 몰빵','하루 단타'], ok:0, exp:'지수를 따라 자연스러운 분산'}, {q:'복리를 키우는 습관은?', a:['수수료↓·장기↑','빚내서 올인','고위험 추격'], ok:0, exp:'비용 최소화, 시간의 친구'}, {q:'비상금 권장 범위?', a:['3~6개월','1주일','10년치'], ok:0, exp:'돌발 지출 대비'}, {q:'리밸런싱은 언제?', a:['목표비중 이탈시','손실날 때만','오를 때만'], ok:0, exp:'계획대로 되돌리기'}, {q:'채권 가격 vs 금리?', a:['역의 관계','정의 관계','무관'], ok:0, exp:'금리↑ → 기존채권↓'}, {q:'물가 반영 수익?', a:['실질수익','명목수익','총자산'], ok:0, exp:'명목−물가'}, {q:'분산이 덜 되는 조합?', a:['상관 높은 자산끼리','지역 분산','자산군 분산'], ok:0, exp:'같이 흔들리면 효과↓'}, {q:'달러 강세 시 경향?', a:['신흥국 자금유출 압력↑','모든 주식↑','원자재 항상↓'], ok:0, exp:'안전자산 선호'}, {q:'ETF 장점?', a:['분산·저비용','고수익 보장','세금 없음'], ok:0, exp:'넓게 싸게 투명하게'}, {q:'레버리지 상품 유의점?', a:['변동성·복리오차','장기 안정','무위험'], ok:0, exp:'단기 도구 이해 필수'}, {q:'현금흐름 관리 기본?', a:['예산·기록·점검','감으로 지출','한도 풀'], ok:0, exp:'보이는 돈이 지켜짐'}, {q:'장기투자 방해 심리?', a:['군중심리·손실회피','규율','인내'], ok:0, exp:'감정관리 중요'}, {q:'수수료 1%p 효과?', a:['장기엔 매우 큼','미미함','긍정적'], ok:0, exp:'복리에서 차이 큼'}, {q:'목표달성 습관?', a:['자동이체 적립','즉흥매매','빚내기'], ok:0, exp:'꾸준함 자동화'}, {q:'분산 핵심은?', a:['상관 낮음','수익만 높음','추천따라'], ok:0, exp:'함께 안 흔들리게'}, {q:'리스크·수익 관계?', a:['변동폭과 함께↑','언제나 수익','안전'], ok:0, exp:'고위험=고손실 가능성'}, {q:'환율 체크 포인트?', a:['수출주·원자재·금리','날씨','부동산세'], ok:0, exp:'복합요인'}, {q:'빚 관리 기본?', a:['이자·원금 계획','최대한 연장','무시'], ok:0, exp:'상환 로드맵'}, {q:'현금비중 역할?', a:['완충·기회비축','항상 0%','항상 100%'], ok:0, exp:'변동성 완화'}, {q:'투자 전 먼저 할 일?', a:['비상금·부채점검','고수익부터','친구따라'], ok:0, exp:'기초 체력'}, {q:'장기투자에 좋은 습관?', a:['정기적립·분산·기록','고위험 단타','루머 추격'], ok:0, exp:'정석대로'} ]; const qText = document.createElement('div'); const qMsg = document.createElement('div'); const qOpts = document.createElement('div'); function openQuiz(){ const idx=Math.min(revealIndex,quizzes.length-1); const q=quizzes[idx]; qText.textContent=q.q; qMsg.textContent=''; qOpts.innerHTML=''; q.a.forEach((opt,i)=>{ const b=document.createElement('button'); b.className='btn'; b.type='button'; b.textContent=opt; b.addEventListener('click',()=>{ if(i===q.ok){ qMsg.textContent='정답! 코인 +1 — 목표 모양이 더 드러납니다.'; coins++; beep('ok'); revealNextStep(); }else{ qMsg.textContent='오답! 정답: '+q.a[q.ok]+' — '+q.exp; } coinsEl.textContent=String(coins); saveAll(); updateHUD(); if(revealIndex<quizzes.length){ setTimeout(()=>openQuiz(),300) } }, {passive:true}); qOpts.appendChild(b); }); } function setSteps(a,b,c,d){} function updateHUD(){ scoreEl.textContent = Math.round(score*eventMul).toLocaleString(); comboEl.textContent = 'x'+combo; feverTxt.textContent= feverLeft>0 ? ('ON '+feverLeft+'s') : 'OFF'; feverBar.style.width = (feverLeft>0?(feverLeft/8*100):0)+'%'; missionEl.textContent= questToText(quest); coinsEl.textContent = String(coins); bestEl.textContent = best.toLocaleString(); const bgLeft=countBackgroundBlocks(); centerLockEl.textContent = (!finalStage?'🔒 잠김':((needBgOne&&bgLeft>1)?'🔒 잠김':'🔓 해제')); bgLeftEl.textContent = finalStage?String(bgLeft):'-'; revealProg.textContent = Math.min(revealIndex,revealSteps.length)+' / '+revealSteps.length; if(mode==='casual') limitEl.textContent='∞'; else if(mode==='moves') limitEl.textContent=String(moves); else if(mode==='timer') limitEl.textContent=(timeLeft>0?timeLeft:0)+'s'; setStatusLines([ '모드: '+modeSel.options[modeSel.selectedIndex].text, '난이도: '+diffSel.options[diffSel.selectedIndex].text, '보드: '+W+'×'+H+', 색상: '+COLORS, '이벤트 배율: '+eventMul.toFixed(2)+' (남은 '+(eventLeft||0)+'s)', '피버 남은 시간: '+(feverLeft||0)+'s', finalStage?('최종 단계: 배경 블록 '+bgLeft+'개 (1개가 되면 중앙 해제)'):'최종 단계: 아직 아님' ]); if(!finalStage){ setSteps(true,revealIndex>=revealSteps.length,false,false) } else{ const ok=(!needBgOne||bgLeft<=1); setSteps(true,true,!ok,ok) } } function questToText(q){ if(q.k==='score') return '점수 '+q.n.toLocaleString()+' 달성 (코인 +'+q.prize+')'; if(q.k==='combo') return '콤보 '+q.n+' 달성 (코인 +'+q.prize+')'; if(q.k==='clear') return '블록 '+q.n+'개 제거 (코인 +'+q.prize+')'; return '미션'; } function makeQuest(){ const types=[{k:'score',n:1500,prize:1},{k:'combo',n:3,prize:1},{k:'clear',n:50,prize:1}]; const q=types[rnd(types.length)]; return {k:q.k,n:q.n,prize:q.prize,left:q.n}; } function maybeQuest(clearedCount){ if(quest.k==='score'){ if(score>=quest.n){ coins+=quest.prize; news('미션 달성! 코인 +'+quest.prize); quest=makeQuest() } }else if(quest.k==='combo'){ if(combo>=3){ coins+=quest.prize; news('콤보 미션 성공! 코인 +'+quest.prize); quest=makeQuest() } }else if(quest.k==='clear'){ const d=(clearedCount||0); quest.left=Math.max(0,(quest.left||0)-d); if(quest.left<=0){ coins+=quest.prize; news('클리어 미션 완료! 코인 +'+quest.prize); quest=makeQuest() } } saveAll(); updateHUD(); } function saveAll(){ Store.set('save', {coins,mode,level:diffSel.value}); Store.set('badges', badges); Store.set('quest', quest); Store.setStr('best', String(best)); } function loadAll(){ try{ const s=Store.get('save', {}); if(s && typeof s==='object'){ if(s.coins!=null) coins=s.coins; if(s.mode) mode=s.mode; if(s.level) diffSel.value=s.level; } soundChk.checked = Store.getStr('sound','0')==='1'; if(diffSel.value==='easy'){ W=5; H=7; COLORS=5 } if(diffSel.value==='normal'){ W=6; H=8; COLORS=6 } if(diffSel.value==='hard'){ W=7; H=9; COLORS=7 } if(diffSel.value==='master'){ W=8; H=10; COLORS=7 } modeSel.value=mode; applyTheme(); best = Number(Store.getStr('best','0'))||0; }catch(e){} } soundChk.addEventListener('change', ()=>{ sOn=soundChk.checked; Store.setStr('sound', sOn?'1':'0') }, {passive:true}); function applyTheme(){} function makeGrid(){ grid=Array.from({length:H},()=>Array.from({length:W},()=>makeCell(rnd(COLORS)))); for(let i=0;i<80;i++){ const r1=rnd(H),c1=rnd(W),r2=rnd(H),c2=rnd(W); const t=grid[r1][c1]; grid[r1][c1]=grid[r2][c2]; grid[r2][c2]=t; } setGridCSS(); render(); checkStuck(); buildRevealSteps(); } function afterPower(){ for(let c=0;c<W;c++){ let write=H-1; for(let r=H-1;r>=0;r--){ if(grid[r][c]!=null){ grid[write][c]=grid[r][c]; if(write!==r) grid[r][c]=null; write--; } } for(let r=write;r>=0;r--) grid[r][c]=makeCell(rnd(COLORS)); } render(); const more=findMatches(); if(more.total){ combo=1; resolve(more) } updateHUD(); saveAll(); } document.getElementById('p_line').addEventListener('click',()=>{ if(coins<2) return news('코인이 부족해요. (필요: 2)'); const c=rnd(W); for(let r=0;r<H;r++) grid[r][c]=null; coins-=2; news('파워업: 임의 세로 라인 제거'); afterPower(); },{passive:true}); document.getElementById('p_bomb').addEventListener('click',()=>{ if(coins<3) return news('코인이 부족해요. (필요: 3)'); const r=rnd(H), c=rnd(W); for(let rr=Math.max(0,r-1); rr<=Math.min(H-1,r+1); rr++) for(let cc=Math.max(0,c-1); cc<=Math.min(W-1,c+1); cc++) grid[rr][cc]=null; coins-=3; news('파워업: 폭탄 3×3'); afterPower(); },{passive:true}); document.getElementById('p_shuffle').addEventListener('click',()=>{ if(coins<1) return news('코인이 부족해요. (필요: 1)'); coins-=1; shuffle(); news('파워업: 셔플'); afterPower(); },{passive:true}); document.getElementById('hint').addEventListener('click',()=>showHint(),{passive:true}); document.getElementById('help').addEventListener('click',()=>{ helpBox.style.display=(helpBox.style.display==='none'||helpBox.style.display==='')?'block':'none'; news('도움말을 '+(helpBox.style.display==='block'?'열었습니다.':'닫았습니다.')); },{passive:true}); document.getElementById('quest').addEventListener('click',()=>{ quest=makeQuest(); news('퀘스트 갱신'); saveAll(); updateHUD(); },{passive:true}); document.getElementById('reset').addEventListener('click',()=>{ score=0; combo=1; feverLeft=0; eventLeft=0; eventMul=1; quoteBox.style.display='none'; finalStage=false; revealIndex=0; buildRevealSteps(); makeGrid(); applyMode(); news('새로 시작! 퀴즈로 목표 모양을 공개해보세요.'); setTimeout(()=>openQuiz(),200); toast('① 퀴즈로 조각 공개 → ② 전부 공개 → ③ 배경 1개만 남기기 → ④ 중앙 클릭'); },{passive:true}); document.getElementById('shuffle').addEventListener('click',()=>{ shuffle(); news('보드 셔플') },{passive:true}); modeSel.addEventListener('change',()=>{ applyMode(); news('모드 변경: 공개될 최종 모양이 바뀝니다.'); buildRevealSteps() },{passive:true}); diffSel.addEventListener('change',()=>{ const v=diffSel.value; if(v==='easy'){ W=5; H=7; COLORS=5 } if(v==='normal'){ W=6; H=8; COLORS=6 } if(v==='hard'){ W=7; H=9; COLORS=7 } if(v==='master'){ W=8; H=10; COLORS=7 } applyTheme(); score=0; combo=1; quoteBox.style.display='none'; makeGrid(); updateHUD(); buildRevealSteps(); news('난이도 변경: 팔레트·광택·최종 모양 세부 스타일이 조정됩니다.'); setTimeout(()=>openQuiz(),150); },{passive:true}); function showQuote(){ const list=[{t:'노력은 때로 느리지만, 결코 배신하지 않는다.',w:'속담'},{t:'성공은 준비와 기회의 교차점에서 온다.',w:'세네카'},{t:'복리는 시간의 아이이다. 시간을 친구로 만들어라.',w:'워런 버핏'},{t:'예산은 돈이 어디로 갈지 미리 말해주는 것이다.',w:'존 C. 맥스웰'},{t:'작은 꾸준함이 큰 부를 만든다.',w:'익명'},{t:'오늘의 성실함이 내일의 자유가 된다.',w:'익명'}]; const q=list[rnd(list.length)]; quoteText.textContent='“ '+q.t+' ”'; quoteWho.textContent='— '+q.w; quoteBox.style.display='block'; news('축하합니다! 오늘의 명언이 열렸습니다.'); setSteps(true,true,true,true); } function buildRevealAndUI(){ if(document.getElementById('econ-quiz-holder')) return; const holder=document.createElement('div'); holder.id='econ-quiz-holder'; holder.className='card'; const h=document.createElement('h3'); h.textContent='퀴즈'; holder.appendChild(h); holder.appendChild(qText); holder.appendChild(qOpts); holder.appendChild(qMsg); document.querySelector('.wrap').appendChild(holder); } function applyModeAndStart(){ applyMode(); news('시작! 퀴즈를 풀어 목표 모양을 완성해보세요.'); setTimeout(()=>{ openQuiz(); toast('힌트 버튼으로 가능한 교환을 확인할 수 있어요.') },250); } function init(){ loadAll(); sOn = (Store.getStr('sound','0')==='1'); setGridCSS(); makeGrid(); buildRevealAndUI(); applyModeAndStart(); const postHeight = () => { try{ const h = Math.max( document.documentElement ? document.documentElement.scrollHeight : 0, document.body ? document.body.scrollHeight : 0 ); parent.postMessage({type:'econPuzzle:height',token:__ECON_EMBED_TOKEN__,h}, '*'); }catch(e){} }; if(window.ResizeObserver){ try{ const ro=new ResizeObserver(postHeight); if(document.body) ro.observe(document.body); }catch(e){} } window.addEventListener('load', postHeight, {passive:true}); window.addEventListener('resize', postHeight, {passive:true}); setTimeout(postHeight,200); setInterval(postHeight,1000); } init(); </script> </body> </html>

'+실생활에 필요한 소프트웨어' 카테고리의 다른 글

나음 - 나만의 프로 음료 제조 도구 (5)	2025.09.06
대본·콘텐츠 표현 어시스턴트 (3)	2025.09.05
첫 팬이 주는 스포츠 훈련 도구 – 실시간 포즈 비교·훈련 보조 (6)	2025.08.31
마춤새 - 인쇄 규격·확장자 변환기 (5)	2025.08.29
OCR과 배열함수 - 이미지에서 시트까지, LOOKUP 자동화 (13)	2025.08.26

경제 블록 퍼즐

'+실생활에 필요한 소프트웨어' 카테고리의 다른 글

관련글

티스토리툴바