AI game creator

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

No:16353

109

←

Prev Next

→

Merge Game
Developer Mubashir Hussain｜Date and time 23/9/17 14:15:24
Build time 23.752 sec｜Game capacity 3.05KB｜

Script

Sure! Here's a simple example of a merge game implemented as a single HTML file using JavaScript and smartphone-friendly pictograms:

This implementation includes a simple merge game where you have tiles with a value of 2, and your goal is to merge them by swiping left or right, doubling their value and increasing your score. The game is rendered using a flex container with each tile displayed as a div element. Swiping gestures are detected using touch events, and the game logic is handled by the mergeTiles function which is called whenever a swipe occurs. Please note that this is just a basic implementation, and you can further enhance and customize the game as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's a simple example of a merge game implemented as a single HTML file using JavaScript and smartphone-friendly pictograms:

<html>
  <head>
    <title>Merge Game</title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #game-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: 60px;
      }
    </style>
  </head>
  <body>
    <div id="game-container"></div>

// Function to render the game board
      function renderGame() {
        gameContainer.innerHTML = '';
        tiles.forEach(function(tile) {
          var tileElement = document.createElement('div');
          tileElement.innerText = tile;
          gameContainer.appendChild(tileElement);
        });
      }

// Function to merge the tiles
      function mergeTiles() {
        for (var i = 0; i < tiles.length - 1; i++) {
          if (tiles[i] === tiles[i + 1]) {
            tiles[i] *= 2;
            tiles.splice(i + 1, 1);
            score += tiles[i];
          }
        }
      }

// Function to handle swipe left
      function swipeLeft() {
        mergeTiles();
        renderGame();
      }

// Function to handle swipe right
      function swipeRight() {
        tiles.reverse();
        mergeTiles();
        tiles.reverse();
        renderGame();
      }

// Event listener for swipe gestures
      window.addEventListener('touchstart', handleTouchStart, false);
      window.addEventListener('touchmove', handleTouchMove, false);
      var xDown = null;
      var yDown = null;

function handleTouchStart(evt) {
        xDown = evt.touches[0].clientX;
        yDown = evt.touches[0].clientY;
      }

function handleTouchMove(evt) {
        if (!xDown || !yDown) {
          return;
        }

var xUp = evt.touches[0].clientX;
        var yUp = evt.touches[0].clientY;

var xDiff = xDown - xUp;
        var yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
          if (xDiff > 0) {
            swipeLeft();
          } else {
            swipeRight();
          }
        }

xDown = null;
        yDown = null;
      }

// Initialize the game
      renderGame();
    </script>
  </body>
</html>

Please note that this is just a basic implementation, and you can further enhance and customize the game as per your requirements.