<p data-line="0" class="code-line">「オセロ(リバーシ)って、角取ったら勝ちなんでしょ？」という風潮に抗うべく、角をとっただけでは勝てない『POW POW REVERSI』というリバーシの亜種を作った。</p>
<p data-line="2" class="code-line">これ。<br>
早送りでお送ります。</p>
<p data-line="5" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/fa228d3e1e72-20250825.gif" class="md-img" loading="lazy"></p>
<p data-line="7" class="code-line">なにが違うのかというと、２つの追加ルールがある。</p>
<ul data-line="9" class="code-line">
<li data-line="9" class="code-line">石に点数がある。最初は２点で<strong>１回ひっくり返るごとに2,4,8,16,32...と点数が倍になる。</strong>
</li>
<li data-line="10" class="code-line">
<strong>合計1000点を超えたらその時点で勝ち。</strong> 盤面が埋まったら点数が大きいほうが勝ち。</li>
</ul>
<p data-line="12" class="code-line">表計算ソフトのPOW関数のように2乗で増えていくからPOW POW REVERSI。<br>
どんなに盤面を制圧されても2^10=1024を1個でも作れば一発逆転できる。逆もまたあり。四隅をとっても一手たりとも油断できない。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/59eab23900c7-20250825.png" class="md-img" loading="lazy"></p>
<p data-line="16" class="code-line">【問題】<br>
たとえばこの局面、黒は26点、白は860点、白が2隅を押さえた黒番。一見すると白が圧倒的に勝っているように見えるが...<strong>黒には一手で勝負を決める会心の一手が残されている</strong>。おわかりいただけただろうか？</p>
<p data-line="19" class="code-line">このゲームは中央付近は頻繁にひっくり返るから高得点化し、角や辺はあまりひっくり返らないから点数が低い傾向がある。オセロの既成概念がひっくり返る。</p>
<p data-line="21" class="code-line">ここで遊べます。</p>
<p data-line="23" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ac75a0586132b" src="https://embed.zenn.studio/card#zenn-embedded__ac75a0586132b" data-content="https%3A%2F%2Fkurehajime.github.io%2Fpowpow_reversi%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://kurehajime.github.io/powpow_reversi/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://kurehajime.github.io/powpow_reversi/</a></p>
<h2 id="%E7%B4%B0%E9%83%A8%E8%A7%A3%E8%AA%AC" data-line="25" class="code-line">
<a class="header-anchor-link" href="#%E7%B4%B0%E9%83%A8%E8%A7%A3%E8%AA%AC" aria-hidden="true"></a> 細部解説</h2>
<h3 id="%E7%9B%A4%E9%9D%A2%E3%81%AE%E6%8F%8F%E7%94%BB" data-line="27" class="code-line">
<a class="header-anchor-link" href="#%E7%9B%A4%E9%9D%A2%E3%81%AE%E6%8F%8F%E7%94%BB" aria-hidden="true"></a> 盤面の描画</h3>
<p data-line="29" class="code-line">対局画面。これはSVGでできている。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/5867a3dd5ae5-20250825.png" class="md-img" loading="lazy"></p>
<p data-line="32" class="code-line"><a href="https://github.com/kurehajime/powpow_reversi/blob/f981cb3b9f0b04501d0e598fa9cf1805b3f8995f/src/components/FieldElement.tsx#L30" target="_blank" rel="nofollow noopener noreferrer">こんな感じ</a>でReactで動的にSVGを組み立てている。</p>
<p data-line="34" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/5699e1466f0a-20250825.png" class="md-img" loading="lazy"></p>
<p data-line="36" class="code-line">SVGは内部の要素にも部分的にCSSをかけられるので、こういうちょっとしたアニメーションも簡単に実現できる。</p>
<p data-line="38" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/b3df5c68d7e2-20250825.gif" class="md-img" loading="lazy"></p>
<h3 id="%E5%85%88%E8%AA%AD%E3%81%BF" data-line="41" class="code-line">
<a class="header-anchor-link" href="#%E5%85%88%E8%AA%AD%E3%81%BF" aria-hidden="true"></a> 先読み</h3>
<p data-line="43" class="code-line">思考エンジンはミニマックス法(を改良したアルファベータ法)を採用している。<br>
ミニマックス法とは、自分と相手の取れる手を木構造で探索し、『双方は必ず最善手を取る』という前提のもと、相手がもっとも得できない手を選ぶ手法。</p>
<p data-line="46" class="code-line">Wikipediaの説明の図 <sup class="footnote-ref"><a href="#fn-a8ca-1" id="fnref-a8ca-1">[1]</a></sup> がイメージしやすい。奇数の段(自分)は評価値を最大化する手を探索し、偶数の段(相手プレイヤー)は評価値を最小化する手を探索している。これを繰り返すと将棋の『先読み』のようなことが実現できる。</p>
<p data-line="48" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/44d3f32b69b5-20250825.png" class="md-img" loading="lazy"></p>
<p data-line="50" class="code-line">ミニマックス法は筆者が書いた本でも扱ってるので、気になった人は買ってください。喜びます。</p>
<p data-line="52" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9c65e02fd21e7" src="https://embed.zenn.studio/card#zenn-embedded__9c65e02fd21e7" data-content="https%3A%2F%2Fwww.shoeisha.co.jp%2Fbook%2Fdetail%2F9784798184395" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.shoeisha.co.jp/book/detail/9784798184395" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.shoeisha.co.jp/book/detail/9784798184395</a></p>
<h3 id="%E8%A9%95%E4%BE%A1%E9%96%A2%E6%95%B0" data-line="54" class="code-line">
<a class="header-anchor-link" href="#%E8%A9%95%E4%BE%A1%E9%96%A2%E6%95%B0" aria-hidden="true"></a> 評価関数</h3>
<p data-line="56" class="code-line">探索をするにはそもそも「どんな局面が高評価か」という局面に点数をつける『評価関数』が必要になる。</p>
<p data-line="58" class="code-line">レベル１〜３までは、単純に盤面の点数をそのまま評価値にした。相手の点数は×-1をして計算する。これでもそこそこ賢く戦える。</p>
<p data-line="60" class="code-line">しかしそれだけでは強さが頭打ちになる。このゲームは角を取っただけでは勝てないが、角は取らないより取ったほうがいい。点数の読み合い＋ポジショニングの両方を考慮しないと勝てない。<br>
そこでレベル４以上は「ポジショニングの強さ」も評価に加えるようにした。</p>
<p data-line="63" class="code-line"><a href="https://uguisu.skr.jp/othello/5-1.html" target="_blank" rel="nofollow noopener noreferrer">こちらのサイト</a>で知ったのだが、オセロの盤面は下の図 <sup class="footnote-ref"><a href="#fn-a8ca-2" id="fnref-a8ca-2">[2]</a></sup> のような有名な評価表があるらしい。角は中央の40倍の価値がある。「オセロって、角取ったら勝ちなんでしょ？」という現実を突きつける表だ。</p>
<p data-line="65" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/6524b012c80a-20250826.png" class="md-img" loading="lazy"></p>
<p data-line="67" class="code-line">レベル４以上ではこれを使い、普段は『ポジショニングの強さ』で評価値を付けつつ、詰みがありうる局面では『石の点数の合計』で判断するというハイブリッド方式を採用した。むちゃくちゃ強い。</p>
<h3 id="%E6%A3%8B%E8%AD%9C%E5%86%8D%E7%94%9F%EF%BC%86%E3%82%B7%E3%82%A7%E3%82%A2%E6%A9%9F%E8%83%BD" data-line="74" class="code-line">
<a class="header-anchor-link" href="#%E6%A3%8B%E8%AD%9C%E5%86%8D%E7%94%9F%EF%BC%86%E3%82%B7%E3%82%A7%E3%82%A2%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 棋譜再生＆シェア機能</h3>
<p data-line="76" class="code-line">このゲームは対局した棋譜をシェアする機能がある。たとえば以下のリンクを踏むと棋譜が再生される。</p>
<p data-line="78" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3ec9a41db3f88" src="https://embed.zenn.studio/card#zenn-embedded__3ec9a41db3f88" data-content="https%3A%2F%2Fkurehajime.github.io%2Fpowpow_reversi%2F%3Freplay%3D1%26player%3D1%26level%3D1%26log%3D44.45.37.29.19.18.17.9.20.43.52.21.34.33.12" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://kurehajime.github.io/powpow_reversi/?replay=1&amp;player=1&amp;level=1&amp;log=44.45.37.29.19.18.17.9.20.43.52.21.34.33.12" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://kurehajime.github.io/powpow_reversi/?replay=1&amp;player=1&amp;level=1&amp;log=44.45.37.29.19.18.17.9.20.43.52.21.34.33.12</a></p>
<p data-line="80" class="code-line">仕組みは簡単で、URLに棋譜を突っ込んでいる。これによりDBやバックエンドを用意せずとも完全にフロントエンドだけで棋譜のシェアを実現している。</p>
<p data-line="82" class="code-line"><code>https://kurehajime.github.io/powpow_reversi/?replay=1&amp;player=1&amp;level=1&amp;log=44.45.37.29.19.18.17.9.20.43.52.21.34.33.12</code></p>
<h3 id="%E3%81%B7%E3%82%8B%E3%81%B7%E3%82%8B%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3" data-line="84" class="code-line">
<a class="header-anchor-link" href="#%E3%81%B7%E3%82%8B%E3%81%B7%E3%82%8B%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3" aria-hidden="true"></a> ぷるぷるアイコン</h3>
<p data-line="86" class="code-line">絵の下手さを誤魔化すために対戦相手のアイコンをぷるぷる震えるようにしている。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/46034900ca77-20250826.gif" class="md-img" loading="lazy"></p>
<p data-line="89" class="code-line">対戦が始まった時点ではキャラクターはじっとしているが、戦況が進むについて激しく動く。</p>
<p data-line="91" class="code-line">これにはSVGのフィルター機能を使っている。<br>
こんな感じのSVGフィルターを用意して</p>
<div class="code-block-container"><pre><code class="code-line" data-line="94">  &lt;svg aria-hidden="true" style={{ position: 'absolute', width: 0, height: 0 }}&gt;
    &lt;filter id="distortionFilter"&gt;
      &lt;feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="2" seed="1" result="noise"&gt;
        &lt;animate attributeName="seed" values="1;2;3;4;5;6;7;8;9;10" dur="2s" repeatCount="indefinite" calcMode="discrete" /&gt;
      &lt;/feTurbulence&gt;
      &lt;feDisplacementMap in="SourceGraphic" in2="noise" scale={jitterScale} /&gt;
    &lt;/filter&gt;
  &lt;/svg&gt;
</code></pre></div><p data-line="105" class="code-line">filterとしてidを指定するとうねうね動く。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="107">&lt;img
src={src}
alt={alt}
style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8, filter: 'url(#distortionFilter)' }}
/&gt;
</code></pre></div><p data-line="115" class="code-line"><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence" target="_blank" rel="nofollow noopener noreferrer">feTurbulence</a>という画像を乱すノイズエフェクトをかけるフィルターのシード値を数秒ごとに変えてうねうね動かしている。</p>
<p data-line="117" class="code-line">ここのサイトで紹介されているテクニックを参考にした。ここにあるサンプルはもっと凄い。</p>
<p data-line="119" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__90a3c8641fba1" src="https://embed.zenn.studio/card#zenn-embedded__90a3c8641fba1" data-content="https%3A%2F%2Fcamillovisini.com%2Fcoding%2Fsimulating-hand-drawn-motion-with-svg-filters" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://camillovisini.com/coding/simulating-hand-drawn-motion-with-svg-filters" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://camillovisini.com/coding/simulating-hand-drawn-motion-with-svg-filters</a></p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="121" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p data-line="123" class="code-line">自分は最高レベルの『こわいドラゴン』を倒すのに数日かかった。<br>
みなさんも挑戦してみてください。</p>
<p data-line="126" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2a3e7908a884c" src="https://embed.zenn.studio/card#zenn-embedded__2a3e7908a884c" data-content="https%3A%2F%2Fkurehajime.github.io%2Fpowpow_reversi%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://kurehajime.github.io/powpow_reversi/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://kurehajime.github.io/powpow_reversi/</a></p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-a8ca-1" class="footnote-item">
<p data-line="70" class="code-line"><a href="https://commons.wikimedia.org/wiki/File:Minimax.svg" target="_blank" rel="nofollow noopener noreferrer">WikipediaのMiniMax法の図(作者:W576A925)</a> <a href="#fnref-a8ca-1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-a8ca-2" class="footnote-item">
<p data-line="71" class="code-line"><a href="https://unglueit-files.s3.amazonaws.com/ebf/59f74a93bbc1435c9ca1557b4bb6e9ba.pdf" target="_blank" rel="nofollow noopener noreferrer">P. Novig: "Paradigms of Artificial Intelligence Programming,"<br>
Case Studies in Common Lisp, Morgan Kaufmann, 1992.</a> <a href="#fnref-a8ca-2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


角をとっただけでは勝てないリバーシの亜種を作った

しゃり

kurehajime

<p data-line="0" class="code-line">はじめまして<br>
ちょっとはまっており、今１時間くらいやってます。<br>
僭越ながら、個人的な希望なのですが書かせてください。</p>
<ul data-line="3" class="code-line">
<li data-line="3" class="code-line">盤面の隣に戦績履歴が欲しいです。セッションが切れても残るようにしていただけたら嬉しいです。</li>
<li data-line="4" class="code-line">文字色を変えてほしいです。自分がダークモードだからか、現時点でのスコアやCPU強さのドロップダウンの文字が背景色と同化して見えません。文字色だけユーザーが選べるだけでも良いかもしれません。</li>
</ul>
<p data-line="6" class="code-line">(いえ、CPUの戦略部分とかの実装に重きをおいてるだけで、そんなUXが目的のアプリではないことは分かってるんですけどね…。ただ、知育にもよいかもと少しだけ思いました。子供がオセロを親に無限にねだる期間ってあるじゃないですか。あそこで足し算掛け算を考えれれば、子供が数の扱いに慣れる&amp;1手に時間をかけるので親が相手するのが楽という。)</p>
<p data-line="8" class="code-line">追記<br>
ちょっと笑いました。可愛いなと思ってましたがそんな裏話があるとは。</p>
<blockquote data-line="10" class="code-line">
<p data-line="10" class="code-line">絵の下手さを誤魔化すために対戦相手のアイコンをぷるぷる震えるようにしている。</p>
</blockquote>


<p data-line="0" class="code-line">遊んでいただきありがとうございます！<br>
ダークモード見落としてました！これ見えないですね。修正しました。<br>
あとCPUのキャラの下に勝敗数を表示するようにしました！</p>


<p data-line="0" class="code-line">早速の対応ありがとうございます！<br>
まさか対応していただけるとは思ってなかったのでびっくりしました。<br>
見やすくなりました。<br>
vs龍やってます！負け越していることが記録として分かるようになりました…笑</p>


Discussion