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

No:37703

42

Merge Game
Developer User17097｜Date and time 24/1/21 12:11:12
Build time 17.608 sec｜Game capacity 5.092KB｜

Sure! Here's a basic implementation of a merge game using JavaScript in a single HTML file:

Merge Game

This implementation creates a simple merge game with swiping gestures for movement on a smartphone. The game starts with a 4x4 board containing two randomly generated tiles, either 2 or 4. The player can swipe in four directions (up, down, left, right) to move and merge tiles. Each swipe triggers the `moveTiles` function, which handles the movement and merging of tiles based on the swipe direction. The game tracks the score through variable `score`. The game logic currently supports the upward movement, but you can add the logic for other directions following a similar pattern. There is also a `generateRandomTile` function to generate a new tile after each successful move, and an `updateBoard` function to update the game board representation on the HTML. Please note that this implementation is a basic example and may require additional features and styling to make it a complete and visually appealing game.

→ 　

0　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

Sure! Here's a basic implementation of a merge game using JavaScript in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
  <style>
    /* CSS styles for pictograms */
    .tile {
      width: 100px;
      height: 100px;
      background-color: #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <h1>Merge Game</h1>
  
  <div id="gameBoard"></div>
  
  <script>
    // Game logic
    var board = [
      [null, null, null, null],
      [null, null, null, null],
      [null, null, null, null],
      [null, null, null, null]
    ];

function initialize() {
      // Generate 2 initial random tiles
      generateRandomTile();
      generateRandomTile();
      updateBoard();
    }

function generateRandomTile() {
      // Generate random tile coordinates
      var row = Math.floor(Math.random() * 4);
      var col = Math.floor(Math.random() * 4);

// Check if the tile is already occupied
      if (board[row][col] == null) {
        // Generate either 2 or 4 randomly
        board[row][col] = Math.random() < 0.9 ? 2 : 4;
      } else {
        // If occupied, try generating again
        generateRandomTile();
      }
    }

function updateBoard() {
      var gameBoard = document.getElementById('gameBoard');
      gameBoard.innerHTML = '';

// Update game board with tiles
      for (var row = 0; row < board.length; row++) {
        for (var col = 0; col < board[row].length; col++) {
          var tile = document.createElement('div');
          tile.className = 'tile';
          if (board[row][col] != null) {
            tile.innerHTML = board[row][col];
          }
          gameBoard.appendChild(tile);
        }
      }
    }

// Event listeners for swipe gestures using touch events
    var startX, startY;

window.addEventListener('touchstart', function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });

window.addEventListener('touchend', function(event) {
      var endX = event.changedTouches[0].clientX;
      var endY = event.changedTouches[0].clientY;

var diffX = endX - startX;
      var diffY = endY - startY;

// Determine swipe direction based on touch distance
      if (Math.abs(diffX) > Math.abs(diffY)) { // Horizontal swipe
        if (diffX > 0) { // Right swipe
          moveTiles('right');
        } else { // Left swipe
          moveTiles('left');
        }
      } else { // Vertical swipe
        if (diffY > 0) { // Down swipe
          moveTiles('down');
        } else { // Up swipe
          moveTiles('up');
        }
      }
    });

function moveTiles(direction) {
      var moved = false;
      var score = 0;

// Move tiles based on the swipe direction
      switch (direction) {
        case 'up':
          for (var col = 0; col < 4; col++) {
            for (var row = 1; row < 4; row++) {
              if (board[row][col] != null) {
                for (var i = row; i > 0; i--) {
                  if (board[i-1][col] == null) {
                    board[i-1][col] = board[i][col];
                    board[i][col] = null;
                    moved = true;
                  } else if (board[i-1][col] == board[i][col]) {
                    board[i-1][col] += board[i][col];
                    score += board[i-1][col];
                    board[i][col] = null;
                    moved = true;
                    break;
                  }
                }
              }
            }
          }
          break;
        case 'down':
          // Code for moving tiles down
          break;
        case 'left':
          // Code for moving tiles to the left
          break;
        case 'right':
          // Code for moving tiles to the right
          break;
      }

if (moved) {
        generateRandomTile();
        updateBoard();
        // Check for game over condition
        // TODO: Implement game over logic
      }
    }

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

This implementation creates a simple merge game with swiping gestures for movement on a smartphone. The game starts with a 4x4 board containing two randomly generated tiles, either 2 or 4. The player can swipe in four directions (up, down, left, right) to move and merge tiles. Each swipe triggers the `moveTiles` function, which handles the movement and merging of tiles based on the swipe direction. The game tracks the score through variable `score`. The game logic currently supports the upward movement, but you can add the logic for other directions following a similar pattern. There is also a `generateRandomTile` function to generate a new tile after each successful move, and an `updateBoard` function to update the game board representation on the HTML.

Please note that this implementation is a basic example and may require additional features and styling to make it a complete and visually appealing game.