2048's game | AI game creator

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

No:13838

121

2048
Developer User6030｜Date and time 23/8/30 4:26:01
Build time 37.025 sec｜Game capacity 6.035KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>2048</title>
  <style>
    body {
      font-family: "Arial", sans-serif;
      margin: 0;
      padding: 0;
      background-color: #faf8ef;
    }

#game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

#game-board {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 400px;
      height: 400px;
      border-radius: 10px;
      background-color: #bbada0;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.cell {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      font-weight: bold;
      color: #776e65;
      background-color: #cdc1b4;
      border-radius: 5px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="game-board"></div>
  </div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
      const boardSize = 4;
      let board = [];
      let score = 0;

function initializeBoard() {
        board = new Array(boardSize)
          .fill(null)
          .map(() => new Array(boardSize).fill(null));
        score = 0;
      }

function getRandomCell() {
        const availableCells = [];
        for (let row = 0; row < boardSize; row++) {
          for (let col = 0; col < boardSize; col++) {
            if (board[row][col] === null) {
              availableCells.push({ row, col });
            }
          }
        }
        if (availableCells.length > 0) {
          const randomIndex = Math.floor(Math.random() * availableCells.length);
          return availableCells[randomIndex];
        }
        return null;
      }

function addRandomCellValue() {
        const randomCell = getRandomCell();
        if (randomCell) {
          const { row, col } = randomCell;
          board[row][col] = Math.random() < 0.9 ? 2 : 4;
        }
      }

function isGameOver() {
        for (let row = 0; row < boardSize; row++) {
          for (let col = 0; col < boardSize; col++) {
            if (board[row][col] === null) {
              return false;
            }
            if (row > 0 && board[row][col] === board[row - 1][col]) {
              return false;
            }
            if (row < boardSize - 1 && board[row][col] === board[row + 1][col]) {
              return false;
            }
            if (col > 0 && board[row][col] === board[row][col - 1]) {
              return false;
            }
            if (col < boardSize - 1 && board[row][col] === board[row][col + 1]) {
              return false;
            }
          }
        }
        return true;
      }

function updateBoardView() {
        const gameBoard = document.getElementById('game-board');
        gameBoard.innerHTML = '';
        for (let row = 0; row < boardSize; row++) {
          for (let col = 0; col < boardSize; col++) {
            const cellValue = board[row][col] ? board[row][col] : '';
            const cell = document.createElement('div');
            cell.className = 'cell';
            cell.textContent = cellValue;
            gameBoard.appendChild(cell);
          }
        }
      }

function handleMerge(direction, merged) {
        for (let row = 0; row < boardSize; row++) {
          for (let col = 0; col < boardSize - 1; col++) {
            if (board[row][col] === board[row][col + 1] && board[row][col] !== null) {
              board[row][col] *= 2;
              board[row][col + 1] = null;
              merged.push(`${row}${col}`);
              score += board[row][col];
            }
          }
        }
        if (merged.length > 0) {
          handleMerge(direction, merged);
        } else {
          if (direction === 'right' || direction === 'down') {
            board = rotateBoard(board, 'counterClockwise');
          } else {
            board = rotateBoard(board, 'clockwise');
          }
          addRandomCellValue();
          updateBoardView();
        }
      }

function handleMove(direction) {
        let merged = [];
        if (direction === 'right' || direction === 'down') {
          board = rotateBoard(board, 'clockwise');
        } else {
          board = rotateBoard(board, 'counterClockwise');
        }
        for (let row = 0; row < boardSize; row++) {
          for (let col = boardSize - 1; col >= 0; col--) {
            const cellValue = board[row][col];
            if (cellValue !== null) {
              let nextCol = col;
              while (nextCol < boardSize - 1 && board[row][nextCol + 1] === null) {
                board[row][nextCol + 1] = cellValue;
                board[row][nextCol] = null;
                nextCol++;
              }
            }
          }
        }
        handleMerge(direction, merged);
      }

function rotateBoard(board, direction) {
        const rotatedBoard = [];

for (let col = 0; col < boardSize; col++) {
          rotatedBoard[col] = [];
          for (let row = 0; row < boardSize; row++) {
            if (direction === 'clockwise') {
              rotatedBoard[col][row] = board[boardSize - row - 1][col];
            } else if (direction === 'counterClockwise') {
              rotatedBoard[col][row] = board[row][boardSize - col - 1];
            }
          }
        }

return rotatedBoard;
      }

function handleKeyDown(event) {
        if (event.key === 'ArrowUp') {
          handleMove('up');
        } else if (event.key === 'ArrowDown') {
          handleMove('down');
        } else if (event.key === 'ArrowLeft') {
          handleMove('left');
        } else if (event.key === 'ArrowRight') {
          handleMove('right');
        }
        if (isGameOver()) {
          alert('Game Over!');
        }
      }

initializeBoard();
      addRandomCellValue();
      addRandomCellValue();
      updateBoardView();
      document.addEventListener('keydown', handleKeyDown);
    });
  </script>
</body>
</html>