AI game creator

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

No:25410

←

Prev Next

→

Merge Game
Developer User12424｜Date and time 23/11/21 11:24:02
Build time 167.544 sec｜Game capacity 5.837KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
  <style>
    body {
      text-align: center;
    }
    #board {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      border: 2px solid black;
      width: 320px;
      height: 320px;
      margin: 20px auto;
    }
    .cell {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
    }
  </style>
</head>
<body>
  <div id="board"></div>

// Create the game board
    function createBoard() {
      const boardElement = document.getElementById("board");
      for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          const cell = document.createElement("div");
          cell.className = "cell";
          boardElement.appendChild(cell);
          board.push({
            element: cell,
            value: 0
          });
        }
      }
    }

// Start the game
    function startGame() {
      createBoard();
      addNewTile();
      addNewTile();
      updateBoard();
    }

// Add a new tile (2 or 4) to a random empty cell
    function addNewTile() {
      const emptyCells = board.filter(cell => cell.value === 0);
      if (emptyCells.length > 0) {
        const randomIndex = Math.floor(Math.random() * emptyCells.length);
        const randomCell = emptyCells[randomIndex];
        randomCell.value = Math.random() < 0.9 ? 2 : 4;
      }
    }

// Update the game board
    function updateBoard() {
      for (let i = 0; i < board.length; i++) {
        const cell = board[i];
        cell.element.innerHTML = cell.value === 0 ? "" : cell.value;
        cell.element.style.background = getCellBackgroundColor(cell.value);
      }
    }

// Get cell background color based on the cell value
    function getCellBackgroundColor(value) {
      switch (value) {
        case 2: return "#eee4da";
        case 4: return "#ede0c8";
        case 8: return "#f2b179";
        case 16: return "#f59563";
        case 32: return "#f67c5f";
        case 64: return "#f65e3b";
        case 128: return "#edcf72";
        case 256: return "#edcc61";
        case 512: return "#edc850";
        case 1024: return "#edc53f";
        case 2048: return "#edc22e";
        default: return "#cdc1b5";
      }
    }

// Merge tiles on a specific row or column
    function mergeTiles(cells) {
      let merged = false;

for (let i = 0; i < cells.length - 1; i++) {
        const currentCell = cells[i];
        const nextCell = cells[i + 1];

if (currentCell.value === nextCell.value) {
          currentCell.value *= 2;
          nextCell.value = 0;
          score += currentCell.value;
          merged = true;
        }
      }

return merged;
    }

// Move the tiles to the left
    function moveLeft() {
      let moves = false;

for (let i = 0; i < boardSize; i++) {
        const row = board.slice(i * boardSize, (i * boardSize) + boardSize);
        const merged = mergeTiles(row);
        const movedRow = row.filter(cell => cell.value !== 0);
        const emptyCellsCount = boardSize - movedRow.length;
        const newRow = movedRow.concat(Array(emptyCellsCount).fill({ value: 0 }));

board.splice(i * boardSize, boardSize, ...newRow);
        moves = moves || merged || emptyCellsCount;
      }

return moves;
    }

// Move the tiles to the right
    function moveRight() {
      reverseBoard();
      const moves = moveLeft();
      reverseBoard();

return moves;
    }

// Move the tiles up
    function moveUp() {
      transposeBoard();
      const moves = moveLeft();
      transposeBoard();

return moves;
    }

// Move the tiles down
    function moveDown() {
      transposeBoard();
      const moves = moveRight();
      transposeBoard();

return moves;
    }

// Reverse the board
    function reverseBoard() {
      board.reverse();
    }

// Transpose the board
    function transposeBoard() {
      const newBoard = [];
      for (let i = 0; i < boardSize; i++) {
        for (let j = i; j < boardSize * boardSize; j += boardSize) {
          newBoard.push(board[j]);
        }
      }
      board = newBoard;
    }

// Check if the game is over
    function isGameOver() {
      if (board.length === board.filter(cell => cell.value === 0).length) {
        return false;
      }

for (let i = 0; i < board.length; i++) {
        const cell = board[i];

if (
          (i % boardSize !== boardSize - 1 && cell.value === board[i + 1].value) ||
          (i < board.length - boardSize && cell.value === board[i + boardSize].value)
        ) {
          return false;
        }
      }

return true;
    }

// Show game over message
    function showGameOver() {
      alert(`Game Over!\nFinal Score: ${score}`);
    }

// Handle key presses for smartphone operation
    function handleKeyPress(event) {
      let moves = false;

switch (event.key) {
        case "ArrowUp":
          moves = moveUp();
          break;
        case "ArrowDown":
          moves = moveDown();
          break;
        case "ArrowLeft":
          moves = moveLeft();
          break;
        case "ArrowRight":
          moves = moveRight();
          break;
      }

if (moves) {
        addNewTile();
        updateBoard();

if (isGameOver()) {
          showGameOver();
        }
      }
    }

// Start the game on page load
    startGame();

// Add event listener for key presses
    window.addEventListener("keydown", handleKeyPress);
  </script>
</body>
</html>