AI game creator

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

No:21707

←

Prev Next

→

Merge Game
Developer User10001｜Date and time 23/10/17 17:41:37
Build time 286.468 sec｜Game capacity 8.022KB｜

Script

Sure! Here's an example of a simple merge game implemented as a single HTML file with JavaScript enclosed in script tags. This game can be played on a smartphone using pictograms to represent different elements.

To play the game, simply copy the above code into a new HTML file, save it, and open it in a web browser. The game will be displayed on the screen, and you can start playing by swiping or clicking on the play area. The goal of the game is to merge tiles with the same value to increase their value and score points. The game ends when there are no more possible moves. The merged tiles are represented using pictograms to enhance the user experience.

←

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;
      text-align: center;
    }

.play-area {
      margin: 50px auto;
      width: 300px;
      height: 300px;
      border: 2px solid black;
      position: relative;
    }

.tile {
      position: absolute;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 36px;
    }

.tile-2 {
      background-color: #eee4da;
      color: #776e65;
    }

.tile-4 {
      background-color: #ede0c8;
      color: #776e65;
    }

.tile-8 {
      background-color: #f2b179;
      color: #f9f6f2;
    }

.tile-16 {
      background-color: #f59563;
      color: #f9f6f2;
    }

.tile-32 {
      background-color: #f67c5f;
      color: #f9f6f2;
    }

.tile-64 {
      background-color: #f65e3b;
      color: #f9f6f2;
    }

/* Add more styles for higher tile values */

.game-over {
      color: red;
      font-size: 24px;
    }

</style>
</head>
<body>
  <div class="play-area"></div>
  <script>
    // Game variables
    var playArea = document.querySelector(".play-area");
    var tiles = []; // stores all the tiles in the play area
    var score = 0;
    var gameOver = false;

// Pictograms for each tile value
    var pictograms = {
      2: "🌱",
      4: "🐣",
      8: "🐥",
      16: "🐔",
      32: "🐓",
      64: "🦃"
      // Add more pictograms for higher tile values
    };

// Function to create a new tile
    function createTile() {
      var tile = document.createElement("div");
      tile.className = "tile tile-2"; // starts with tile value as 2
      tile.innerHTML = pictograms[2];
      return tile;
    }

// Function to add a new tile to the play area
    function addNewTile() {
      var randomIndex = Math.floor(Math.random() * tiles.length);
      var newTile = createTile();
      tiles[randomIndex].appendChild(newTile);
      tiles.push(newTile);
    }

// Function to merge tiles if they have the same value
    function mergeTiles(tile1, tile2) {
      var value = parseInt(tile1.innerText) * 2;
      tile1.innerText = value;
      tile1.className = "tile tile-" + value;
      tile1.innerHTML = pictograms[value];
      score += value;
      playArea.removeChild(tile2);
      tiles.splice(tiles.indexOf(tile2), 1);
    }

// Function to handle swipe gestures
    function handleSwipe() {
      if (gameOver) return;

var diffX = swipeEndX - swipeStartX;
      var diffY = swipeEndY - swipeStartY;

// Check if swipe is horizontal or vertical
      if (Math.abs(diffX) > Math.abs(diffY)) {
        if (diffX > 0) {
          // Swipe right
          moveTiles("right");
        } else {
          // Swipe left
          moveTiles("left");
        }
      } else {
        if (diffY > 0) {
          // Swipe down
          moveTiles("down");
        } else {
          // Swipe up
          moveTiles("up");
        }
      }
    }

// Function to move tiles
    function moveTiles(direction) {
      var moved = false;
      var rows = [[], [], [], []];

// Store tiles in rows based on current position and value
      for (var i = 0; i < tiles.length; i++) {
        var left = parseInt(tiles[i].style.left);
        var top = parseInt(tiles[i].style.top);
        var value = parseInt(tiles[i].innerText);
        rows[top / 100].push({ left: left, value: value });
      }

// Sort tiles in each row based on their left position
      for (var i = 0; i < rows.length; i++) {
        rows[i].sort(function(a, b) {
          return a.left - b.left;
        });
      }

// Move tiles towards the specified direction
      switch (direction) {
        case "right":
          for (var i = 0; i < rows.length; i++) {
            for (var j = rows[i].length - 2; j >= 0; j--) {
              var current = rows[i][j];
              var next = rows[i][j + 1];

if (current.value === next.value) {
                mergeTiles(tiles[(i * 4) + j], tiles[(i * 4) + j + 1]);
                moved = true;
              }
            }
          }
          break;
        case "left":
          for (var i = 0; i < rows.length; i++) {
            for (var j = 1; j < rows[i].length; j++) {
              var current = rows[i][j];
              var prev = rows[i][j - 1];

if (current.value === prev.value) {
                mergeTiles(tiles[(i * 4) + j], tiles[(i * 4) + j - 1]);
                moved = true;
              }
            }
          }
          break;
        case "down":
          for (var i = rows.length - 2; i >= 0; i--) {
            for (var j = 0; j < rows[i].length; j++) {
              var current = rows[i][j];
              var nextRowTile = rows[i + 1][j];

if (current.value === nextRowTile.value) {
                mergeTiles(tiles[(i * 4) + j], tiles[((i + 1) * 4) + j]);
                moved = true;
              }
            }
          }
          break;
        case "up":
          for (var i = 1; i < rows.length; i++) {
            for (var j = 0; j < rows[i].length; j++) {
              var current = rows[i][j];
              var prevRowTile = rows[i - 1][j];

if (current.value === prevRowTile.value) {
                mergeTiles(tiles[(i * 4) + j], tiles[((i - 1) * 4) + j]);
                moved = true;
              }
            }
          }
          break;
      }

// Move tiles after merging
      for (var i = 0; i < tiles.length; i++) {
        var left = parseInt(tiles[i].style.left);
        var top = parseInt(tiles[i].style.top);
        var row = top / 100;
        var col = left / 100;

if (row !== Math.floor(i / 4) || col !== (i % 4)) {
          tiles[i].style.left = (col * 100) + "px";
          tiles[i].style.top = (row * 100) + "px";
          moved = true;
        }
      }

// Check if the game is over
      if (!moved) {
        gameOver = true;
        var gameOverElement = document.createElement("div");
        gameOverElement.className = "game-over";
        gameOverElement.innerText = "Game Over! Final Score: " + score;
        playArea.appendChild(gameOverElement);
      } else {
        // Add a new tile after each move
        addNewTile();
      }

// Clear swipe variables
      swipeStartX = null;
      swipeStartY = null;
      swipeEndX = null;
      swipeEndY = null;
    }

// Event listeners for touch and mouse events
    var swipeStartX = null;
    var swipeStartY = null;
    var swipeEndX = null;
    var swipeEndY = null;

playArea.addEventListener("touchstart", function(event) {
      swipeStartX = event.touches[0].clientX;
      swipeStartY = event.touches[0].clientY;
    });

playArea.addEventListener("touchend", function(event) {
      swipeEndX = event.changedTouches[0].clientX;
      swipeEndY = event.changedTouches[0].clientY;
      handleSwipe();
    });

playArea.addEventListener("mousedown", function(event) {
      swipeStartX = event.clientX;
      swipeStartY = event.clientY;
    });

playArea.addEventListener("mouseup", function(event) {
      swipeEndX = event.clientX;
      swipeEndY = event.clientY;
      handleSwipe();
    });

// Initialize the game
    addNewTile();

</script>
</body>
</html>
```