Merge Game's game | AI game creator

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

No:24967

107

Merge Game
Developer User12043｜Date and time 23/11/15 7:10:28
Build time 250.76 sec｜Game capacity 8.729KB｜

Sure! Here's an example of a simple game called "Merge Game" implemented as a single HTML file. It uses JavaScript and incorporates pictograms for a smartphone-friendly interface:

To play the game, simply copy the above code into a new HTML file (e.g., `merge_game.html`), and open the file in a web browser. The game board will be displayed along with the pictogram tiles. Use arrow keys to move the tiles and try to merge them to reach the 2048 tile. Have fun playing the "Merge Game"!

→ 　

0　

0　

　

　
　
　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple game called "Merge Game" implemented as a single HTML file. It uses JavaScript and incorporates pictograms for a smartphone-friendly interface:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    #game-board {
      display: inline-block;
    }
    .tile {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      border-radius: 6px;
      margin: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      font-weight: bold;
    }
    .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: #f65d3b;
      color: #f9f6f2;
    }
    .tile-128 {
      background-color: #edcf72;
      color: #f9f6f2;
    }
    .tile-256 {
      background-color: #edcc61;
      color: #f9f6f2;
    }
    .tile-512 {
      background-color: #edc850;
      color: #f9f6f2;
    }
    .tile-1024 {
      background-color: #edc53f;
      color: #f9f6f2;
    }
    .tile-2048 {
      background-color: #edc22e;
      color: #f9f6f2;
    }
    .game-over {
      font-size: 30px;
      margin-top: 20px;
    }
    .btn {
      display: inline-block;
      background-color: #4CAF50;
      color: white;
      padding: 8px 16px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 4px;
      text-decoration: none;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  <div class="game-over" id="game-over" style="display: none;">Game Over!</div>
  <button class="btn" onclick="restartGame()">Restart</button>

<script>
    // Game Constants
    const BOARD_SIZE = 4; // Size of the game board
    const WINNING_TILE = 2048; // Tile number required to win the game
  
    // Game Variables
    let board = []; // 2D array representing the game board
    let score = 0; // Current score
    let gameOver = false; // Game over flag
  
    // Initialize the game board
    function initGame() {
      board = Array.from({ length: BOARD_SIZE }, () => Array.from({ length: BOARD_SIZE }, () => 0));
      score = 0;
      gameOver = false;
      generateNewTile();
      generateNewTile();
      updateGameBoard();
    }
  
    // Generate a new tile on the game board
    function generateNewTile() {
      const availableCells = [];
  
      // Find available cells (empty cells)
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          if (board[i][j] === 0) {
            availableCells.push({ row: i, col: j });
          }
        }
      }
  
      // Select a random available cell
      if (availableCells.length > 0) {
        const { row, col } = availableCells[Math.floor(Math.random() * availableCells.length)];
        board[row][col] = Math.random() < 0.9 ? 2 : 4;
      }
    }
  
    // Update the game board UI
    function updateGameBoard() {
      const gameBoardElement = document.getElementById("game-board");
      gameBoardElement.innerHTML = "";
  
      // Display each tile on the game board
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          const tileValue = board[i][j];
          const tileElement = document.createElement("div");
          tileElement.className = "tile tile-" + tileValue;
          tileElement.innerHTML = tileValue > 0 ? getTilePictogram(tileValue) : "";
  
          gameBoardElement.appendChild(tileElement);
        }
      }
  
      // Update the score display
      document.getElementById("score").textContent = "Score: " + score;
  
      // Check if game over
      if (gameOver) {
        document.getElementById("game-over").style.display = "block";
      } else {
        document.getElementById("game-over").style.display = "none";
      }
    }
  
    // Return the appropriate pictogram for a given tile value
    function getTilePictogram(tileValue) {
      // Return different pictograms based on tile values (you can add more pictograms if desired)
      switch (tileValue) {
        case 2:
          return "2️⃣";
        case 4:
          return "4️⃣";
        case 8:
          return "8️⃣";
        case 16:
          return "🔟";
        case 32:
          return "3️⃣2️⃣";
        case 64:
          return "6️⃣4️⃣";
        case 128:
          return "1️⃣2️⃣8️⃣";
        case 256:
          return "2️⃣5️⃣6️⃣";
        case 512:
          return "5️⃣1️⃣2️⃣";
        case 1024:
          return "1️⃣0️⃣2️⃣4️⃣";
        case 2048:
          return "2️⃣0️⃣4️⃣8️⃣";
        default:
          return "";
      }
    }
  
    // Game logic for merging tiles in a given direction
    function mergeTiles(direction) {
      let moved = false;
  
      // Merge tiles in the specified direction
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = direction > 0 ? BOARD_SIZE - 1 : 0; direction > 0 ? j >= 0 : j < BOARD_SIZE; direction > 0 ? j-- : j++) {
          if (board[i][j] !== 0) {
            let k = direction > 0 ? j - 1 : j + 1;
  
            while (direction > 0 ? k >= 0 : k < BOARD_SIZE) {
              if (board[i][k] === 0) {
                // Move the tile
                board[i][k] = board[i][k + (direction > 0 ? 1 : -1)];
                board[i][k + (direction > 0 ? 1 : -1)] = 0;
                moved = true;
              } else if (board[i][k] === board[i][k + (direction > 0 ? 1 : -1)]) {
                // Merge the tiles
                board[i][k] *= 2;
                score += board[i][k];
                board[i][k + (direction > 0 ? 1 : -1)] = 0;
                moved = true;
                break;
              } else {
                // Cannot merge anymore
                break;
              }
  
              k += direction > 0 ? -1 : 1;
            }
          }
        }
      }
  
      return moved;
    }
  
    // Game event listeners for arrow key controls
    window.onkeydown = function (event) {
      if (!gameOver) {
        event.preventDefault();
        let moved = false;
  
        switch (event.keyCode) {
          case 37: // Left arrow key
            moved = mergeTiles(-1);
            break;
          case 38: // Up arrow key
            moved = mergeTiles(-1);
            break;
          case 39: // Right arrow key
            moved = mergeTiles(1);
            break;
          case 40: // Down arrow key
            moved = mergeTiles(1);
            break;
        }
  
        if (moved) {
          generateNewTile();
          updateGameBoard();
  
          if (checkGameWon()) {
            gameOver = true;
          }
  
          if (checkGameOver()) {
            gameOver = true;
          }
        }
      }
    };
  
    // Check if the game has been won
    function checkGameWon() {
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          if (board[i][j] === WINNING_TILE) {
            return true;
          }
        }
      }
      return false;
    }
  
    // Check if the game is over (no more possible moves)
    function checkGameOver() {
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          if (board[i][j] === 0) {
            return false;
          }
  
          if (i - 1 >= 0 && board[i][j] === board[i - 1][j]) {
            return false;
          }
  
          if (i + 1 < BOARD_SIZE && board[i][j] === board[i + 1][j]) {
            return false;
          }
  
          if (j - 1 >= 0 && board[i][j] === board[i][j - 1]) {
            return false;
          }
  
          if (j + 1 < BOARD_SIZE && board[i][j] === board[i][j + 1]) {
            return false;
          }
        }
      }
      return true;
    }
  
    // Restart the game
    function restartGame() {
      initGame();
    }
  
    // Initialize the game on page load
    window.onload = function () {
      initGame();
    };
  </script>
</body>
</html>
```

To play the game, simply copy the above code into a new HTML file (e.g., `merge_game.html`), and open the file in a web browser. The game board will be displayed along with the pictogram tiles. Use arrow keys to move the tiles and try to merge them to reach the 2048 tile. Have fun playing the "Merge Game"!