作ってみたシリーズ！第2弾 【オセロ(Step1)】

はじめに

こんにちは。

今回は作ってみたシリーズ！第2弾として【オセロ(Step1)】を制作しました。

Step1では盤表示・PlayerとCPU交互に石を置く・CPUのレベル分けまで。

イメージしたゲームはオセロニアです。

仕様

• 正方形の盤であること
• 先攻後攻を選択できること
• オセロのルールを適切に反映していること

テスト

仕様をChatGPTに投げかけコードを生成してもらい、すぐに実行。

見た目はちゃんとオセロになっています。

先攻後攻を選択し、いざゲームをスタート！
「黒色のオセロを置いて白色を挟むと黒色に反転」

オセロのルール通りに反転しました。

また、プロンプトで指示を出していないが、黒色と白色の石の数がリアルタイムで表示される機能も表示されていました。

追加実装

このままでは味気ないのでもう少し機能を追加しようと思います。

まずは、

1. 盤のマスが崩れている部分があるので常時正方形になるように
2. 石が裏返ったときにマスが光る演出を追加
3. CPUのレベル分け

この３つの機能を盛り込みコードを生成！

石が裏返ったときにマスが光る演出を追加

裏返ったマスが光る演出の構成はCSSとJavaScriptにてくみ上げています。

裏返す座標ごとに.flashを一瞬付与して発光、石に.flipをつけてY回転。中間で色クラスを入れ替えます。

css
/* マス発光 */
.cell{ position: relative; }
.cell.flash::after{
content:""; position:absolute; inset:-2px; border-radius:6px;
box-shadow:0 0 0 10px rgba(255,255,150,.85);
opacity:0; animation:glow .45s ease-out;
}
@keyframes glow{
0%{opacity:1; transform:scale(1)}
100%{opacity:0; transform:scale(1.08)}
}

/* 石フリップ */
.piece{
position:absolute; inset:10%; border-radius:50%;
backface-visibility:hidden; will-change:transform;
}
.piece.black{ background: radial-gradient(circle at 35% 35%, #5a5a5a, #111); }
.piece.white{ background: radial-gradient(circle at 35% 35%, #fff, #cfcfcf); }

.piece.flip{
transform-style:preserve-3d;
animation:flip .28s ease-in-out;
}
@keyframes flip{
0%{ transform:rotateY(0) }
50%{ transform:rotateY(90deg) } /* ← この瞬間に色差し替え */
100%{ transform:rotateY(180deg) }
}

JS

const SIZE=8, BLACK=1, WHITE=-1;
const boardEl = document.getElementById('board');

function flashCell(x,y){
const cell = boardEl.children[y*SIZE + x];
cell.classList.remove('flash'); void cell.offsetWidth; // リスタート
cell.classList.add('flash');
}

function flipPiece(el, toColor){
el.classList.add('flip');
setTimeout(()=>{
el.classList.toggle('black', toColor===BLACK);
el.classList.toggle('white', toColor===WHITE);
}, 140); // 0.28sの半分＝50%
el.addEventListener('animationend', ()=> el.classList.remove('flip'), {once:true});
}

まだあまりまだ地味ですが、Step1としては十分な成果としました。
Step3までにはオセロニア風を目指します。

CPUのレベル分け

レベルは１～８までに分けました。

コードは少し長いので省略します。

各レベル別の考え方ですが、