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

No:12422

←

Prev Next

→

Merge Game
Developer User5099｜Date and time 23/8/16 14:43:12
Build time 53.514 sec｜Game capacity 7.369KB｜

Script

Sure! Here's an example of a simple merge game implemented as a single HTML file using JavaScript and enclosed within script tags:

Merge Game

This implementation of the Merge Game provides a basic HTML layout with a game container and tiles represented by div elements. The game starts with two random tiles (values 1 or 2) positioned within the container grid. Swipe gestures (left, right, up, down) on a mobile device trigger the movement and merging of tiles. The game automatically generates a new tile (value 1 or 2) after each swipe.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a simple merge game implemented as a single HTML file using JavaScript and enclosed within script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 100px;
    }
    
    #game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 300px;
      margin: 0 auto;
    }
    
    .tile {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 80px;
      background-color: #eee;
      margin: 5px;
      font-size: 24px;
      font-weight: bold;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <h1>Merge Game</h1>
  <div id="game-container"></div>

// Initialize the game state
    function initializeGame() {
      const container = document.getElementById("game-container");
      container.innerHTML = ""; // Clear existing tiles

// Generate two random tiles to start the game
      for (let i = 0; i < 2; i++) {
        const value = getRandomNumber(1, 2);
        const tile = createTile(value);
        container.appendChild(tile);
      }
    }

// Create a new tile with the given value
    function createTile(value) {
      const tile = document.createElement("div");
      tile.classList.add("tile");
      tile.textContent = value;
      return tile;
    }

// Handle tile merging logic
    function mergeTiles() {
      const container = document.getElementById("game-container");
      const tiles = Array.from(container.getElementsByClassName("tile"));

for (let i = 0; i < tiles.length - 1; i++) {
        const currentTile = tiles[i];
        const nextTile = tiles[i + 1];

if (currentTile.textContent === nextTile.textContent) {
          // Merge tiles by doubling their value
          const mergedValue = parseInt(currentTile.textContent) * 2;
          currentTile.textContent = mergedValue;
          nextTile.remove();
        }
      }
    }

// Handle swipe events
    function handleSwipe(direction) {
      const container = document.getElementById("game-container");
      const tiles = Array.from(container.getElementsByClassName("tile"));
      let moved = false;

if (direction === "left" || direction === "right") {
        for (let i = 0; i < tiles.length; i++) {
          const currentTile = tiles[i];
          const previousTile = tiles[i - 1];
          const nextTile = tiles[i + 1];

if (direction === "left") {
            if (!previousTile && parseInt(currentTile.style.left) > 0) {
              currentTile.style.left = parseInt(currentTile.style.left) - 90 + "px";
              moved = true;
            } else if (previousTile && previousTile.textContent === currentTile.textContent) {
              previousTile.style.left = parseInt(previousTile.style.left) - 90 + "px";
              currentTile.remove();
              moved = true;
            }
          } else if (direction === "right") {
            if (!nextTile && parseInt(currentTile.style.left) < 180) {
              currentTile.style.left = parseInt(currentTile.style.left) + 90 + "px";
              moved = true;
            } else if (nextTile && nextTile.textContent === currentTile.textContent) {
              currentTile.remove();
              nextTile.style.left = parseInt(nextTile.style.left) + 90 + "px";
              moved = true;
            }
          }
        }
      } else if (direction === "up" || direction === "down") {
        for (let i = 0; i < tiles.length; i++) {
          const currentTile = tiles[i];
          const previousRowTile = tiles[i - 3];
          const nextRowTile = tiles[i + 3];

if (direction === "up") {
            if (!previousRowTile && parseInt(currentTile.style.top) > 0) {
              currentTile.style.top = parseInt(currentTile.style.top) - 90 + "px";
              moved = true;
            } else if (previousRowTile && previousRowTile.textContent === currentTile.textContent) {
              previousRowTile.style.top = parseInt(previousRowTile.style.top) - 90 + "px";
              currentTile.remove();
              moved = true;
            }
          } else if (direction === "down") {
            if (!nextRowTile && parseInt(currentTile.style.top) < 180) {
              currentTile.style.top = parseInt(currentTile.style.top) + 90 + "px";
              moved = true;
            } else if (nextRowTile && nextRowTile.textContent === currentTile.textContent) {
              currentTile.remove();
              nextRowTile.style.top = parseInt(nextRowTile.style.top) + 90 + "px";
              moved = true;
            }
          }
        }
      }

mergeTiles(); // Check and merge any tiles after movement

if (moved) {
        // Generate a new tile after movement
        const newTileValue = getRandomNumber(1, 2);
        const newTile = createTile(newTileValue);
        container.appendChild(newTile);
      }
    }

// Handle swipe direction based on touch events
    function handleSwipeDirection(startX, startY, endX, endY) {
      const horizontalDistance = endX - startX;
      const verticalDistance = endY - startY;
      const minimumDistance = 50;

if (Math.abs(horizontalDistance) > Math.abs(verticalDistance)) {
        if (horizontalDistance > minimumDistance) {
          handleSwipe("right");
        } else if (horizontalDistance < -minimumDistance) {
          handleSwipe("left");
        }
      } else {
        if (verticalDistance > minimumDistance) {
          handleSwipe("down");
        } else if (verticalDistance < -minimumDistance) {
          handleSwipe("up");
        }
      }
    }

// Event listener for touch start
    function handleTouchStart(event) {
      const touch = event.touches[0];
      this.touchStartX = touch.clientX;
      this.touchStartY = touch.clientY;
    }

// Event listener for touch end
    function handleTouchEnd(event) {
      const touch = event.changedTouches[0];
      const touchEndX = touch.clientX;
      const touchEndY = touch.clientY;

handleSwipeDirection(
        this.touchStartX,
        this.touchStartY,
        touchEndX,
        touchEndY
      );
    }

// Initialize the game and event listeners
    document.addEventListener("DOMContentLoaded", function() {
      initializeGame();

// Event listener for swipe gestures on mobile devices
      document.addEventListener("touchstart", handleTouchStart, false);
      document.addEventListener("touchend", handleTouchEnd, false);
    });
  </script>
</body>
</html>
```