AI game creator

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

No:9489

176

←

Prev Next

→

Merge Game
Developer User4371｜Date and time 23/7/25 15:50:25
Build time 46.22 sec｜Game capacity 5.749KB｜

Script

Sure, here's an example of a simple merge game implemented as a single HTML file using JavaScript:

Score: 0

This game follows the basic rules of merging similar cells by swiping in different directions (left, right, up, and down) to achieve higher score by merging cells with the same value. Please note that this is a simplified implementation and may not include advanced game features. Feel free to modify and enhance it further according to your requirements.

←

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:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
  <style>
    body {
      background-color: #f5f5f5;
      font-family: Arial, sans-serif;
    }
    
    .container {
      max-width: 360px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    }
    
    .score {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 20px;
    }
    
    .cell {
      width: 80px;
      height: 80px;
      border-radius: 5px;
      background-color: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="score">Score: <span id="score">0</span></div>
    <div class="grid" id="grid"></div>
  </div>

// Function to create a new cell with a random value
      function createCell() {
        const cell = document.createElement("div");
        cell.className = "cell";
        cell.value = Math.random() < 0.9 ? 2 : 4;
        cell.innerText = cell.value;
        return cell;
      }

// Function to generate or update the grid
      function populateGrid() {
        grid.innerHTML = "";
        cells = [];

for (let i = 0; i < 4; i++) {
          for (let j = 0; j < 4; j++) {
            const cell = createCell();
            cells.push(cell);
            grid.appendChild(cell);
          }
        }

// Place initial cells on the grid
        for (let i = 0; i < 2; i++) {
          const randomIndex = Math.floor(Math.random() * cells.length);
          cells[randomIndex].value = Math.random() < 0.9 ? 2 : 4;
          cells[randomIndex].innerText = cells[randomIndex].value;
        }
      }

// Function to handle merging cells
      function mergeCells(targetCell, mergeCell) {
        const newValue = targetCell.value + mergeCell.value;
        targetCell.value = newValue;
        targetCell.innerText = newValue;
        mergeCell.parentNode.removeChild(mergeCell);
        score += newValue;
        scoreElement.innerText = score;
      }

// Function to handle cell movement
      function moveCells(direction) {
        const rowLength = direction === "left" || direction === "right" ? 4 : 1;

for (let i = 0; i < 4; i++) {
          let row = [];

for (let j = 0; j < 4; j++) {
            const cellIndex = direction === "right" || direction === "down" ? i * 4 + (3 - j) : i * 4 + j;
            const cell = cells[cellIndex];

if (cell) {
              if (row.length === 0) {
                row.push(cell);
              } else {
                const previousCell = row[row.length - 1];

if (previousCell.value === cell.value) {
                  mergeCells(previousCell, cell);
                } else {
                  row.push(cell);
                }
              }
            }
          }

for (let j = 0; j < 4; j++) {
            const cellIndex = direction === "right" || direction === "down" ? i * 4 + (3 - j) : i * 4 + j;
            const cell = cells[cellIndex];

if (cell) {
              const targetIndex = direction === "right" || direction === "down" ? i * 4 + (3 - j) : i * 4 + j;
              const targetCell = cells[targetIndex];

if (targetCell !== cell) {
                targetCell.parentNode.removeChild(targetCell);
                const newTargetIndex = direction === "right" || direction === "down" ? i * 4 + (3 - j + 1) : i * 4 + (j - 1);
                const newTargetCell = cells[newTargetIndex];
                cells[newTargetIndex] = cell;
                cell.parentNode.removeChild(cell);
                newTargetCell.parentNode.insertBefore(cell, newTargetCell.nextSibling);
              }
            }
          }
        }

// Add new cell after movement
        const possibleIndexes = [];

for (let i = 0; i < cells.length; i++) {
          if (!cells[i]) {
            possibleIndexes.push(i);
          }
        }

if (possibleIndexes.length > 0) {
          const randomIndex = possibleIndexes[Math.floor(Math.random() * possibleIndexes.length)];
          const cell = createCell();
          cells[randomIndex] = cell;
          grid.appendChild(cell);
        }
      }

// Handle key events for movement
      document.addEventListener("keydown", function(event) {
        event.preventDefault();
        if (event.key === "ArrowLeft") {
          moveCells("left");
        } else if (event.key === "ArrowRight") {
          moveCells("right");
        } else if (event.key === "ArrowUp") {
          moveCells("up");
        } else if (event.key === "ArrowDown") {
          moveCells("down");
        }
      });

// Populate the grid initially
      populateGrid();
    });
  </script>
</body>
</html>
```

This game follows the basic rules of merging similar cells by swiping in different directions (left, right, up, and down) to achieve higher score by merging cells with the same value.

Please note that this is a simplified implementation and may not include advanced game features. Feel free to modify and enhance it further according to your requirements.