AI game creator

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

No:39985

←

Prev Next

→

Merge Game
Developer User17928｜Date and time 24/1/31 11:31:44
Build time 29.518 sec｜Game capacity 8.852KB｜

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>
    // Define the pictograms for merging
    const pictograms = [
      { icon: "🍕", value: 2 },
      { icon: "🍔", value: 4 },
      { icon: "🍟", value: 8 },
      { icon: "🌭", value: 16 },
      { icon: "🍿", value: 32 },
      { icon: "🥤", value: 64 },
      { icon: "🍦", value: 128 },
      { icon: "🍰", value: 256 },
      { icon: "🍭", value: 512 },
      { icon: "🍩", value: 1024 },
    ];

// Create a new cell with a random pictogram
    function createCell() {
      const randomIndex = Math.floor(Math.random() * pictograms.length);
      const cellValue = pictograms[randomIndex];
      const cell = document.createElement("div");
      cell.className = "cell";
      cell.textContent = cellValue.icon;
      cell.dataset.value = cellValue.value;
      return cell;
    }

// Start the game
    function startGame() {
      const grid = document.querySelector(".grid");
      const scoreDisplay = document.querySelector("#score");

let score = 0;

// Initialize the grid with two cells
      for (let i = 0; i < 2; i++) {
        const cell = createCell();
        grid.appendChild(cell);
      }

// Update the score display
      function updateScore() {
        scoreDisplay.textContent = score;
      }

// Check if the player has won by merging to 2048
      function checkWin() {
        const cells = Array.from(document.querySelectorAll(".cell"));
        for (let i = 0; i < cells.length; i++) {
          if (cells[i].dataset.value === "2048") {
            return true;
          }
        }
        return false;
      }

// Check if the game is over (no empty cells or possible merges)
      function checkGameOver() {
        const cells = Array.from(document.querySelectorAll(".cell"));
        const emptyCells = cells.filter((cell) => cell.textContent === "");
        const mergableCells = cells.filter(
          (cell) => cell.nextSibling && cell.dataset.value === cell.nextSibling.dataset.value);

if (emptyCells.length === 0 && mergableCells.length === 0) {
          return true;
        }
        return false;
      }

// Merge two cells and update the score
      function mergeCells(currentCell, nextCell) {
        const currentValue = parseInt(currentCell.dataset.value);
        const nextValue = parseInt(nextCell.dataset.value);
        const mergedValue = currentValue + nextValue;

if (mergedValue === 2048) {
          alert("Congratulations! You have won the game!");
          location.reload();
        }

if (mergedValue > 0) {
          score += mergedValue;
        }

currentCell.textContent = "";
        currentCell.dataset.value = "";
        nextCell.textContent = pictograms.find((p) => p.value === mergedValue).icon;
        nextCell.dataset.value = mergedValue;
        updateScore();
      }

// Handle the keyboard events for gameplay
      function handleKeyPress(event) {
        event.preventDefault();

if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight") {
          let cells = Array.from(document.querySelectorAll(".cell"));
          let cellsChanged = false;

if (event.key === "ArrowUp") {
            for (let i = 4; i < cells.length; i++) {
              let currentCell = cells[i];
              let aboveCell = cells[i - 4];

while (aboveCell) {
                if (currentCell.textContent === "" || currentCell.dataset.value === aboveCell.dataset.value) {
                  mergeCells(currentCell, aboveCell);
                  cellsChanged = true;
                  break;
                } else if (currentCell.textContent !== "" && aboveCell.textContent === "") {
                  aboveCell.textContent = currentCell.textContent;
                  aboveCell.dataset.value = currentCell.dataset.value;
                  currentCell.textContent = "";
                  currentCell.dataset.value = "";
                  cellsChanged = true;
                }
                currentCell = aboveCell;
                aboveCell = cells[cells.indexOf(aboveCell) - 4];
              }
            }
          } else if (event.key === "ArrowDown") {
            for (let i = cells.length - 5; i >= 0; i--) {
              let currentCell = cells[i];
              let belowCell = cells[i + 4];

while (belowCell) {
                if (currentCell.textContent === "" || currentCell.dataset.value === belowCell.dataset.value) {
                  mergeCells(currentCell, belowCell);
                  cellsChanged = true;
                  break;
                } else if (currentCell.textContent !== "" && belowCell.textContent === "") {
                  belowCell.textContent = currentCell.textContent;
                  belowCell.dataset.value = currentCell.dataset.value;
                  currentCell.textContent = "";
                  currentCell.dataset.value = "";
                  cellsChanged = true;
                }
                currentCell = belowCell;
                belowCell = cells[cells.indexOf(belowCell) + 4];
              }
            }
          } else if (event.key === "ArrowLeft") {
            for (let i = 1; i < cells.length; i++) {
              let currentCell = cells[i];
              let previousCell = cells[i - 1];

while (previousCell) {
                if (currentCell.textContent === "" || currentCell.dataset.value === previousCell.dataset.value) {
                  mergeCells(currentCell, previousCell);
                  cellsChanged = true;
                  break;
                } else if (currentCell.textContent !== "" && previousCell.textContent === "") {
                  previousCell.textContent = currentCell.textContent;
                  previousCell.dataset.value = currentCell.dataset.value;
                  currentCell.textContent = "";
                  currentCell.dataset.value = "";
                  cellsChanged = true;
                }
                currentCell = previousCell;
                previousCell = cells[cells.indexOf(previousCell) - 1];
              }
            }
          } else if (event.key === "ArrowRight") {
            for (let i = cells.length - 2; i >= 0; i--) {
              let currentCell = cells[i];
              let nextCell = cells[i + 1];

while (nextCell) {
                if (currentCell.textContent === "" || currentCell.dataset.value === nextCell.dataset.value) {
                  mergeCells(currentCell, nextCell);
                  cellsChanged = true;
                  break;
                } else if (currentCell.textContent !== "" && nextCell.textContent === "") {
                  nextCell.textContent = currentCell.textContent;
                  nextCell.dataset.value = currentCell.dataset.value;
                  currentCell.textContent = "";
                  currentCell.dataset.value = "";
                  cellsChanged = true;
                }
                currentCell = nextCell;
                nextCell = cells[cells.indexOf(nextCell) + 1];
              }
            }
          }

if (cellsChanged) {
            const emptyCells = cells.filter((cell) => cell.textContent === "");
            if (emptyCells.length > 0) {
              const randomEmptyCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
              const newCell = createCell();
              randomEmptyCell.textContent = newCell.textContent;
              randomEmptyCell.dataset.value = newCell.dataset.value;
            }
          }

if (checkWin()) {
            alert("Congratulations! You have won the game!");
            location.reload();
          }

if (checkGameOver()) {
            alert("Game over! Try again.");
            location.reload();
          }
        }
      }

// Add event listener to the keydown event
      document.addEventListener("keydown", handleKeyPress);
    }

// Initialize the game when the page loads
    window.addEventListener("load", startGame);
  </script>

.cell {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      width: calc(33.33% - 8px);
      height: calc(33.33% - 8px);
      background-color: #f0ebe6;
      border-radius: 6px;
    }

#score {
      text-align: center;
      font-size: 24px;
      margin-top: 20px;
      font-weight: bold;
    }
  </style>