AI game creator

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

No:555

396

←

Prev Next

→

4x4 Reversi
Developer User3025｜Date and time 23/6/15 19:12:22
Build time 83.949 sec｜Game capacity 6.876KB｜

Script

黒のターンです。

このアプリは1枚のhtmlファイルで実装された4x4のリバーシゲームです。スマホでの操作を前提に、絵文字が多用されています。プレイヤーは黒と白の2人で、自分のマークをできるだけ多く盤面に配置することを目指します。アプリでのマークの表記は「○」が白、「●」が黒です。最終的に盤面における自分のマークが多い方が勝利となります。画面下部には現在のターン表示があります。また、ゲーム終了後には勝敗が表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>4x4 リバーシ</title>
    <style>
      .cell {
        width: 50px;
        height: 50px;
        font-size: 40px;
        text-align: center;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td class="cell" id="cell_0_0"></td>
          <td class="cell" id="cell_0_1"></td>
          <td class="cell" id="cell_0_2"></td>
          <td class="cell" id="cell_0_3"></td>
        </tr>
        <tr>
          <td class="cell" id="cell_1_0"></td>
          <td class="cell" id="cell_1_1"></td>
          <td class="cell" id="cell_1_2"></td>
          <td class="cell" id="cell_1_3"></td>
        </tr>
        <tr>
          <td class="cell" id="cell_2_0"></td>
          <td class="cell" id="cell_2_1"></td>
          <td class="cell" id="cell_2_2"></td>
          <td class="cell" id="cell_2_3"></td>
        </tr>
        <tr>
          <td class="cell" id="cell_3_0"></td>
          <td class="cell" id="cell_3_1"></td>
          <td class="cell" id="cell_3_2"></td>
          <td class="cell" id="cell_3_3"></td>
        </tr>
      </tbody>
    </table>

<p>黒のターンです。</p>

function handleClick(event) {
        if (gameOver) {
          return;
        }

let cellCoords = event.target.id.split("_").slice(1, 3).map(coord => parseInt(coord));
        let row = cellCoords[0];
        let col = cellCoords[1];

if (board[row][col] != 0) {
          return;
        }

let adjacentOpponents = [];
        let rowBounds = [Math.max(0, row - 1), Math.min(3, row + 1)];
        let colBounds = [Math.max(0, col - 1), Math.min(3, col + 1)];

for (let i = rowBounds[0]; i <= rowBounds[1]; i++) {
          for (let j = colBounds[0]; j <= colBounds[1]; j++) {
            if (board[i][j] == -turn) {
              adjacentOpponents.push([i, j]);
            }
          }
        }

if (adjacentOpponents.length == 0) {
          return;
        }

for (let i = 0; i < adjacentOpponents.length; i++) {
          let opponentCoords = adjacentOpponents[i];
          let rowDiff = row - opponentCoords[0];
          let colDiff = col - opponentCoords[1];
          let newRow = row + rowDiff;
          let newCol = col + colDiff;

while (newRow >= 0 && newRow <= 3 && newCol >= 0 && newCol <= 3 && board[newRow][newCol] == -turn) {
            newRow += rowDiff;
            newCol += colDiff;
          }

if (newRow < 0 || newRow > 3 || newCol < 0 || newCol > 3 || board[newRow][newCol] != turn) {
            continue;
          }

let piecesToFlip = [[row, col]];
          newRow = row + rowDiff;
          newCol = col + colDiff;

while (newRow != opponentCoords[0] || newCol != opponentCoords[1]) {
            piecesToFlip.push([newRow, newCol]);
            newRow += rowDiff;
            newCol += colDiff;
          }

for (let i = 0; i < piecesToFlip.length; i++) {
            let pieceCoords = piecesToFlip[i];
            board[pieceCoords[0]][pieceCoords[1]] = turn;
          }
        }

board[row][col] = turn;
        updateBoard();

let validMoves = 0;

for (let i = 0; i < 4; i++) {
          for (let j = 0; j < 4; j++) {
            if (board[i][j] == 0) {
              let rowBounds = [Math.max(0, i - 1), Math.min(3, i + 1)];
              let colBounds = [Math.max(0, j - 1), Math.min(3, j + 1)];

for (let k = rowBounds[0]; k <= rowBounds[1]; k++) {
                for (let l = colBounds[0]; l <= colBounds[1]; l++) {
                  if (board[k][l] == -turn) {
                    validMoves++;
                  }
                }
              }
            }
          }
        }

if (validMoves == 0) {
          turn = -turn;
          validMoves = 0;

for (let i = 0; i < 4; i++) {
            for (let j = 0; j < 4; j++) {
              if (board[i][j] == 0) {
                let rowBounds = [Math.max(0, i - 1), Math.min(3, i + 1)];
                let colBounds = [Math.max(0, j - 1), Math.min(3, j + 1)];

for (let k = rowBounds[0]; k <= rowBounds[1]; k++) {
                  for (let l = colBounds[0]; l <= colBounds[1]; l++) {
                    if (board[k][l] == -turn) {
                      validMoves++;
                    }
                  }
                }
              }
            }
          }

if (validMoves == 0) {
            gameOver = true;
            let blackCount = 0;
            let whiteCount = 0;

for (let i = 0; i < 4; i++) {
              for (let j = 0; j < 4; j++) {
                if (board[i][j] == -1) {
                  blackCount++;
                } else if (board[i][j] == 1) {
                  whiteCount++;
                }
              }
            }

let message = "";

if (blackCount > whiteCount) {
              message = "黒の勝利！";
            } else if (whiteCount > blackCount) {
              message = "白の勝利！";
            } else {
              message = "引き分け！";
            }

document.getElementsByTagName("p")[0].innerHTML = message;
          } else {
            document.getElementsByTagName("p")[0].innerHTML = pieces[-turn.toString()] + "のターンです。";
          }
        } else {
          turn = -turn;
          document.getElementsByTagName("p")[0].innerHTML = pieces[-turn.toString()] + "のターンです。";
        }
      }

let cells = document.getElementsByClassName("cell");

for (let i = 0; i < cells.length; i++) {
        cells[i].addEventListener("click", handleClick);
      }

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