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

No:41699

←

Prev Next

→

Merge Game
Developer User18697｜Date and time 24/2/9 12:21:34
Build time 21.998 sec｜Game capacity 6.275KB｜

Script

Sure! Here's an example of a simple merge game implemented as a single HTML file with JavaScript. The game mechanics are similar to the popular game "2048". You can play it on a smartphone and use pictograms as game tiles. Just copy the code below and save it as an HTML file to play the game.

Merge Game

This implementation allows you to play the game on your smartphone by swiping the screen in the desired direction. However, note that swiping functionality is not directly provided in this code snippet. You would need to add touch event listeners and handle swipe gestures to trigger the appropriate mergeTile functions in each direction.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
    }
    .cell {
      width: 80px;
      height: 80px;
      background-color: #eee;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Merge Game</h1>
  <div id="board"></div>
  <script>
    // Game configuration
    const boardSize = 4;
    const winningTile = 2048;

// Board state
    let board = [];
    let score = 0;

// Initialize the game
    function init() {
      for (let i = 0; i < boardSize; i++) {
        board[i] = [];
        for (let j = 0; j < boardSize; j++) {
          board[i][j] = 0;
        }
      }
      generateTile();
      generateTile();
      drawBoard();
    }

// Generate a new tile on the board
    function generateTile() {
      const emptyCells = [];
      for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          if (board[i][j] === 0) {
            emptyCells.push({ x: i, y: j });
          }
        }
      }
      if (emptyCells.length > 0) {
        const { x, y } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
        board[x][y] = Math.random() < 0.9 ? 2 : 4;
      }
    }

// Draw the game board
    function drawBoard() {
      const boardElement = document.getElementById('board');
      boardElement.innerHTML = '';
      for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          if (board[i][j] !== 0) {
            cell.textContent = board[i][j];
          }
          boardElement.appendChild(cell);
        }
      }
    }

// Check if the game is over (no empty cells and no possible merge)
    function isGameOver() {
      for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          if (board[i][j] === 0) {
            return false;
          }
          if (j < boardSize - 1 && board[i][j] === board[i][j + 1]) {
            return false;
          }
          if (i < boardSize - 1 && board[i][j] === board[i + 1][j]) {
            return false;
          }
        }
      }
      return true;
    }

// Merge the tiles in a given direction
    function mergeTiles(direction) {
      let moved = false;
      let merged = false;

for (let i = 0; i < boardSize; i++) {
        let row = board[i].filter(() => true);

if (direction === 'left') {
          row = mergeRow(row);
          moved = moved || !arraysEqual(board[i], row);
          board[i] = row;
        } else if (direction === 'right') {
          row.reverse();
          row = mergeRow(row);
          row.reverse();
          moved = moved || !arraysEqual(board[i], row);
          board[i] = row;
        } else if (direction === 'up') {
          const col = getColumn(i);
          col.reverse();
          col = mergeRow(col);
          col.reverse();
          moved = moved || !arraysEqual(getColumn(i), col);
          setColumn(i, col);
        } else if (direction === 'down') {
          const col = getColumn(i);
          col = mergeRow(col);
          moved = moved || !arraysEqual(getColumn(i), col);
          setColumn(i, col);
        }

if (direction === 'left' || direction === 'right') {
          for (let j = 0; j < boardSize; j++) {
            if (j < row.length) {
              board[i][j] = row[j];
            } else {
              board[i][j] = 0;
            }
          }
        }
      }

if (moved) {
        generateTile();
        drawBoard();
      }

if (isGameOver()) {
        alert('Game over! Your score: ' + score);
      }
    }

// Helper function to merge a row or column
    function mergeRow(row) {
      let result = [];
      let skip = false;

for (let i = 0; i < boardSize; i++) {
        if (skip) {
          skip = false;
          continue;
        }

if (i < row.length - 1 && row[i] === row[i + 1]) {
          const mergedValue = row[i] * 2;
          result.push(mergedValue);
          score += mergedValue;
          skip = true;
        } else {
          result.push(row[i]);
        }
      }

while (result.length < boardSize) {
        result.push(0);
      }

return result;
    }

// Helper function to check if two arrays are equal
    function arraysEqual(arr1, arr2) {
      if (arr1.length !== arr2.length) {
        return false;
      }
      for (let i = 0; i < arr1.length; i++) {
        if (arr1[i] !== arr2[i]) {
          return false;
        }
      }
      return true;
    }

// Helper function to get a column from the board
    function getColumn(index) {
      const column = [];
      for (let i = 0; i < boardSize; i++) {
        column.push(board[i][index]);
      }
      return column;
    }

// Helper function to set a column in the board
    function setColumn(index, column) {
      for (let i = 0; i < boardSize; i++) {
        board[i][index] = column[i];
      }
    }

// Event listeners for arrow key presses
    document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowLeft') {
        mergeTiles('left');
      } else if (event.key === 'ArrowRight') {
        mergeTiles('right');
      } else if (event.key === 'ArrowUp') {
        mergeTiles('up');
      } else if (event.key === 'ArrowDown') {
        mergeTiles('down');
      }
    });

// Start the game
    init();
  </script>
</body>
</html>
```