○×ゲーム。3×3のマス目でタップしたところが◯になる。その後ランダムで空のマスが1マスだけ✕に変わる。上下左右、斜めに3つ同じ記号が並んだら、勝敗を表示する。ボタンを押すとリセットしてもう一度遊べる。's game

Click here for free DL of the app version that can save data.

No:36396

←

Prev Next

→

○×ゲーム。3×3のマス目でタップしたところが◯になる。その後ランダムで空のマスが1マスだけ✕に変わ..ALL
Developer User16795｜Date and time 24/1/17 16:32:41
Build time 29.016 sec｜Game capacity 4.264KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-size: 48px;
    }
    .board {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      width: 200px;
      height: 200px;
    }
    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: lightgray;
      cursor: pointer;
    }
    #message {
      margin-top: 20px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="board" class="board">
    <div class="cell" onclick="makeMove(0, 0)"></div>
    <div class="cell" onclick="makeMove(0, 1)"></div>
    <div class="cell" onclick="makeMove(0, 2)"></div>
    <div class="cell" onclick="makeMove(1, 0)"></div>
    <div class="cell" onclick="makeMove(1, 1)"></div>
    <div class="cell" onclick="makeMove(1, 2)"></div>
    <div class="cell" onclick="makeMove(2, 0)"></div>
    <div class="cell" onclick="makeMove(2, 1)"></div>
    <div class="cell" onclick="makeMove(2, 2)"></div>
  </div>
  <div id="message"></div>
  <button onclick="resetGame()">リセット</button>

// 現在のプレイヤー（◯: player, ✕: computer）
    let currentPlayer = 'player';

// 勝敗条件
    const winningConditions = [
      [{ row: 0, col: 0 }, { row: 0, col: 1 }, { row: 0, col: 2 }],
      [{ row: 1, col: 0 }, { row: 1, col: 1 }, { row: 1, col: 2 }],
      [{ row: 2, col: 0 }, { row: 2, col: 1 }, { row: 2, col: 2 }],
      [{ row: 0, col: 0 }, { row: 1, col: 0 }, { row: 2, col: 0 }],
      [{ row: 0, col: 1 }, { row: 1, col: 1 }, { row: 2, col: 1 }],
      [{ row: 0, col: 2 }, { row: 1, col: 2 }, { row: 2, col: 2 }],
      [{ row: 0, col: 0 }, { row: 1, col: 1 }, { row: 2, col: 2 }],
      [{ row: 0, col: 2 }, { row: 1, col: 1 }, { row: 2, col: 0 }]
    ];

// ゲームの状態を初期化する
    function resetGame() {
      boardState = [
        ['', '', ''],
        ['', '', ''],
        ['', '', '']
      ];
      currentPlayer = 'player';
      renderBoard();
      setMessage('');
    }

// マス目をクリックした時の処理
    function makeMove(row, col) {
      if (boardState[row][col] === '') {
        if (currentPlayer === 'player') {
          boardState[row][col] = '◯';
          currentPlayer = 'computer';
          renderBoard();
          checkWinner('◯');
        }
        setTimeout(makeComputerMove, 500);
      }
    }

// コンピュータの手をランダムに選択する
    function makeComputerMove() {
      let emptyCells = [];
      for (let row = 0; row < 3; row++) {
        for (let col = 0; col < 3; col++) {
          if (boardState[row][col] === '') {
            emptyCells.push({ row, col });
          }
        }
      }
      const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
      boardState[randomCell.row][randomCell.col] = '✕';
      currentPlayer = 'player';
      renderBoard();
      checkWinner('✕');
    }

// 勝敗を確認する
    function checkWinner(player) {
      for (let condition of winningConditions) {
        let [cell1, cell2, cell3] = condition;
        if (
          boardState[cell1.row][cell1.col] === player &&
          boardState[cell2.row][cell2.col] === player &&
          boardState[cell3.row][cell3.col] === player
        ) {
          setMessage(player + 'の勝ち！');
          return;
        }
      }
      if (!boardState.flat().includes('')) {
        setMessage('引き分け！');
      }
    }

// メッセージを表示する
    function setMessage(message) {
      document.getElementById('message').textContent = message;
    }

// マス目の状態を描画する
    function renderBoard() {
      const cells = document.querySelectorAll('.cell');
      for (let row = 0; row < 3; row++) {
        for (let col = 0; col < 3; col++) {
          const cellIndex = row * 3 + col;
          cells[cellIndex].textContent = boardState[row][col];
        }
      }
    }

renderBoard();
  </script>
</body>
</html>