JavaScriptでマルバツゲームを作ってみた
この記事では、JavaScriptを使ってシンプルなマルバツゲームを作成したコードを紹介します。このゲームでは、ボタンをクリックすることでプレイヤーが「X」または「O」を入力し、勝者が決まる仕組みになっています。
コードの解説
HTML部分
<style>button{font-size:50;width:100;height:100</style>
<body id=b><script>
z=3,c=0;
p=Array(Z=z*z).fill(g=".");
m=n=>{
p[n]==g&&(p[n]=c++%2?"X":"O");
(s=p[n])!=g&&[p.filter((_,i)=>i%(z+1)==0),p.filter((_,i)=>i&&i-Z+1&&i%(z-1)==0),p.filter((_,i)=>i%z==n%z),p.slice(0+(N=~~(n/z)*z),z+N)].some(e=>[...new Set(e)]==s&&alert("win",m=n=>0));
b.innerHTML=p.map((v,i)=>`${i%z?"":"<br>"}<button onclick=m(${i})>${v}</button>`).join``
};m()
</script>
1. スタイル部分
<style>
button{font-size:50;width:100;height:100}
</style>
- ここでは、ボタンのフォントサイズやサイズを設定しています。ボタンは大きめに設定して、視覚的にインタラクティブに見えるようにしています。
2. ゲームロジック
z=3, c=0;
p=Array(Z=z*z).fill(g=".");
-
z=3で盤面のサイズを決めています。ここでは3x3の盤面を作成しています。 -
p=Array(Z=z*z).fill(g=".");で盤面を初期化しています。最初はすべてのセルを「.」で埋めています。
m=n=>{
p[n]==g&&(p[n]=c++%2?"X":"O");
(s=p[n])!=g&&[p.filter((_,i)=>i%(z+1)==0),p.filter((_,i)=>i&&i-Z+1&&i%(z-1)==0),p.filter((_,i)=>i%z==n%z),p.slice(0+(N=~~(n/z)*z),z+N)].some(e=>[...new Set(e)]==s&&alert("win",m=n=>0));
b.innerHTML=p.map((v,i)=>`${i%z?"":"<br>"}<button onclick=m(${i})>${v}</button>`).join``
};
m()
-
m=n=>{}は、セルがクリックされたときに呼ばれる関数です。nはクリックされたセルのインデックスを表します。 -
p[n]==g&&(p[n]=c++%2?"X":"O");では、セルが空いている場合に「X」または「O」を代入します。c++%2によって、ターンが交互に切り替わります。 - 勝敗判定は、次のコードで行っています。縦、横、斜めのどれかのラインに同じ記号（「X」または「O」）が揃った場合、勝者を表示します。
[s=p[n]]!=g&&[
p.filter((_,i)=>i%(z+1)==0),
p.filter((_,i)=>i&&i-Z+1&&i%(z-1)==0),
p.filter((_,i)=>i%z==n%z),
p.slice(0+(N=~~(n/z)*z),z+N)
].some(e=>[...new Set(e)]==s&&alert("win",m=n=>0));
3. ゲーム盤の表示
b.innerHTML=p.map((v,i)=>`${i%z?"":"<br>"}<button onclick=m(${i})>${v}</button>`).join``
-
p.map()を使って、盤面の各セルにボタンを配置します。ボタンのクリックイベントで、m()関数が呼び出されるようになっています。 - 各ボタンには現在のセルの状態（「X」または「O」）が表示されます。
4. ゲーム開始
m()
- 最後に
m()を呼び出すことで、ゲームが初期化され、最初の盤面が表示されます。
結果
このコードを実行すると、3x3のマルバツゲームがブラウザに表示されます。ユーザーはボタンをクリックして「X」や「O」を入力し、勝者が決まるとアラートが表示されます。
まとめ
このコードは非常にシンプルで、基本的なマルバツゲームのロジックを紹介しています。実際のゲームに必要な要素（ターン交代、勝敗判定、再スタートなど）を実装することで、さらに発展させることができます。