【コピペで完成】まるばつゲーム（三目並べ）の作り方｜HTMLとJavaScriptでAI対戦を実装しよう！

「JavaScriptで何か動くものを作ってみたいけど、何から始めればいいのか分からない…」
「AI対戦のような“ちょっと本格的”なゲームを自分で作ってみたい！」

そんなあなたにぴったりなのが、今回紹介するまるばつゲーム（三目並べ・AI対戦）です。

このゲームは、HTML・CSS・JavaScriptの3つだけで動く、シンプルかつ奥深いWebゲーム。
特別なライブラリや環境構築は一切不要。
ひとつのHTMLファイルにすべてのコードを書くだけで、ブラウザ上ですぐにAIとの対戦が楽しめます！

まるばつゲーム（三目並べ）とは？

まるばつゲーム（三目並べ）は、誰でもすぐに遊べる定番の頭脳ゲームです。
3×3のマスの中に「○」と「×」を交互に置き、縦・横・斜めのどこかで3つ並べた方が勝ちという、シンプルながら奥深いルールが特徴です。

完成版を体験してみよう

: 【無料ブラウザゲーム】まるばつゲーム（三目並べ・AI対戦）｜スマホ対応・コンピューターと本気で勝負！
「手軽に遊べて、頭の体操にもなるゲームを探している」「AIと対戦できる面白いブラウザゲームがやってみたい」そんなあなたにぴったりなのが、今回紹介するまるばつゲーム（三目並べ・AI対戦）です。このゲ ...

このゲームの基本仕様

項目	内容	説明
盤面サイズ	3×3（全9マス）	小さな格子状のボードを使用。短時間で決着がつくのが魅力です。
プレイヤー	あなた（人間） vs コンピューター（AI）	AIが相手として自動で動作します。
手番の選択	「先手（X）」または「後手（O）」を選択可能	どちらで始めるかを自分で決められます。
勝利条件	自分のマークを縦・横・斜めのいずれかに3つ並べる	最初に3つ並べた方が勝ち。シンプルで直感的。
引き分け	全マスが埋まって勝敗がつかない場合	“引き分け”メッセージが表示されます。
リセット機能	「もう一度」ボタンで再戦可能	何度でも新しい対戦を楽しめます。

完成版を動かしてみよう（コピペ実行）

まずは、完成版を実際に動かしてみましょう。
このゲームは、ひとつのHTMLファイルにすべてのコードを記述する「単一ファイル構成」になっています。
つまり、特別な開発環境は必要ありません。メモ帳やVS CodeなどのテキストエディタがあればOKです。

手順①：ファイルを作成する

デスクトップなど、分かりやすい場所に新しいファイルを作成します。
ファイル名を marubatsu.html にしてください。
テキストエディタで開き、以下のように記述します。

コードを記述する位置の目安

コード全体は次の3つのブロックで構成されています。

ブロック	記述場所	内容の概要
HTML構造部分	`<body>` ～ `</body>` の中	ゲームの盤面（3×3マス）・ボタン・メッセージなどの構造を記述します。
CSSデザイン部分	`<style>` ～ `</style>` の中	ボードのレイアウト、マス目のデザイン、ボタンの装飾などを定義します。
JavaScriptロジック部分	`<script>` ～ `</script>` の中	プレイヤー操作、AIの思考、勝敗判定、リセット処理などの動きを記述します。

完成コードをまるごと貼り付ける

下の「完成コード」をすべてコピーして、marubatsu.html に貼り付け、上書き保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>まるばつゲーム (AI対戦) </title>
  <style>
    /* --- 1) 全体デザイン（モバイル最適化含む） --- */
    body{
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      min-height:100vh; margin:0; background:#f4f4f9;
    }
    .container{
      background:#fff; padding:25px; border-radius:12px;
      box-shadow:0 4px 15px rgba(0,0,0,.08);
      text-align:center; width:90%; max-width:400px;
    }
    h1{ margin:0 0 16px; color:#333; font-size:clamp(1.2rem, 4.5vw, 1.6rem); }

    /* --- 2) 選択・情報エリア --- */
    #choiceArea{ margin-bottom:16px; }
    .select-button{
      padding:10px 16px; font-size:1rem; cursor:pointer; margin:0 6px;
      border:2px solid #007bff; border-radius:8px; background:#fff; color:#007bff;
      transition:background-color .15s ease, transform .02s ease;
      min-height:44px; /* (7) タップ領域確保 */
    }
    .select-button:hover{ background:#eaf3ff; }
    .select-button:active{ transform:scale(.98); }

    /* --- 3) メッセージ（スクリーンリーダー対応） --- */
    #message{
      font-size:1.05rem; font-weight:700; min-height:32px; margin-bottom:12px;
    }

    /* --- 4) 盤面 --- */
    #gameBoard{
      display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr);
      gap:6px; width:100%; aspect-ratio:1 / 1; background:#333; border:5px solid #333;
      border-radius:6px; margin:16px auto;
      transition:opacity .15s ease;
    }
    .cell{
      background:#fff; display:flex; align-items:center; justify-content:center;
      font-size:clamp(2.4rem, 10vw, 4rem); /* (7) モバイル可変 */
      font-weight:800; cursor:pointer; user-select:none;
      transition:background-color .1s ease;
    }
    .cell:hover{ background:#f0f0f0; }
    .winner{ background:#ffdddd !important; }

    /* (1) AI思考中にUIロック */
    .board-locked{ pointer-events:none; opacity:.92; }

    /* --- 5) リセット --- */
    #resetButton{
      padding:10px 18px; font-size:1rem; cursor:pointer; background:#28a745; color:#fff;
      border:none; border-radius:28px; display:none; min-height:44px; /* (7) */
    }
    #resetButton:hover{ filter:brightness(1.05); }
  </style>
</head>
<body>
  <div class="container">
    <h1>⭕️❌ まるばつゲーム (AI対戦)</h1>

    <div id="choiceArea">
      <p>どちらでプレイしますか？</p>
      <button class="select-button" onclick="startGame('X')">先手 (X)</button>
      <button class="select-button" onclick="startGame('O')">後手 (O)</button>
    </div>

    <!-- (2) aria-live で勝敗/手番の読み上げに対応 -->
    <div id="message" aria-live="polite">選択してください</div>

    <div id="gameBoard"></div>

    <button id="resetButton" onclick="resetGame()">もう一度</button>
  </div>

  <script>
    // --- 定数・状態 ---
    const BOARD_SIZE = 3;
    const gameBoard = document.getElementById('gameBoard');
    const messageDisplay = document.getElementById('message');
    const choiceArea = document.getElementById('choiceArea');
    const resetButton = document.getElementById('resetButton');

    // 勝利パターン（インデックス）
    const WINNING_CONDITIONS = [
      [0,1,2],[3,4,5],[6,7,8],   // 横
      [0,3,6],[1,4,7],[2,5,8],   // 縦
      [0,4,8],[2,4,6]            // 斜め
    ];

    // 盤面状態
    let board = Array(BOARD_SIZE * BOARD_SIZE).fill(null); // null, 'X', 'O'
    let currentPlayer = null; // 現在の手番（'X' or 'O'）
    let playerSymbol = null;  // プレイヤーの記号
    let aiSymbol = null;      // AIの記号
    let gameActive = false;   // ゲームが進行中か

    // --- 盤面生成（createBoardは一度だけ実行し、startGameでは再アタッチしない） (4) ---
    function createBoard(){
      gameBoard.innerHTML = '';
      for(let i=0;i<BOARD_SIZE*BOARD_SIZE;i++){
        const cell = document.createElement('div');
        cell.className = 'cell';
        cell.dataset.index = i;
        cell.addEventListener('click', handleCellClick);
        gameBoard.appendChild(cell);
      }
    }

    // --- ゲーム開始 ---
    function startGame(symbol){
      playerSymbol = symbol;
      aiSymbol = (symbol === 'X') ? 'O' : 'X';
      currentPlayer = 'X'; // ルールとして常にXから（必要ならランダムに変更可）
      board.fill(null);
      gameActive = true;

      // UI
      choiceArea.style.display = 'none';
      resetButton.style.display = 'inline-block';
      messageDisplay.textContent = `${playerSymbol} (プレイヤー) が${playerSymbol==='X' ? '先手' : '後手'}です。`;

      // 盤面表示をリセット
      document.querySelectorAll('.cell').forEach(cell=>{
        cell.textContent = '';
        cell.classList.remove('winner');
      });

      // もしAIが先手（X）ならAIターンへ
      if(aiSymbol === 'X'){
        messageDisplay.textContent = `コンピューター (${aiSymbol}) の番です…`;
        gameBoard.classList.add('board-locked'); // (1) ロック
        setTimeout(aiTurn, 600);
      }else{
        // プレイヤーの番
        gameBoard.classList.remove('board-locked');
        messageDisplay.textContent = `あなたの番です (${playerSymbol})`;
      }
    }

    // --- セルクリック ---
    function handleCellClick(e){
      const cell = e.currentTarget;
      const index = Number(cell.dataset.index);

      // 非アクティブ / 既に埋まっている / AIの番 は無視
      if(!gameActive || board[index] !== null || currentPlayer !== playerSymbol) return;

      makeMove(index, playerSymbol);

      if(checkResult()) return; // 勝敗/引き分けで終了

      // 手番をAIへ
      currentPlayer = aiSymbol;
      messageDisplay.textContent = `コンピューター (${aiSymbol}) の番です…`;
      gameBoard.classList.add('board-locked'); // (1) ロック
      setTimeout(aiTurn, 700);
    }

    // --- 盤面更新 ---
    function makeMove(index, symbol){
      board[index] = symbol;
      const cell = document.querySelector(`.cell[data-index="${index}"]`);
      cell.textContent = symbol;
      // クリック無効化は board 参照で網羅できるため再設定不要（createBoard一回でOK）
    }

    // --- 勝敗/引き分け判定（(5) 勝者表示の一貫性: winnerSymbolで表示） ---
    function checkResult(){
      let winningCombo = null;
      let winnerSymbol = null;

      for(const combo of WINNING_CONDITIONS){
        const [a,b,c] = combo;
        const va = board[a], vb = board[b], vc = board[c];
        if(va && va===vb && vb===vc){
          winningCombo = combo;
          winnerSymbol = va; // 'X' or 'O'
          break;
        }
      }

      if(winnerSymbol){
        gameActive = false;
        messageDisplay.textContent = `${winnerSymbol} の勝利です！`;
        // ハイライト
        winningCombo.forEach(i=>{
          document.querySelector(`.cell[data-index="${i}"]`).classList.add('winner');
        });
        gameBoard.classList.remove('board-locked');
        return true;
      }

      // 引き分け
      if(!board.includes(null)){
        gameActive = false;
        messageDisplay.textContent = '引き分けです！';
        gameBoard.classList.remove('board-locked');
        return true;
      }

      return false;
    }

    // --- AIターン（(1) UIロックのオン/オフ） ---
    function aiTurn(){
      if(!gameActive) { gameBoard.classList.remove('board-locked'); return; }

      let bestMove = -1;
      const emptyIndices = board.map((v,i)=> v===null ? i : null).filter(v=>v!==null);

      // 1. 自分が勝てる手
      bestMove = findWinningMove(aiSymbol);
      if(bestMove === -1){
        // 2. 相手の勝ち手を阻止
        bestMove = findWinningMove(playerSymbol);
      }
      if(bestMove === -1){
        // 3. 中央
        if(board[4] === null) bestMove = 4;
      }
      if(bestMove === -1){
        // 4. 角
        const corners = [0,2,6,8].filter(i=> board[i]===null);
        if(corners.length) bestMove = corners[Math.floor(Math.random()*corners.length)];
      }
      if(bestMove === -1){
        // 5. その他
        bestMove = emptyIndices[Math.floor(Math.random()*emptyIndices.length)];
      }

      if(bestMove !== -1){
        makeMove(bestMove, aiSymbol);
        if(checkResult()) return;

        // 手番をプレイヤーへ
        currentPlayer = playerSymbol;
        messageDisplay.textContent = `あなたの番です (${playerSymbol})`;
      }

      gameBoard.classList.remove('board-locked'); // (1) アンロック
    }

    // --- 3つ並び目前の勝ち筋/阻止手を探す ---
    function findWinningMove(symbol){
      for(const [a,b,c] of WINNING_CONDITIONS){
        const line = [board[a], board[b], board[c]];
        if(line.filter(v=>v===symbol).length === 2){
          const nullPos = line.findIndex(v=>v===null);
          if(nullPos !== -1){
            return [a,b,c][nullPos];
          }
        }
      }
      return -1;
    }

    // --- リセット（(6) 軽量リセット・選択画面に戻す） ---
    function resetGame(){
      gameActive = false;
      board.fill(null);
      currentPlayer = null;
      playerSymbol = null;
      aiSymbol = null;

      // UIクリア
      document.querySelectorAll('.cell').forEach(cell=>{
        cell.textContent = '';
        cell.classList.remove('winner');
      });

      messageDisplay.textContent = '選択してください';
      choiceArea.style.display = 'block';
      resetButton.style.display = 'none';
      gameBoard.classList.remove('board-locked');
    }

    // 実行
    createBoard();
  </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

<!DOCTYPE html>

<head>

<title>まるばつゲーム (AI対戦) </title>

<style>

/* --- 1) 全体デザイン（モバイル最適化含む） --- */

body{

font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;

display:flex; flex-direction:column; align-items:center; justify-content:center;

min-height:100vh; margin:0; background:#f4f4f9;

}

.container{

background:#fff; padding:25px; border-radius:12px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

text-align:center; width:90%; max-width:400px;

}

h1{ margin:0 0 16px; color:#333; font-size:clamp(1.2rem, 4.5vw, 1.6rem); }

/* --- 2) 選択・情報エリア --- */

#choiceArea{ margin-bottom:16px; }

.select-button{

padding:10px 16px; font-size:1rem; cursor:pointer; margin:0 6px;

border:2px solid #007bff; border-radius:8px; background:#fff; color:#007bff;

transition:background-color .15s ease, transform .02s ease;

min-height:44px; /* (7) タップ領域確保 */

}

.select-button:hover{ background:#eaf3ff; }

.select-button:active{ transform:scale(.98); }

/* --- 3) メッセージ（スクリーンリーダー対応） --- */

#message{

font-size:1.05rem; font-weight:700; min-height:32px; margin-bottom:12px;

}

/* --- 4) 盤面 --- */

#gameBoard{

display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr);

gap:6px; width:100%; aspect-ratio:1 / 1; background:#333; border:5px solid #333;

border-radius:6px; margin:16px auto;

transition:opacity .15s ease;

}

.cell{

background:#fff; display:flex; align-items:center; justify-content:center;

font-size:clamp(2.4rem, 10vw, 4rem); /* (7) モバイル可変 */

font-weight:800; cursor:pointer; user-select:none;

transition:background-color .1s ease;

}

.cell:hover{ background:#f0f0f0; }

.winner{ background:#ffdddd !important; }

/* (1) AI思考中にUIロック */

.board-locked{ pointer-events:none; opacity:.92; }

/* --- 5) リセット --- */

#resetButton{

padding:10px 18px; font-size:1rem; cursor:pointer; background:#28a745; color:#fff;

border:none; border-radius:28px; display:none; min-height:44px; /* (7) */

}

#resetButton:hover{ filter:brightness(1.05); }

</style>

</head>

<body>

<h1>⭕️❌ まるばつゲーム (AI対戦)</h1>

<p>どちらでプレイしますか？</p>

</div>

<div id="message" aria-live="polite">選択してください</div>

</div>

// --- 定数・状態 ---

const BOARD_SIZE = 3;

const gameBoard = document.getElementById('gameBoard');

const messageDisplay = document.getElementById('message');

const choiceArea = document.getElementById('choiceArea');

const resetButton = document.getElementById('resetButton');

// 勝利パターン（インデックス）

const WINNING_CONDITIONS = [

[0,1,2],[3,4,5],[6,7,8], // 横

[0,3,6],[1,4,7],[2,5,8], // 縦

[0,4,8],[2,4,6] // 斜め

];

// 盤面状態

let board = Array(BOARD_SIZE * BOARD_SIZE).fill(null); // null, 'X', 'O'

let currentPlayer = null; // 現在の手番（'X' or 'O'）

let playerSymbol = null; // プレイヤーの記号

let aiSymbol = null; // AIの記号

let gameActive = false; // ゲームが進行中か

// --- 盤面生成（createBoardは一度だけ実行し、startGameでは再アタッチしない） (4) ---

function createBoard(){

gameBoard.innerHTML = '';

for(let i=0;i<BOARD_SIZE*BOARD_SIZE;i++){

const cell = document.createElement('div');

cell.className = 'cell';

cell.dataset.index = i;

cell.addEventListener('click', handleCellClick);

gameBoard.appendChild(cell);

}

// --- ゲーム開始 ---

function startGame(symbol){

playerSymbol = symbol;

aiSymbol = (symbol === 'X') ? 'O' : 'X';

currentPlayer = 'X'; // ルールとして常にXから（必要ならランダムに変更可）

board.fill(null);

gameActive = true;

// UI

choiceArea.style.display = 'none';

resetButton.style.display = 'inline-block';

messageDisplay.textContent = `${playerSymbol} (プレイヤー) が${playerSymbol==='X' ? '先手' : '後手'}です。`;

// 盤面表示をリセット

document.querySelectorAll('.cell').forEach(cell=>{

cell.textContent = '';

cell.classList.remove('winner');

});

// もしAIが先手（X）ならAIターンへ

if(aiSymbol === 'X'){

messageDisplay.textContent = `コンピューター (${aiSymbol}) の番です…`;

gameBoard.classList.add('board-locked'); // (1) ロック

setTimeout(aiTurn, 600);

}else{

// プレイヤーの番

gameBoard.classList.remove('board-locked');

messageDisplay.textContent = `あなたの番です (${playerSymbol})`;

}

// --- セルクリック ---

function handleCellClick(e){

const cell = e.currentTarget;

const index = Number(cell.dataset.index);

// 非アクティブ / 既に埋まっている / AIの番は無視

if(!gameActive || board[index] !== null || currentPlayer !== playerSymbol) return;

makeMove(index, playerSymbol);

if(checkResult()) return; // 勝敗/引き分けで終了

// 手番をAIへ

currentPlayer = aiSymbol;

messageDisplay.textContent = `コンピューター (${aiSymbol}) の番です…`;

gameBoard.classList.add('board-locked'); // (1) ロック

setTimeout(aiTurn, 700);

}

// --- 盤面更新 ---

function makeMove(index, symbol){

board[index] = symbol;

const cell = document.querySelector(`.cell[data-index="${index}"]`);

cell.textContent = symbol;

// クリック無効化は board 参照で網羅できるため再設定不要（createBoard一回でOK）

}

// --- 勝敗/引き分け判定（(5) 勝者表示の一貫性: winnerSymbolで表示） ---

function checkResult(){

let winningCombo = null;

let winnerSymbol = null;

for(const combo of WINNING_CONDITIONS){

const [a,b,c] = combo;

const va = board[a], vb = board[b], vc = board[c];

if(va && va===vb && vb===vc){

winningCombo = combo;

winnerSymbol = va; // 'X' or 'O'

break;

}

if(winnerSymbol){

gameActive = false;

messageDisplay.textContent = `${winnerSymbol} の勝利です！`;

// ハイライト

winningCombo.forEach(i=>{

document.querySelector(`.cell[data-index="${i}"]`).classList.add('winner');

});

gameBoard.classList.remove('board-locked');

return true;

}

// 引き分け

if(!board.includes(null)){

gameActive = false;

messageDisplay.textContent = '引き分けです！';

gameBoard.classList.remove('board-locked');

return true;

}

return false;

}

// --- AIターン（(1) UIロックのオン/オフ） ---

function aiTurn(){

if(!gameActive) { gameBoard.classList.remove('board-locked'); return; }

let bestMove = -1;

const emptyIndices = board.map((v,i)=> v===null ? i : null).filter(v=>v!==null);

// 1. 自分が勝てる手

bestMove = findWinningMove(aiSymbol);

if(bestMove === -1){

// 2. 相手の勝ち手を阻止

bestMove = findWinningMove(playerSymbol);

}

if(bestMove === -1){

// 3. 中央

if(board[4] === null) bestMove = 4;

}

if(bestMove === -1){

// 4. 角

const corners = [0,2,6,8].filter(i=> board[i]===null);

if(corners.length) bestMove = corners[Math.floor(Math.random()*corners.length)];

}

if(bestMove === -1){

// 5. その他

bestMove = emptyIndices[Math.floor(Math.random()*emptyIndices.length)];

}

if(bestMove !== -1){

makeMove(bestMove, aiSymbol);

if(checkResult()) return;

// 手番をプレイヤーへ

currentPlayer = playerSymbol;

messageDisplay.textContent = `あなたの番です (${playerSymbol})`;

}

gameBoard.classList.remove('board-locked'); // (1) アンロック

}

// --- 3つ並び目前の勝ち筋/阻止手を探す ---

function findWinningMove(symbol){

for(const [a,b,c] of WINNING_CONDITIONS){

const line = [board[a], board[b], board[c]];

if(line.filter(v=>v===symbol).length === 2){

const nullPos = line.findIndex(v=>v===null);

if(nullPos !== -1){

return [a,b,c][nullPos];

}

return -1;

}

// --- リセット（(6) 軽量リセット・選択画面に戻す） ---

function resetGame(){

gameActive = false;

board.fill(null);

currentPlayer = null;

playerSymbol = null;

aiSymbol = null;

// UIクリア

document.querySelectorAll('.cell').forEach(cell=>{

cell.textContent = '';

cell.classList.remove('winner');

});

messageDisplay.textContent = '選択してください';

choiceArea.style.display = 'block';

resetButton.style.display = 'none';

gameBoard.classList.remove('board-locked');

}

// 実行

createBoard();

</script>

</body>

</html>

手順②：保存してブラウザで開く

すべてのコードを貼り付けたら、保存します。
その後、ファイルをダブルクリックして開いてみましょう。

ブラウザ上に「まるばつゲーム (AI対戦)」が表示され、
マスをクリックするとAIが自動で応答するはずです。

手順③：動作を確認する

確認ポイントとして、以下の動作ができていれば成功です。

先手・後手を選んでスタートできる。
マスをクリックすると自分のマークがつく。
数秒後にAIが自動で動く。
勝ち・負け・引き分けのメッセージが表示される。
「もう一度」ボタンで再戦できる。

HTMLを理解しよう（ゲームの骨組み）

HTML（エイチ・ティー・エム・エル）は、Webページの設計図のようなものです。
このゲームでは、HTMLが盤面・メッセージ・ボタンなどの「目に見える部分の土台」をつくっています。

HTMLは“どんなパーツがあるか”を決める部分です。見た目や動きはCSSとJavaScriptが担当します。

ほーく

各要素の役割を見てみよう

要素	ID / クラス名	役割
`<div class="container">`	ページ全体を包む枠	ゲームの中心部分。CSSで中央寄せ＆余白を設定します。
`<h1>`	タイトル	ページ上部にタイトル「まるばつゲーム (AI対戦)」を表示。
`<div id="choiceArea">`	選択エリア	ゲーム開始前に「先手・後手」を選択する部分。
`<div id="message">`	メッセージ表示	現在の手番や勝敗をリアルタイムで表示します。
`<div id="gameBoard">`	盤面	3×3のマスがJavaScriptで生成され、ここに配置されます。
`<button id="resetButton">`	リセットボタン	ゲーム終了後、「もう一度プレイ」できるようにします。

ここでのポイント

ID（例：id="gameBoard"） はJavaScriptから操作するための“目印”です。
JavaScriptでは document.getElementById('gameBoard') のように指定して、要素を取得します。
クラス名（例：.container, .select-button） はCSSでデザインを指定するために使います。

IDは“名前札”、クラスは“グループ名”のようなものです。どちらもCSSやJSで操作するためのラベルです。

ほーく

CSSでデザインとレイアウトを作ろう

HTMLが「骨組み」だとすれば、CSS（スタイルシート）は見た目を整える服や化粧のような存在です。
CSSを使うことで、まるばつゲームにグリッド状の盤面・配色・アニメーション効果・スマホ対応レイアウトを加えられます。

HTMLは“部品の配置図”、CSSは“見た目を整える設計書”なんです。

ほーく

ゲーム全体のデザインの考え方

このCSSでは、主に以下の5つの要素をデザインしています。

要素	内容	主な目的
`body`	背景や全体の中央寄せ	ページ全体を整えて、見やすく配置
`.container`	ゲーム本体の枠	影や角丸で立体感を出す
`#gameBoard`	盤面（3×3の格子）	CSS Gridで正確なレイアウトを作成
`.cell`	各マスの見た目	背景色、フォントサイズ、クリック時の動きなど
`.winner`	勝利ライン	勝ったときに赤く光る演出を追加

CSS Gridで3×3の盤面を作る

CSS Gridは、「表のように行と列を簡単に整える機能」です。
これを使うと、3×3の格子をほんの数行で作れます。

#gameBoard {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列を均等に */
  grid-template-rows: repeat(3, 1fr);    /* 3行を均等に */
  gap: 6px;                              /* マスの間に隙間 */
  width: 100%;
  aspect-ratio: 1 / 1;                   /* 正方形に維持 */
  /* ... その他の装飾 ... */
}

#gameBoard {

display: grid;

grid-template-columns: repeat(3, 1fr); /* 3列を均等に */

grid-template-rows: repeat(3, 1fr); /* 3行を均等に */

gap: 6px; /* マスの間に隙間 */

width: 100%;

aspect-ratio: 1 / 1; /* 正方形に維持 */

/* ... その他の装飾 ... */

}

スマホ対応（レスポンシブデザイン）

スマートフォンでも快適に遊べるように、CSSでは width: 90% や max-width: 400px を使用しています。
さらに、フォントサイズは clamp() 関数で画面幅に合わせて自動調整します。

.cell {
  font-size: clamp(2.4rem, 10vw, 4em);
}

.cell {

font-size: clamp(2.4rem, 10vw, 4em);

}

clamp(最小値, 推奨値, 最大値)
画面が小さいときは小さく、大きい画面では拡大してくれる便利な関数です。

JavaScriptでゲームを動かそう（ロジック解説）

JavaScriptは、まるばつゲームの“頭脳”にあたる部分です。
HTMLで作ったマスやボタンに「動き」や「判断力」を与えるのがこの言語の役割です。

ゲームの基本構造を理解しよう

このゲームのロジックは、大きく次の5つのパートで構成されています。

パート	内容	主な役割
① 初期設定	変数・定数の定義	盤面やAIの記号などを準備
② 盤面生成	クリックできるマスを生成	HTML上に3×3のマスを作る
③ プレイヤー操作	クリック処理	プレイヤーがマスを選んだときの動作
④ 勝敗判定	勝ち・引き分けのチェック	一列揃ったかどうかを判定
⑤ AIの思考	コンピューターの手番処理	次に打つ場所を自動的に決定

① 初期設定（ゲームの準備）

最初に、ゲームの全体を制御する変数を定義します。

// --- 定数・状態 ---
const BOARD_SIZE = 3;
const gameBoard = document.getElementById('gameBoard');

// 盤面状態
let board = Array(BOARD_SIZE * BOARD_SIZE).fill(null); // 9マス分の配列
let currentPlayer = null; // 現在の手番（'X' or 'O'）
let playerSymbol = null;  // プレイヤーの記号
let aiSymbol = null;      // AIの記号
let gameActive = false;   // ゲームが進行中か

// --- 定数・状態 ---

const BOARD_SIZE = 3;

const gameBoard = document.getElementById('gameBoard');

// 盤面状態

let board = Array(BOARD_SIZE * BOARD_SIZE).fill(null); // 9マス分の配列

let currentPlayer = null; // 現在の手番（'X' or 'O'）

let playerSymbol = null; // プレイヤーの記号

let aiSymbol = null; // AIの記号

let gameActive = false; // ゲームが進行中か

ここでは「ゲームボード」を配列で管理しています。
配列とは、データを順番に並べて保存できる箱のようなものです。

配列を使うことで、どのマスに何が置かれたかを簡単に管理できます。

ほーく

② 盤面生成（createBoard）

ゲーム開始時に、JavaScriptが自動で9つのマスを作ります。
これを行うのが createBoard() 関数です。

function createBoard(){
   gameBoard.innerHTML = '';
   for(let i=0;i<BOARD_SIZE*BOARD_SIZE;i++){
     const cell = document.createElement('div');
     cell.className = 'cell';
     cell.dataset.index = i;
     cell.addEventListener('click', handleCellClick);
     gameBoard.appendChild(cell);
   }
}

function createBoard(){

gameBoard.innerHTML = '';

for(let i=0;i<BOARD_SIZE*BOARD_SIZE;i++){

const cell = document.createElement('div');

cell.className = 'cell';

cell.dataset.index = i;

cell.addEventListener('click', handleCellClick);

gameBoard.appendChild(cell);

}

このようにして、HTMLに書いていなかった9つのマスをJavaScriptが自動で生成します。
addEventListener('click', handleCellClick) によって、クリックされたときの処理が紐づきます。

③ プレイヤー操作（クリック処理）

プレイヤーがマスをクリックすると、
そのマスに自分の記号（XまたはO）が表示されるようにします。

function handleCellClick(e){
  const cell = e.currentTarget;
  const index = Number(cell.dataset.index);

  // 非アクティブ / 既に埋まっている / AIの番 は無視
  if(!gameActive || board[index] !== null || currentPlayer !== playerSymbol) return;

  makeMove(index, playerSymbol);

  if(checkResult()) return; // 勝敗/引き分けで終了

  // 手番をAIへ
  currentPlayer = aiSymbol;
  messageDisplay.textContent = `コンピューター (${aiSymbol}) の番です…`;
  gameBoard.classList.add('board-locked'); // (1) ロック
  setTimeout(aiTurn, 700);
}

function handleCellClick(e){

const cell = e.currentTarget;

const index = Number(cell.dataset.index);

// 非アクティブ / 既に埋まっている / AIの番は無視

if(!gameActive || board[index] !== null || currentPlayer !== playerSymbol) return;

makeMove(index, playerSymbol);

if(checkResult()) return; // 勝敗/引き分けで終了

// 手番をAIへ

currentPlayer = aiSymbol;

messageDisplay.textContent = `コンピューター (${aiSymbol}) の番です…`;

gameBoard.classList.add('board-locked'); // (1) ロック

setTimeout(aiTurn, 700);

}

Number(cell.dataset.index)：クリックされたマスの番号を取得。
makeMove()：実際にマークを表示して、盤面情報を更新。
setTimeout(aiTurn, 700)：少し待ってからAIが動くように設定。

④ 勝敗判定（checkResult）

毎回プレイヤーやAIが動くたびに、勝利や引き分けをチェックします。

const WINNING_CONDITIONS = [
  [0,1,2],[3,4,5],[6,7,8],   // 横
  [0,3,6],[1,4,7],[2,5,8],   // 縦
  [0,4,8],[2,4,6]            // 斜め
];

const WINNING_CONDITIONS = [

[0,1,2],[3,4,5],[6,7,8], // 横

[0,3,6],[1,4,7],[2,5,8], // 縦

[0,4,8],[2,4,6] // 斜め

];

この勝利条件をもとに、
checkResult() 関数が「3つ同じ記号が並んでいるか」を確認します。

これは“並びのパターン表”なんです。どの列がそろえば勝ちかを定義しています。

ほーく

⑤ AIの思考ロジック（aiTurn）

AIはランダムではなく、勝てる手・守る手を優先して動きます。

1.自分が勝てるマスがあればそこに置く。
2.相手（プレイヤー）が次に勝てるマスがあれば防ぐ。
3.中央マスが空いていれば取る。
4.角（四隅）を優先。
5.残りのマスをランダムに選ぶ。

このような優先順位を実装することで、
AIは人間のように“考えて”動いているように見えるわけです。

実際は if文を組み合わせたシンプルなロジックなんですよ。

ほーく

カスタマイズしてオリジナルAI対戦を作ろう

ここまでで、AIと対戦できる基本の「まるばつゲーム（三目並べ）」が完成しました。
この章では、自分だけのオリジナル要素を加えるカスタマイズに挑戦してみましょう。

「ちょっとした変更」でもゲームの印象は大きく変わります。
初心者でもできるアレンジから、少し高度な改造まで、段階的に紹介します。

デザインを変えてみよう（CSSカスタマイズ）

まずは見た目の変更から始めましょう。
CSSのほんの数行を変えるだけで、全く違う雰囲気になります。

例：背景色をダークテーマに変更

body {
  background-color: #1c1c1c;
  color: #f0f0f0;
}
.cell {
  background-color: #2a2a2a;
  color: #ffcc00;
}

body {

background-color: #1c1c1c;

color: #f0f0f0;

}

.cell {

background-color: #2a2a2a;

color: #ffcc00;

}

AIの強さを調整してみよう（思考時間・ランダム要素）

AIは現状、最も効率的な手を優先して打ちます。
「全く勝てない…」という場合は、思考時間やランダム要素を少し加えると遊びやすくなります。

思考にランダム性を追加

// 20%の確率であえて最善手を選ばない
if (Math.random() < 0.2) {
  bestMove = emptyIndices[Math.floor(Math.random() * emptyIndices.length)];
}

// 20%の確率であえて最善手を選ばない

if (Math.random() < 0.2) {

bestMove = emptyIndices[Math.floor(Math.random() * emptyIndices.length)];

}

2人対戦モードにする（PVP化）

友達と交互に遊びたい場合は、AIの処理を削除して、
クリックごとにプレイヤーが交代する仕組みに変更するだけでOKです。

作って終わりではなく、どう面白くするかを考えるのがゲーム開発の醍醐味です。

ほーく

おすすめの学習リソース｜もっとスキルを伸ばしたいあなたへ

「まるばつゲーム（三目並べ）」を完成させたことで、あなたはすでに HTML・CSS・JavaScriptの基礎 に触れました。
ここからさらにステップアップするために役立つ学習リソースを紹介します。

オンライン講座編

Udemy｜世界最大級のオンライン学習プラットフォーム

世界中で利用されるオンライン学習サイト。
HTML、CSS、JavaScriptの入門から応用まで、高評価の講座が数百種類揃っています。
初心者でも動画を見ながら手を動かせるので、挫折しにくいのが魅力です。

まとめ

ここまでで、あなたは 「HTML・CSS・JavaScriptだけで動くAI対戦まるばつゲーム」 を完成させました。
お疲れさまでした！

最初は難しく見えたコードも、
実際に動かして・分解して・理解していくうちに、
「なるほど、こうやってゲームが動くのか！」と感じられたはずです。

ゲーム制作は「動くものを作って学ぶ」最強のプログラミング練習です。
今回のまるばつゲームで学んだ技術は、
今後のWebアプリ開発・ツール制作・インタラクティブなUIづくりにそのまま活かせます。

次は、他のゲーム作りにも挑戦してみましょう！

【実際に遊べるまるばつゲーム（三目並べ）はこちら。AIと対戦してみましょう！】▼

: 【無料ブラウザゲーム】まるばつゲーム（三目並べ・AI対戦）｜スマホ対応・コンピューターと本気で勝負！
「手軽に遊べて、頭の体操にもなるゲームを探している」「AIと対戦できる面白いブラウザゲームがやってみたい」そんなあなたにぴったりなのが、今回紹介するまるばつゲーム（三目並べ・AI対戦）です。このゲ ...

まるばつゲーム（三目並べ）を作れたあなたは、
他のゲームも作れる実力があります。
次のような作品にも挑戦してみましょう。

【作り方記事】スライドパズル（15パズル）の作り方｜配列操作とアルゴリズムを学ぼう！▼

: 【コピペで完成】スライドパズル（15パズル）の作り方｜HTMLとJavaScriptで動く本格ブラウザゲーム
「プログラミングを始めたけど、複雑なゲーム作りはちょっと難しそう…」「手軽に作れて、友達に見せても“すごい！”と言われるような作品を作りたい！」もしあなたがそう感じているなら、この記事がその悩みを解 ...

【作り方記事】神経衰弱ゲームの作り方｜カードのシャッフルや一致判定アルゴリズムを学ぼう！▼

: 【コピペで完成】神経衰弱ゲームの作り方｜HTMLとJavaScriptで遊べる本格トランプゲームをゼロから作ろう！
「JavaScriptでゲームを作ってみたいけど、何から始めたらいいのかわからない…」そんな方におすすめなのが、今回紹介する神経衰弱ゲームの作り方です。トランプを使った定番の記憶力ゲームを、HTML ...

【コピペで完成】まるばつゲーム（三目並べ）の作り方｜HTMLとJavaScriptでAI対戦を実装しよう！

まるばつゲーム（三目並べ）とは？

完成版を体験してみよう

このゲームの基本仕様

完成版を動かしてみよう（コピペ実行）

手順①：ファイルを作成する

コードを記述する位置の目安

完成コードをまるごと貼り付ける

手順②：保存してブラウザで開く

手順③：動作を確認する

HTMLを理解しよう（ゲームの骨組み）

各要素の役割を見てみよう

ここでのポイント

CSSでデザインとレイアウトを作ろう

ゲーム全体のデザインの考え方

CSS Gridで3×3の盤面を作る

スマホ対応（レスポンシブデザイン）

JavaScriptでゲームを動かそう（ロジック解説）

ゲームの基本構造を理解しよう

① 初期設定（ゲームの準備）

② 盤面生成（createBoard）

③ プレイヤー操作（クリック処理）

④ 勝敗判定（checkResult）

⑤ AIの思考ロジック（aiTurn）

カスタマイズしてオリジナルAI対戦を作ろう

デザインを変えてみよう（CSSカスタマイズ）

例：背景色をダークテーマに変更

AIの強さを調整してみよう（思考時間・ランダム要素）

思考にランダム性を追加

2人対戦モードにする（PVP化）

おすすめの学習リソース｜もっとスキルを伸ばしたいあなたへ

おすすめ書籍

『ゲームで学ぶJavaScript入門 増補改訂版 ～ブラウザゲームづくりでHTML＆CSSも身につく！』

『スラスラわかるHTML＆CSSのきほん』（SBクリエイティブ）

オンライン講座編

Udemy｜世界最大級のオンライン学習プラットフォーム

まとめ

関連記事

『ゲームで学ぶJavaScript入門増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく！』