AI game creator

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

No:36370

←

Prev Next

→

オセロ
Developer User16799｜Date and time 24/1/17 15:59:52
Build time 43.435 sec｜Game capacity 8.173KB｜

Script

了解です。以下にオセロのゲームを実装したHTMLファイルを示します。

このゲームでは、プレイヤーは白（'⚪'）の石を操作し、コンピュータ（AI）は黒（'⚫'）の石を操作します。プレイヤーとAIが交互に石を置き、石を挟んだ相手の石を自分の石に変えることができます。ゲーム終了時に、石の数が多い方が勝利となります。このゲームは、スマートフォンの操作を前提としており、タップで石を操作することができます。以上が、オセロのゲームを実装したHTMLファイルです。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解です。以下にオセロのゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .board {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      width: 320px;
      height: 320px;
    }

.cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      background-color: #ccc;
      border: 1px solid #999;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="board">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const board = document.querySelector('.board');
      const cells = Array.from(document.querySelectorAll('.cell'));
      const player='⚪';
      const ai='⚫';

const rows = [
        [0, 1, 2, 3, 4, 5, 6, 7],
        [8, 9, 10, 11, 12, 13, 14, 15],
        [16, 17, 18, 19, 20, 21, 22, 23],
        [24, 25, 26, 27, 28, 29, 30, 31],
        [32, 33, 34, 35, 36, 37, 38, 39],
        [40, 41, 42, 43, 44, 45, 46, 47],
        [48, 49, 50, 51, 52, 53, 54, 55],
        [56, 57, 58, 59, 60, 61, 62, 63]
      ];

const cellsFilled = new Array(64).fill(false);

function evaluateBoard(board, player) {
        let score = 0;
        for (let row of rows) {
          let playerCount = row.filter((cell) => board[cell] === player).length;
          let opponentCount = row.filter((cell) => board[cell] === getOpponent(player)).length;
          score += playerCount - opponentCount;
        }
        return score;
      }

function getOpponent(player) {
        return player === '⚪' ? '⚫' : '⚪';
      }

function minimax(board, depth, alpha, beta, maximizingPlayer) {
        let validMoves = getValidMoves(board, maximizingPlayer ? player : ai);
        if (depth === 0 || validMoves.length === 0) {
          return evaluateBoard(board, player);
        }

if (maximizingPlayer) {
          let maxEval = Number.NEGATIVE_INFINITY;
          for (let move of validMoves) {
            let boardCopy = [...board];
            let flips = findFlips(boardCopy, move, player);
            let eval = minimax(boardCopy, depth - 1, alpha, beta, false);
            maxEval = Math.max(maxEval, eval);
            alpha = Math.max(alpha, eval);
            if (alpha >= beta) {
              break;
            }
          }
          return maxEval;
        } else {
          let minEval = Number.POSITIVE_INFINITY;
          let bestMove;
          for (let move of validMoves) {
            let boardCopy = [...board];
            let flips = findFlips(boardCopy, move, ai);
            let eval = minimax(boardCopy, depth - 1, alpha, beta, true);
            minEval = Math.min(minEval, eval);
            beta = Math.min(beta, eval);
            if (alpha >= beta) {
              break;
            } else if (eval === minEval) {
              bestMove = move;
            }
          }
          return bestMove;
        }
      }

function executeMove(move) {
        makeMove(move, player);
        let aiMove = minimax(cellsFilled, 5, Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY, false);
        makeMove(aiMove, ai);
      }

cells.forEach((cell, index) => {
        cell.addEventListener('click', function() {
          if (!cellsFilled[index]) {
            makeMove(index, player);
            let validMoves = getValidMoves(cellsFilled, ai);
            if (validMoves.length > 0) {
              executeMove(index);
            } else {
              let playerCount = cellsFilled.filter((cell) => cell === player).length;
              let aiCount = cellsFilled.filter((cell) => cell === ai).length;
              if (playerCount > aiCount) {
                alert('You win!');
              } else if (aiCount > playerCount) {
                alert('You lose!');
              } else {
                alert('It\'s a draw!');
              }
            }
          }
        });
      });
    });
  </script>
</body>
</html>
```

このゲームでは、プレイヤーは白（'⚪'）の石を操作し、コンピュータ（AI）は黒（'⚫'）の石を操作します。プレイヤーとAIが交互に石を置き、石を挟んだ相手の石を自分の石に変えることができます。ゲーム終了時に、石の数が多い方が勝利となります。

このゲームは、スマートフォンの操作を前提としており、タップで石を操作することができます。

以上が、オセロのゲームを実装したHTMLファイルです。