AI game creator

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

No:39473

←

Prev Next

→

Merge Game
Developer User17653｜Date and time 24/1/28 14:39:03
Build time 9.685 sec｜Game capacity 2.706KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
</head>
<body>
  <script>
    // Pictograms for game tiles
    const pictograms = [
      "🍓", "🍉", "🍌", "🍇", "🍎", "🍊", "🍒", "🍑", "🍍", "🥝"
    ];

// Function to randomly select a pictogram
    function getRandomPictogram() {
      const randomIndex = Math.floor(Math.random() * pictograms.length);
      return pictograms[randomIndex];
    }

// Function to generate a new tile
    function generateTile() {
      const tile = document.createElement("div");
      tile.className = "tile";
      tile.textContent = getRandomPictogram();
      return tile;
    }

// Function to initialize game grid
    function initializeGrid() {
      const grid = document.getElementById("grid");
      let row, tile;

for (let i = 0; i < 4; i++) {
        row = document.createElement("div");
        row.className = "row";

for (let j = 0; j < 4; j++) {
          tile = generateTile();
          row.appendChild(tile);
        }

grid.appendChild(row);
      }
    }

// Function to handle merging of tiles
    function mergeTiles() {
      const tiles = document.getElementsByClassName("tile");

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

if (tile1.textContent === tile2.textContent) {
          const mergedPictogram = getRandomPictogram();
          tile1.textContent = mergedPictogram;
          tile2.textContent = mergedPictogram;
        }
      }
    }

// Function to handle merging on arrow key press
    function handleKeyPress(event) {
      // Check if arrow key was pressed
      if (event.keyCode >= 37 && event.keyCode <= 40) {
        mergeTiles();
        // Update grid after merging
        updateGrid();
      }
    }

// Function to update grid after merging
    function updateGrid() {
      const grid = document.getElementById("grid");
      grid.innerHTML = "";
      initializeGrid();
    }

// Function to start the game
    function startGame() {
      initializeGrid();
      document.addEventListener("keydown", handleKeyPress);
    }

// Call startGame() to begin the game
    startGame();
  </script>

.row {
      margin-bottom: 5px;
    }

#grid {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  </style>