AI game creator

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

No:9351

103

←

Prev Next

→

battlefield
Developer User4326｜Date and time 23/7/23 21:39:07
Build time 35.773 sec｜Game capacity 3.55KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Battlefield Game</title>
    <style>
      /* Add your CSS styles here */
      #battlefield {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

.cell {
        width: 100px;
        height: 100px;
        margin: 5px;
        background-color: lightgray;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
      }

.player-a {
        background-color: #FF8C00; /* orange */
      }

.player-b {
        background-color: #00BFFF; /* deepskyblue */
      }

.result {
        text-align: center;
        font-size: 24px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
  
  <div id="battlefield"></div>
  <div id="result" class="result"></div>

const cells = [];
    let currentPlayer = 'A';
    let gameActive = true;

const createCell = () => {
      const cell = document.createElement('div');
      cell.classList.add('cell');
      return cell;
    };

const handleCellClick = (event) => {
      const selectedCell = event.target;
      
      if (selectedCell.textContent === '' && gameActive) {
        selectedCell.textContent = currentPlayer;

if (currentPlayer === 'A') {
          selectedCell.classList.add('player-a');
        } else if (currentPlayer === 'B') {
          selectedCell.classList.add('player-b');
        }

checkGameResult();
        currentPlayer = currentPlayer === 'A' ? 'B' : 'A';
      }
    };

const checkGameResult = () => {
      const board = [];
      for (let i = 0; i < 3; i++) {
        board.push([]);
        for (let j = 0; j < 3; j++) {
          const cell = cells[i * 3 + j];
          board[i].push(cell.textContent);
        }
      }

// Check rows
      for (let i = 0; i < 3; i++) {
        if (board[i][0] !== '' && board[i][0] === board[i][1] && board[i][0] === board[i][2]) {
          displayResult(board[i][0]);
          return;
        }
      }

// Check columns
      for (let i = 0; i < 3; i++) {
        if (board[0][i] !== '' && board[0][i] === board[1][i] && board[0][i] === board[2][i]) {
          displayResult(board[0][i]);
          return;
        }
      }

// Check diagonals
      if (
        (board[0][0] !== '' && board[0][0] === board[1][1] && board[0][0] === board[2][2]) ||
        (board[0][2] !== '' && board[0][2] === board[1][1] && board[0][2] === board[2][0])
      ) {
        displayResult(board[1][1]);
        return;
      }

// Check for draw
      let isDraw = true;
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
          if (board[i][j] === '') {
            isDraw = false;
            break;
          }
        }
      }

if (isDraw) {
        displayResult('Draw');
      }
    };

const displayResult = (winner) => {
      gameActive = false;
      result.textContent = winner === 'Draw' ? 'تعادل' : 'لاعب ' + winner + ' فاز!';
    };

const initializeGame = () => {
      for (let i = 0; i < 9; i++) {
        const cell = createCell();
        cells.push(cell);
        battlefield.appendChild(cell);
      }

battlefield.addEventListener('click', handleCellClick);
    };

initializeGame();

</script>
  </body>
</html>