AI game creator

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

No:42702

108

←

Prev Next

→

Merge Game
Developer User18878｜Date and time 24/2/12 21:13:50
Build time 17.529 sec｜Game capacity 4.624KB｜

Script

Sure! Here's an example of a simple game called "Merge Game" implemented as a single HTML file. It utilizes JavaScript and can be played on a smartphone. The game involves merging pictograms to achieve higher values.

Score: 0

To play the game, save this code as an HTML file (e.g., "merge_game.html") and open it in a web browser on your smartphone. The game board will be displayed with a score counter and a "New Game" button. Pictogram cells are displayed on the grid. To merge pictograms, tap on any cell. The goal is to merge and reach the pictogram that represents a trophy (🏆). If you achieve that, an alert will notify you that you won, and you can start a new game by clicking the "New Game" button. Enjoy playing the Merge Game!

←

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>
    /* CSS styles to center the game on the screen */
    html, body {
      height: 100%;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f1f1f1;
    }
    
    #game-board {
      display: inline-block;
      text-align: center;
      font-size: 24px;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="score">Score: 0</div>
    <div id="grid"></div>
    <button id="new-game-btn">New Game</button>
  </div>

// Initialize the game
    function init() {
      score = 0;
      document.getElementById("score").textContent = "Score: " + score;
      grid = createGrid();
      renderGrid();
    }

// Create the initial grid
    function createGrid() {
      const grid = [];
      for (let i = 0; i < 5; i++) {
        grid[i] = [];
        for (let j = 0; j < 5; j++) {
          grid[i][j] = getRandomPictogram();
        }
      }
      return grid;
    }

// Utility function to get a random pictogram from the available list
    function getRandomPictogram() {
      const randIndex = Math.floor(Math.random() * pictograms.length);
      return pictograms[randIndex];
    }

// Render the grid on the game board
    function renderGrid() {
      const gridContainer = document.getElementById("grid");
      gridContainer.innerHTML = "";
      for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
          const cell = document.createElement("div");
          cell.classList.add("grid-cell");
          cell.textContent = grid[i][j];
          gridContainer.appendChild(cell);
        }
      }
    }

// Event listener for merging pictograms on click
    function merge(event) {
      const cell = event.target;
      const row = parseInt(cell.dataset.row);
      const col = parseInt(cell.dataset.col);

if (grid[row][col] !== "") {
        const mergedPictogram = mergePictogram(row, col);
        grid[row][col] = mergedPictogram;
        cell.textContent = mergedPictogram;
        checkWinCondition();
        updateScore();
      }
    }

// Merge pictograms based on their values
    function mergePictogram(row, col) {
      const neighborVals = [];

if (row > 0) neighborVals.push(grid[row - 1][col]);
      if (row < 4) neighborVals.push(grid[row + 1][col]);
      if (col > 0) neighborVals.push(grid[row][col - 1]);
      if (col < 4) neighborVals.push(grid[row][col + 1]);

const mergedVal = neighborVals.filter(val => val !== "").join("");
      return pictograms.includes(mergedVal) ? mergedVal : getRandomPictogram();
    }

// Check if the game is won
    function checkWinCondition() {
      for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
          if (grid[i][j] === "🏆") {
            alert("Congratulations! You won!");
            init();
            return;
          }
        }
      }
    }

// Update the score on the game board
    function updateScore() {
      score++;
      document.getElementById("score").textContent = "Score: " + score;
    }

// Event listener for starting a new game
    document.getElementById("new-game-btn").addEventListener("click", init);

// Event listeners for merging pictograms
    const cells = Array.from(document.getElementsByClassName("grid-cell"));
    cells.forEach(cell => cell.addEventListener("click", merge));

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