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

No:34837

←

Prev Next

→

Merge Game
Developer User16337｜Date and time 24/1/11 21:12:34
Build time 34.039 sec｜Game capacity 5.299KB｜

Script

Merge Game

←

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>
</head>
<body>
  <script>
    // Initialize the game board
    var board = [
      [null, null, null, null],
      [null, null, null, null],
      [null, null, null, null],
      [null, null, null, null]
    ];
    
    // Generate a new tile on the board
    function generateNewTile() {
      var emptyTiles = [];
      for (var i = 0; i < board.length; i++) {
        for (var j = 0; j < board[i].length; j++) {
          if (board[i][j] === null) {
            emptyTiles.push({ row: i, col: j });
          }
        }
      }
      
      if (emptyTiles.length === 0) {
        return; // No empty tiles available, game over
      }
      
      // Randomly select an empty tile and place a value of 2 or 4
      var randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
      board[randomTile.row][randomTile.col] = Math.random() < 0.9 ? 2 : 4;
    }
    
    // Merge two tiles with the same value
    function mergeTiles(tile1, tile2) {
      var merged = tile1 + tile2;
      if (merged === 2048) {
        alert("Congratulations! You won!");
      }
      return merged;
    }
    
    // Move the tiles to the left
    function moveLeft() {
      var moved = false;
      for (var i = 0; i < board.length; i++) {
        for (var j = 0; j < board[i].length - 1; j++) {
          if (board[i][j] !== null && board[i][j + 1] === null) {
            board[i][j + 1] = board[i][j];
            board[i][j] = null;
            moved = true;
          } else if (board[i][j] !== null && board[i][j] === board[i][j + 1]) {
            board[i][j] = mergeTiles(board[i][j], board[i][j + 1]);
            board[i][j + 1] = null;
            moved = true;
          }
        }
      }
      return moved;
    }
    
    // Move the tiles to the right
    function moveRight() {
      var moved = false;
      for (var i = 0; i < board.length; i++) {
        for (var j = board[i].length - 1; j > 0; j--) {
          if (board[i][j] !== null && board[i][j - 1] === null) {
            board[i][j - 1] = board[i][j];
            board[i][j] = null;
            moved = true;
          } else if (board[i][j] !== null && board[i][j] === board[i][j - 1]) {
            board[i][j] = mergeTiles(board[i][j], board[i][j - 1]);
            board[i][j - 1] = null;
            moved = true;
          }
        }
      }
      return moved;
    }
    
    // Move the tiles up
    function moveUp() {
      var moved = false;
      for (var i = 0; i < board[0].length; i++) {
        for (var j = 0; j < board.length - 1; j++) {
          if (board[j][i] !== null && board[j + 1][i] === null) {
            board[j + 1][i] = board[j][i];
            board[j][i] = null;
            moved = true;
          } else if (board[j][i] !== null && board[j][i] === board[j + 1][i]) {
            board[j][i] = mergeTiles(board[j][i], board[j + 1][i]);
            board[j + 1][i] = null;
            moved = true;
          }
        }
      }
      return moved;
    }
    
    // Move the tiles down
    function moveDown() {
      var moved = false;
      for (var i = 0; i < board[0].length; i++) {
        for (var j = board.length - 1; j > 0; j--) {
          if (board[j][i] !== null && board[j - 1][i] === null) {
            board[j - 1][i] = board[j][i];
            board[j][i] = null;
            moved = true;
          } else if (board[j][i] !== null && board[j][i] === board[j - 1][i]) {
            board[j][i] = mergeTiles(board[j][i], board[j - 1][i]);
            board[j - 1][i] = null;
            moved = true;
          }
        }
      }
      return moved;
    }
    
    // Render the game board
    function renderBoard() {
      var gameBoard = document.getElementById("gameBoard");
      gameBoard.innerHTML = ""; // Clear the existing board
      
      for (var i = 0; i < board.length; i++) {
        for (var j = 0; j < board[i].length; j++) {
          var tile = document.createElement("div");
          tile.className = "tile";
          tile.innerHTML = board[i][j] !== null ? board[i][j] : ""; // Display tile value or empty cell
          gameBoard.appendChild(tile);
        }
      }
    }
    
    function startGame() {
      generateNewTile();
      generateNewTile();
      renderBoard();
    }
    
    // Event listeners for keyboard controls
    window.addEventListener("keydown", function(event) {
      var moved = false;
      
      switch (event.key) {
        case "ArrowUp":
          moved = moveUp();
          break;
        case "ArrowDown":
          moved = moveDown();
          break;
        case "ArrowLeft":
          moved = moveLeft();
          break;
        case "ArrowRight":
          moved = moveRight();
          break;
        default:
          return; // Ignore other keys
      }
      
      if (moved) {
        generateNewTile();
        renderBoard();
      }
    });
  </script>
  
  <style>
    .tile {
      width: 100px;
      height: 100px;
      background-color: #eee;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      font-weight: bold;
    }
  </style>
  
  <h1>Merge Game</h1>
  <button onclick="startGame()">Start Game</button>
  
  <div id="gameBoard"></div>
</body>
</html>