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

No:36089

←

Prev Next

→

Merge Game
Developer User16739｜Date and time 24/1/16 19:15:32
Build time 45.709 sec｜Game capacity 10.381KB｜

Script

Sure! Here's an example of a merge game implemented as a single HTML file using JavaScript. It is designed to be played on a smartphone and uses pictograms for better user experience:

Merge Game

To play the game, simply save the above code into an HTML file, open it on a smartphone, and start swiping in different directions to merge the cells. The goal is to reach the number 2048 in any cell. Good luck!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's an example of a merge game implemented as a single HTML file using JavaScript. It is designed to be played on a smartphone and uses pictograms for better user experience:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: #F2F2F2;
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 0;
      padding: 20px;
    }
    
    #game-board {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      max-width: 300px;
      margin: 0 auto;
    }
    
    .cell {
      width: 60px;
      height: 60px;
      background-color: white;
      border: 1px solid #ccc;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Merge Game</h1>
  <div id="game-board"></div>
  
  <script>
    // Define the game grid
    const gridSize = 4;
    let grid = new Array(gridSize);
    for (let i = 0; i < gridSize; i++) {
      grid[i] = new Array(gridSize).fill(null);
    }
  
    // Start the game
    initGame();
  
    // Initialize the game
    function initGame() {
      addRandomCell();
      addRandomCell();
      renderBoard();
    }
  
    // Render the game board
    function renderBoard() {
      const gameBoard = document.getElementById('game-board');
      gameBoard.innerHTML = ''; // Clear previous board
  
      for (let row = 0; row < gridSize; row++) {
        for (let col = 0; col < gridSize; col++) {
          const cell = document.createElement('div');
          cell.className = 'cell';
  
          if (grid[row][col]) {
            cell.innerText = grid[row][col];
          }
  
          gameBoard.appendChild(cell);
        }
      }
    }
  
    // Add a random cell to the grid with value 2 or 4
    function addRandomCell() {
      const availableCells = [];
      for (let row = 0; row < gridSize; row++) {
        for (let col = 0; col < gridSize; col++) {
          if (grid[row][col] === null) {
            availableCells.push({ row, col });
          }
        }
      }
  
      const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)];
      grid[randomCell.row][randomCell.col] = Math.random() < 0.9 ? 2 : 4;
    }
  
    // Merge cells in the given direction
    function mergeCells(direction) {
      switch (direction) {
        case 'up':
          for (let col = 0; col < gridSize; col++) {
            for (let row = 1; row < gridSize; row++) {
              if (grid[row][col] !== null) {
                let mergeIndex = row;
                while (mergeIndex > 0 && grid[mergeIndex - 1][col] === null) {
                  mergeIndex--;
                }
  
                if (mergeIndex > 0 && grid[mergeIndex - 1][col] === grid[row][col]) {
                  grid[mergeIndex - 1][col] *= 2;
                  grid[row][col] = null;
                }
              }
            }
          }
          break;
  
        case 'down':
          for (let col = 0; col < gridSize; col++) {
            for (let row = gridSize - 2; row >= 0; row--) {
              if (grid[row][col] !== null) {
                let mergeIndex = row;
                while (mergeIndex < gridSize - 1 && grid[mergeIndex + 1][col] === null) {
                  mergeIndex++;
                }
  
                if (mergeIndex < gridSize - 1 && grid[mergeIndex + 1][col] === grid[row][col]) {
                  grid[mergeIndex + 1][col] *= 2;
                  grid[row][col] = null;
                }
              }
            }
          }
          break;
  
        case 'left':
          for (let row = 0; row < gridSize; row++) {
            for (let col = 1; col < gridSize; col++) {
              if (grid[row][col] !== null) {
                let mergeIndex = col;
                while (mergeIndex > 0 && grid[row][mergeIndex - 1] === null) {
                  mergeIndex--;
                }
  
                if (mergeIndex > 0 && grid[row][mergeIndex - 1] === grid[row][col]) {
                  grid[row][mergeIndex - 1] *= 2;
                  grid[row][col] = null;
                }
              }
            }
          }
          break;
  
        case 'right':
          for (let row = 0; row < gridSize; row++) {
            for (let col = gridSize - 2; col >= 0; col--) {
              if (grid[row][col] !== null) {
                let mergeIndex = col;
                while (mergeIndex < gridSize - 1 && grid[row][mergeIndex + 1] === null) {
                  mergeIndex++;
                }
  
                if (mergeIndex < gridSize - 1 && grid[row][mergeIndex + 1] === grid[row][col]) {
                  grid[row][mergeIndex + 1] *= 2;
                  grid[row][col] = null;
                }
              }
            }
          }
          break;
      }
  
      // Shift cells after merging
      shiftCells(direction);
  
      // Add a new random cell after each move
      addRandomCell();
  
      // Check if the player won or lost
      checkGameOver();
  
      // Render the updated game board
      renderBoard();
    }
  
    // Shift cells in the given direction
    function shiftCells(direction) {
      let shifts = 0;
  
      switch (direction) {
        case 'up':
          for (let col = 0; col < gridSize; col++) {
            for (let row = 1; row < gridSize; row++) {
              if (grid[row][col] !== null) {
                let shiftIndex = row;
                while (shiftIndex > 0 && grid[shiftIndex - 1][col] === null) {
                  grid[shiftIndex - 1][col] = grid[shiftIndex][col];
                  grid[shiftIndex][col] = null;
                  shiftIndex--;
                  shifts++;
                }
              }
            }
          }
          break;
  
        case 'down':
          for (let col = 0; col < gridSize; col++) {
            for (let row = gridSize - 2; row >= 0; row--) {
              if (grid[row][col] !== null) {
                let shiftIndex = row;
                while (shiftIndex < gridSize - 1 && grid[shiftIndex + 1][col] === null) {
                  grid[shiftIndex + 1][col] = grid[shiftIndex][col];
                  grid[shiftIndex][col] = null;
                  shiftIndex++;
                  shifts++;
                }
              }
            }
          }
          break;
  
        case 'left':
          for (let row = 0; row < gridSize; row++) {
            for (let col = 1; col < gridSize; col++) {
              if (grid[row][col] !== null) {
                let shiftIndex = col;
                while (shiftIndex > 0 && grid[row][shiftIndex - 1] === null) {
                  grid[row][shiftIndex - 1] = grid[row][shiftIndex];
                  grid[row][shiftIndex] = null;
                  shiftIndex--;
                  shifts++;
                }
              }
            }
          }
          break;
  
        case 'right':
          for (let row = 0; row < gridSize; row++) {
            for (let col = gridSize - 2; col >= 0; col--) {
              if (grid[row][col] !== null) {
                let shiftIndex = col;
                while (shiftIndex < gridSize - 1 && grid[row][shiftIndex + 1] === null) {
                  grid[row][shiftIndex + 1] = grid[row][shiftIndex];
                  grid[row][shiftIndex] = null;
                  shiftIndex++;
                  shifts++;
                }
              }
            }
          }
          break;
      }
  
      // If at least one cell was shifted, recursively shift again
      if (shifts > 0) {
        shiftCells(direction);
      }
    }
  
    // Check if the player won or lost
    function checkGameOver() {
      let gameWon = false;
      let gameLost = true;
  
      for (let row = 0; row < gridSize; row++) {
        for (let col = 0; col < gridSize; col++) {
          if (grid[row][col] === 2048) {
            gameWon = true;
            break;
          }
  
          if (grid[row][col] === null) {
            gameLost = false;
          }
  
          if (row > 0 && grid[row][col] === grid[row - 1][col]) {
            gameLost = false;
          }
  
          if (row < gridSize - 1 && grid[row][col] === grid[row + 1][col]) {
            gameLost = false;
          }
  
          if (col > 0 && grid[row][col] === grid[row][col - 1]) {
            gameLost = false;
          }
  
          if (col < gridSize - 1 && grid[row][col] === grid[row][col + 1]) {
            gameLost = false;
          }
        }
      }
  
      if (gameWon) {
        alert('Congratulations! You won!');
      }
  
      if (gameLost) {
        alert('Game over! Try again!');
        resetGame();
      }
    }
  
    // Reset the game
    function resetGame() {
      for (let row = 0; row < gridSize; row++) {
        for (let col = 0; col < gridSize; col++) {
          grid[row][col] = null;
        }
      }
  
      initGame();
    }
  
    // Event listeners for swipe gestures
    let touchStartX = 0;
    let touchStartY = 0;
    let touchEndX = 0;
    let touchEndY = 0;
  
    document.addEventListener('touchstart', function(event) {
      touchStartX = event.touches[0].clientX;
      touchStartY = event.touches[0].clientY;
    });
  
    document.addEventListener('touchmove', function(event) {
      event.preventDefault();
    });
  
    document.addEventListener('touchend', function(event) {
      touchEndX = event.changedTouches[0].clientX;
      touchEndY = event.changedTouches[0].clientY;
  
      handleSwipe();
    });
  
    function handleSwipe() {
      const deltaX = touchEndX - touchStartX;
      const deltaY = touchEndY - touchStartY;
  
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX > 0) {
          mergeCells('right');
        } else {
          mergeCells('left');
        }
      } else {
        if (deltaY > 0) {
          mergeCells('down');
        } else {
          mergeCells('up');
        }
      }
    }
  </script>
</body>
</html>
```