オセロ 2025 8/09 広告 その他 2025-06-272025-08-09 <html lang='ja'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1,viewport-fit=cover'> <title>Othello</title> <style> :root{ --accent:#007aff; --bg:#f5f5f7; --text:#111; --muted:#6b7280; --radius:18px; --shadow:0 8px 24px rgba(0,0,0,.08); } html,body{height:100%;margin:0;background:var(--bg);color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial, 'Noto Sans JP','Hiragino Sans','Yu Gothic',Meiryo,sans-serif; -webkit-user-select:none;user-select:none;touch-action:manipulation} .wrap{min-height:100%;display:flex;flex-direction:column} .inner{max-width:1200px;margin:0 auto;padding:8px 12px 16px;box-sizing:border-box;width:100%} .toolbar,.status,.dpad{ background:#ffffffcc; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:16px; box-shadow:var(--shadow); } .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 12px;margin:8px auto 10px} .toolbar .group{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .toolbar label{font-size:12px;color:var(--muted)} .toolbar select,.toolbar button{ appearance:none;border:1px solid #e5e7eb;background:#fff;color:#111; padding:8px 12px;border-radius:12px;font-size:14px;line-height:1;box-shadow:var(--shadow) } .toolbar button.primary{background:var(--accent);border-color:transparent;color:#fff} .toolbar button:disabled{opacity:.5;cursor:not-allowed} .status{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;margin:0 auto 10px;font-size:14px} .dot{display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 1px 2px rgba(0,0,0,.25);vertical-align:-2px;margin-right:6px} .dot.black{background:#000}.dot.white{background:#fff;border:1px solid #ddd} .board-wrap{display:flex;justify-content:center;align-items:center;flex:1} .board{ width:var(--board-size,80vmin); height:var(--board-size,80vmin); background:#1b5e20 radial-gradient(120% 120% at 10% 10%,rgba(255,255,255,.08),rgba(0,0,0,.12)); border-radius:var(--radius); box-shadow:var(--shadow); display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); gap:2px; padding:2px; position:relative; overflow:hidden; } /* セル生成に失敗しても格子線を出す保険 */ .board::after{ content:''; position:absolute; inset:2px; pointer-events:none; z-index:1; background-image: repeating-linear-gradient(to right, rgba(0,0,0,.28) 0 2px, transparent 2px calc(12.5%)), repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 2px, transparent 2px calc(12.5%)); } /* セルは div。駒は ::before 疑似要素で描く（DOM挿入不要） */ .cell{ position:relative;width:100%;height:100%;background:rgba(0,0,0,.15); border:none;border-radius:8px;cursor:pointer;outline:none;padding:0; display:block; } .cell[tabindex='0']:focus-visible{box-shadow:0 0 0 3px rgba(0,122,255,.5)} .cell::before{ content:''; position:absolute; inset:8%; border-radius:50%; z-index:3; display:none; box-shadow: inset 0 10px 18px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.2); } .cell[data-p='B']::before{ display:block; background:#0b0b0b linear-gradient(#222,#000); } .cell[data-p='W']::before{ display:block; background:#fff linear-gradient(#fff,#eee); border:1px solid #ddd; } .hint::after{ content:''; position:absolute; inset:20%; border-radius:50%; background:rgba(255,255,255,.45); box-shadow:inset 0 0 0 2px rgba(0,0,0,.15); z-index:2; } .cursor{ box-shadow:0 0 0 3px rgba(0,122,255,.7)!important } .dpad{ display:grid; grid-template-areas: '. up .' 'left ok right' '. down .'; grid-template-columns:1fr 1fr 1fr; gap:10px; width:min(420px,92vw); margin:12px auto 0; padding:12px; } .dpad button{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px 12px; font-size:16px; box-shadow:var(--shadow) } .dpad .up{grid-area:up} .dpad .down{grid-area:down} .dpad .left{grid-area:left} .dpad .right{grid-area:right} .dpad .ok{grid-area:ok; background:var(--accent); color:#fff; border-color:transparent} .thinking{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; background:rgba(255,255,255,.45); backdrop-filter: blur(4px); border-radius:var(--radius); font-weight:600; font-size:18px; color:#111; z-index:4; } .hidden{ display:none !important } @media (max-width:480px){ .toolbar select,.toolbar button{font-size:13px;padding:8px 10px} .status{font-size:13px} } </style> </head> <body> <div class='wrap'> <div class='inner'> <div class='toolbar' id='toolbar'> <div class='group'> <label>先手（黒）:</label> <select id='blackType' aria-label='先手（黒）の種類'> <option value='human'>人間</option><option value='cpu'>CPU</option> </select> <label>後手（白）:</label> <select id='whiteType' aria-label='後手（白）の種類'> <option value='cpu' selected>CPU</option><option value='human'>人間</option> </select> <label>CPU難易度:</label> <select id='level' aria-label='CPU難易度'> <option value='1'>1: ランダム</option> <option value='2' selected>2: 貪欲</option> <option value='3'>3: 深さ2</option> <option value='4'>4: 深さ3</option> </select> </div> <div class='group'> <button id='newGame' class='primary'>新しい対局</button> <button id='undoBtn'>一手戻す</button> </div> </div> <div class='status' id='status'> <div><span class='dot black'></span><strong id='blackCount'>2</strong> <small>黒</small></div> <div>手番: <span class='dot' id='turnDot'></span><span id='turnText'>黒</span></div> <div><span class='dot white'></span><strong id='whiteCount'>2</strong> <small>白</small></div> </div> <div class='board-wrap'> <div class='board' id='board' role='grid' aria-label='オセロ盤'> <div class='thinking hidden' id='thinking'>CPUが考えています…</div> </div> </div> <div class='dpad' aria-label='ボタン操作'> <button class='up' id='btnUp' aria-label='上へ'>↑</button> <button class='left' id='btnLeft' aria-label='左へ'>←</button> <button class='right' id='btnRight' aria-label='右へ'>→</button> <button class='down' id='btnDown' aria-label='下へ'>↓</button> <button class='ok' id='btnOk' aria-label='置く'>置く</button> </div> </div> </div> <script> (function(){ 'use strict'; const SIZE=8, EMPTY=0, BLACK=1, WHITE=-1; const DIRS=[[-1,-1],[0,-1],[1,-1],[-1,0],[1,0],[-1,1],[0,1],[1,1]]; const PWEIGHT=[ [120,-30,15,8,8,15,-30,120], [-30,-50,-5,-5,-5,-5,-50,-30], [15,-5,18,3,3,18,-5,15], [8,-5,3,2,2,3,-5,8], [8,-5,3,2,2,3,-5,8], [15,-5,18,3,3,18,-5,15], [-30,-50,-5,-5,-5,-5,-50,-30], [120,-30,15,8,8,15,-30,120] ]; let board=createEmpty(), turn=BLACK, history=[]; let human={}; human[BLACK]=true; human[WHITE]=false; // 黒:人, 白:CPU let level=2; let cursor={x:2,y:3}; const elBoard=document.getElementById('board'); const elThinking=document.getElementById('thinking'); const elToolbar=document.getElementById('toolbar'); const elBlackCount=document.getElementById('blackCount'); const elWhiteCount=document.getElementById('whiteCount'); const elTurnDot=document.getElementById('turnDot'); const elTurnText=document.getElementById('turnText'); const selBlack=document.getElementById('blackType'); const selWhite=document.getElementById('whiteType'); const selLevel=document.getElementById('level'); const btnNew=document.getElementById('newGame'); const btnUndo=document.getElementById('undoBtn'); const btnUp=document.getElementById('btnUp'); const btnDown=document.getElementById('btnDown'); const btnLeft=document.getElementById('btnLeft'); const btnRight=document.getElementById('btnRight'); const btnOk=document.getElementById('btnOk'); // セル生成（div, 駒はCSSで描画） (function makeCells(){ const frag=document.createDocumentFragment(); for(let y=0;y<SIZE;y++){ for(let x=0;x<SIZE;x++){ const cell=document.createElement('div'); cell.className='cell'; cell.dataset.x=x; cell.dataset.y=y; cell.setAttribute('role','button'); cell.setAttribute('tabindex','0'); cell.setAttribute('aria-label','マス '+(x+1)+'-'+(y+1)); cell.addEventListener('pointerdown',function(e){ e.preventDefault(); tryPlace(x,y); },{passive:false}); cell.addEventListener('keydown',function(e){ if(e.key==='Enter'||e.key===' '){ tryPlace(x,y); e.preventDefault(); }}); frag.appendChild(cell); } } elBoard.appendChild(frag); })(); newGame(); fitBoard(); let rAF=0; const reqFit=function(){ cancelAnimationFrame(rAF); rAF=requestAnimationFrame(fitBoard); }; window.addEventListener('resize', reqFit); window.addEventListener('orientationchange', function(){ setTimeout(fitBoard,150); }); btnNew.addEventListener('click', newGame); btnUndo.addEventListener('click', undo); selBlack.addEventListener('change', function(){ human[BLACK]=(selBlack.value==='human'); maybeCpu(); }); selWhite.addEventListener('change', function(){ human[WHITE]=(selWhite.value==='human'); maybeCpu(); }); selLevel.addEventListener('change', function(){ level=parseInt(selLevel.value,10)||2; }); window.addEventListener('keydown', function(e){ const k=e.key; const clamp=function(v){ return Math.max(0,Math.min(SIZE-1,v)); }; let moved=false; if(k==='ArrowUp'){ cursor.y=clamp(cursor.y-1); moved=true; } if(k==='ArrowDown'){ cursor.y=clamp(cursor.y+1); moved=true; } if(k==='ArrowLeft'){ cursor.x=clamp(cursor.x-1); moved=true; } if(k==='ArrowRight'){ cursor.x=clamp(cursor.x+1); moved=true; } if(moved){ render(); e.preventDefault(); } if(k==='Enter'||k===' '){ tryPlace(cursor.x,cursor.y); e.preventDefault(); } },{passive:false}); btnUp.addEventListener('click', function(){ moveCursor(0,-1); }); btnDown.addEventListener('click', function(){ moveCursor(0,1); }); btnLeft.addEventListener('click', function(){ moveCursor(-1,0); }); btnRight.addEventListener('click', function(){ moveCursor(1,0); }); btnOk.addEventListener('click', function(){ tryPlace(cursor.x,cursor.y); }); function createEmpty(){ return Array.from({length:SIZE},function(){ return Array(SIZE).fill(EMPTY); }); } function inB(x,y){ return x>=0&&x<SIZE&&y>=0&&y<SIZE; } function newGame(){ board=createEmpty(); board[3][3]=WHITE; board[4][4]=WHITE; board[3][4]=BLACK; board[4][3]=BLACK; turn=BLACK; history=[]; level=parseInt(selLevel.value,10)||2; human[BLACK]=(selBlack.value==='human'); human[WHITE]=(selWhite.value==='human'); cursor={x:2,y:3}; render(); maybeCpu(); } function fitBoard(){ const vw=window.innerWidth; const vh=window.innerHeight; const toolbarH=elToolbar.getBoundingClientRect().height||0; const dpadH=document.querySelector('.dpad').getBoundingClientRect().height||0; const margins=28; const maxSize=Math.min(vw, Math.max(240, vh - toolbarH - dpadH - margins)); elBoard.style.setProperty('--board-size', maxSize+'px'); } function render(){ fitBoard(); const moves=legalMoves(board,turn); const hints=new Set(moves.map(function(m){ return m.x+','+m.y; })); const cells=elBoard.querySelectorAll('.cell'); cells.forEach(function(cell){ const x=+cell.dataset.x, y=+cell.dataset.y; cell.classList.toggle('hint', hints.has(x+','+y)); cell.classList.toggle('cursor', (x===cursor.x && y===cursor.y)); const v=board[y][x]; if(v===BLACK) cell.setAttribute('data-p','B'); else if(v===WHITE) cell.setAttribute('data-p','W'); else cell.removeAttribute('data-p'); }); const c=count(board); elBlackCount.textContent=c.black; elWhiteCount.textContent=c.white; elTurnDot.className='dot '+(turn===BLACK?'black':'white'); elTurnText.textContent=(turn===BLACK?'黒':'白'); } function moveCursor(dx,dy){ const clamp=function(v){ return Math.max(0,Math.min(SIZE-1,v)); }; cursor.x=clamp(cursor.x+dx); cursor.y=clamp(cursor.y+dy); render(); } function legalMoves(b,player){ const res=[]; for(let y=0;y<SIZE;y++) for(let x=0;x<SIZE;x++){ if(b[y][x]!==EMPTY) continue; const f=gatherFlips(b,x,y,player); if(f.length) res.push({x:x,y:y,flips:f}); } return res; } function gatherFlips(b,x,y,player){ let all=[]; for(const d of DIRS){ const dx=d[0], dy=d[1]; let nx=x+dx, ny=y+dy, line=[]; while(inB(nx,ny) && b[ny][nx]===-player){ line.push([nx,ny]); nx+=dx; ny+=dy; } if(line.length && inB(nx,ny) && b[ny][nx]===player){ all=all.concat(line); } } return all; } function play(b, move, player){ const nb=b.map(function(r){ return r.slice(); }); nb[move.y][move.x]=player; for(const f of move.flips){ nb[f[1]][f[0]]=player; } return nb; } function count(b){ let black=0,white=0; for(let y=0;y<SIZE;y++) for(let x=0;x<SIZE;x++){ if(b[y][x]===BLACK) black++; else if(b[y][x]===WHITE) white++; } return {black:black, white:white}; } function pushHist(){ history.push({board:board.map(function(r){return r.slice();}), turn:turn}); if(history.length>200) history.shift(); } function undo(){ if(isThinking()) return; if(!history.length) return; const h=history.pop(); board=h.board; turn=h.turn; render(); } function tryPlace(x,y){ if(isThinking()) return; if(!human[turn]) return; const mv=legalMoves(board,turn).find(function(m){ return m.x===x && m.y===y; }); if(!mv) return; pushHist(); board=play(board,mv,turn); turn=-turn; flow(); } function flow(){ render(); const my=legalMoves(board,turn); if(!my.length){ const opp=legalMoves(board,-turn); if(!opp.length){ endGame(); return; } turn=-turn; render(); } maybeCpu(); } function endGame(){ const c=count(board); const msg=(c.black===c.white)?'引き分け':(c.black>c.white?'黒の勝ち':'白の勝ち'); elTurnDot.className='dot'; // 消灯 elTurnText.textContent='終局：'+msg+'（黒 '+c.black+' − 白 '+c.white+'）'; } function isThinking(){ return !elThinking.classList.contains('hidden'); } function setThinking(f){ elThinking.classList.toggle('hidden', !f); btnUndo.disabled=f; btnNew.disabled=f; } function maybeCpu(){ if(human[turn]) return; const moves=legalMoves(board,turn); if(!moves.length){ turn=-turn; render(); if(!human[turn]) maybeCpu(); return; } setThinking(true); setTimeout(function(){ const mv=chooseCpu(board,turn,level) || moves[0]; setThinking(false); pushHist(); board=play(board,mv,turn); turn=-turn; flow(); },10); } function chooseCpu(b,player,lvl){ const moves=legalMoves(b,player); if(!moves.length) return null; if(lvl<=1){ return moves[Math.random()*moves.length|0]; } if(lvl===2){ return moves.reduce(function(a,m){ return (!a||m.flips.length>a.flips.length)?m:a; }, null); } const depth=(lvl===3)?2:3; let best=null, bestScore=-1e9, alpha=-1e9, beta=1e9; for(const m of moves){ const sc = -negamax(play(b,m,player), -player, depth-1, -beta, -alpha); if(sc>bestScore){ bestScore=sc; best=m; } if(sc>alpha) alpha=sc; if(alpha>=beta) break; } return best; } function evaluate(b,player){ let pos=0, discs=0, black=0, white=0; for(let y=0;y<SIZE;y++) for(let x=0;x<SIZE;x++){ const v=b[y][x]; if(v!==EMPTY){ pos+=PWEIGHT[y][x]*v; discs++; if(v===BLACK) black++; else white++; } } const stage=discs/64; const mob=legalMoves(b,player).length - legalMoves(b,-player).length; const diff=(black-white)*player; return (pos*1.0*player) + (mob*8) + (diff*(stage>0.75?2.0:0.4)); } function negamax(b,player,depth,alpha,beta){ const moves=legalMoves(b,player); if(depth===0 || !moves.length){ if(depth>0 && !moves.length && legalMoves(b,-player).length>0){ return -negamax(b,-player,depth-1,-beta,-alpha); } return evaluate(b,player); } let best=-1e9; for(const m of moves){ const sc=-negamax(play(b,m,player), -player, depth-1, -beta, -alpha); if(sc>best) best=sc; if(sc>alpha) alpha=sc; if(alpha>=beta) break; } return best; } })(); </script> </body> </html>“> その他 この記事が気に入ったら フォローしてね！ Follow @suzukiharuki826 Follow Me よかったらブックマークとシェアしてね！ URLをコピーする URLをコピーしました！
