AI game creator

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

No:25250

←

Prev Next

→

Merge Game
Developer User12333｜Date and time 23/11/19 23:44:51
Build time 269.52 sec｜Game capacity 4.431KB｜

Script

Sure! Here's a simple game where you need to merge identical pictograms by swiping on a smartphone:

Score: 0

This game creates a 4x4 game board where you can swipe left, right, up, or down to merge tiles with identical pictograms. It uses touch events to detect the swipe direction and updates the game board accordingly. The score increases every time tiles are successfully merged. You can replace the placeholders with actual pictograms that you want to use in the game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure! Here's a simple game where you need to merge identical pictograms by swiping on a smartphone:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #e2e2e2;
      text-align: center;
      font-family: Arial, sans-serif;
    }

#game-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 400px;
      width: 400px;
      margin: 0 auto;
      background-color: #fff;
      border: 4px solid #333;
      overflow: hidden;
    }

.tile {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90px;
      width: 90px;
      margin: 5px;
      background-color: #ddd;
      border-radius: 4px;
      font-size: 32px;
    }

.score {
      margin: 20px auto;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    
  </div>

<div class="score">
    Score: <span id="score">0</span>
  </div>

// Add initial tiles to the game container
      generateTiles();

// Listen to swipe events on the game container
      gameContainer.addEventListener("touchstart", handleSwipeStart, false);
      gameContainer.addEventListener("touchmove", handleSwipeMove, false);
      gameContainer.addEventListener("touchend", handleSwipeEnd, false);

// Generate random tiles
      function generateTiles() {
        for (let i = 0; i < 16; i++) {
          const tile = document.createElement("div");
          tile.className = "tile";
          tile.textContent = getRandomPictogram(); // Replace with actual pictograms
          tiles.push(tile);
          gameContainer.appendChild(tile);
        }
      }

// Get a random pictogram for the tile
      function getRandomPictogram() {
        const pictograms = ["😀", "🌞", "🐶", "🍕", "⚽️", "🎉"]; // Replace with actual pictograms
        return pictograms[Math.floor(Math.random() * pictograms.length)];
      }

// Handle swipe start event
      function handleSwipeStart(event) {
        event.preventDefault();
        startX = event.touches[0].pageX;
        startY = event.touches[0].pageY;
      }

// Handle swipe move event
      function handleSwipeMove(event) {
        event.preventDefault();
      }

// Handle swipe end event
      function handleSwipeEnd(event) {
        event.preventDefault();
        const endX = event.changedTouches[0].pageX;
        const endY = event.changedTouches[0].pageY;
        const deltaX = endX - startX;
        const deltaY = endY - startY;

// Determine swipe direction and merge tiles accordingly
        if (Math.abs(deltaX) > Math.abs(deltaY)) {
          // Horizontal swipe
          if (deltaX > 0) {
            mergeTiles("right");
          } else {
            mergeTiles("left");
          }
        } else {
          // Vertical swipe
          if (deltaY > 0) {
            mergeTiles("down");
          } else {
            mergeTiles("up");
          }
        }
      }

// Merge tiles based on swipe direction
      function mergeTiles(direction) {
        // Manipulate tile positions and values based on direction
        // Implement your own logic here

// Temporary implementation to shuffle tiles randomly
        tiles.sort(() => Math.random() - 0.5);

// Clear game container
        gameContainer.innerHTML = "";

// Add tiles back to the game container
        tiles.forEach(tile => {
          gameContainer.appendChild(tile);
        });

// Update score
        score++;
        scoreElement.textContent = score;
      }
    };
  </script>
</body>
</html>
```