AI game creator

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

No:24360

←

Prev Next

→

Merge Game
Developer User11476｜Date and time 23/11/8 2:02:33
Build time 149.812 sec｜Game capacity 7.028KB｜

Script

Sure, I can help you create a simple merge game using JavaScript enclosed in script tags within a single HTML file. The game will be optimized for smartphone operation and will utilize pictograms. Here's an example implementation:

Score: 0

This implementation provides a basic merge game grid with swipe gestures for merging and sliding cells. The player's score is displayed, and the game ends when there are no more available moves. The gameboard consists of 16 cells in a 4x4 grid, and the goal is to merge cells with the same value to reach the highest possible score.

←

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>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .cell {
            display: inline-block;
            width: 60px;
            height: 60px;
            background-color: #EEE;
            margin: 5px;
            font-size: 24px;
            line-height: 60px;
            text-align: center;
            border-radius: 5px;
        }
        #score {
            margin-top: 20px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <br>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <br>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <br>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div id="score">Score: 0</div>

// Function to merge two cells
          const mergeCells = (cell1, cell2) => {
              const value = parseInt(cell1.textContent) + parseInt(cell2.textContent);
              cell1.textContent = value;
              cell2.textContent = '';
              cell1.style.backgroundColor = `hsl(${(value * 30) % 360}, 75%, 70%)`;
              score += value;
              scoreDisplay.textContent = `Score: ${score}`;
          };
  
          // Function to check if the game is over
          const isGameOver = () => {
              for (let i = 0; i < cells.length; i++) {
                  if (cells[i].textContent === '') {
                      return false;
                  }
                  if (i % 4 !== 3 && cells[i].textContent === cells[i + 1].textContent) {
                      return false;
                  }
                  if (i < 12 && cells[i].textContent === cells[i + 4].textContent) {
                      return false;
                  }
              }
              return true;
          };
  
          // Function to handle swipe gestures
          const handleSwipe = (direction) => {
              const rows = [
                  [0, 1, 2, 3],
                  [4, 5, 6, 7],
                  [8, 9, 10, 11],
                  [12, 13, 14, 15]
              ];
              let moved = false;
  
              rows.forEach(row => {
                  let cellsArray = row.map(index => cells[index]);
  
                  // Adjust array based on swipe direction
                  if (direction === 'left' || direction === 'up') {
                      cellsArray = cellsArray.reverse();
                  }
  
                  // Remove empty cells
                  cellsArray = cellsArray.filter(cell => cell.textContent !== '');
  
                  // Merge adjacent cells with the same value
                  for (let i = 0; i < cellsArray.length - 1; i++) {
                      if (cellsArray[i].textContent === cellsArray[i + 1].textContent) {
                          mergeCells(cellsArray[i], cellsArray[i + 1]);
                          moved = true;
                      }
                  }
  
                  // Shift cells to the left or right
                  const emptyCellsCount = 4 - cellsArray.length;
                  if (direction === 'left' || direction === 'up') {
                      cellsArray.forEach((cell, i) => {
                          cell.textContent = cellsArray[i].textContent;
                      });
                      for (let i = 0; i < emptyCellsCount; i++) {
                          cellsArray[3 - i].textContent = '';
                      }
                  } else {
                      for (let i = 0; i < emptyCellsCount; i++) {
                          cellsArray[i].textContent = '';
                      }
                      cellsArray.forEach((cell, i) => {
                          cell.textContent = cellsArray[emptyCellsCount + i].textContent;
                      });
                  }
              });
  
              if (moved) {
                  generateRandomCell();
                  if (isGameOver()) {
                      alert(`Game Over! Your score: ${score}`);
                      resetGame();
                  }
              }
          };
  
          // Function to generate a random cell with initial value
          const generateRandomCell = () => {
              const emptyCells = cells.filter(cell => cell.textContent === '');
              if (emptyCells.length > 0) {
                  const randomIndex = Math.floor(Math.random() * emptyCells.length);
                  emptyCells[randomIndex].textContent = Math.random() < 0.75 ? '2' : '4';
              }
          };
  
          // Function to reset the game
          const resetGame = () => {
              cells.forEach(cell => {
                  cell.textContent = '';
                  cell.style.backgroundColor = '#EEE';
              });
              score = 0;
              scoreDisplay.textContent = `Score: ${score}`;
              generateRandomCell();
              generateRandomCell();
          };
  
          // Handle swipe gestures
          let startX, startY;
          document.addEventListener('touchstart', e => {
              startX = e.touches[0].clientX;
              startY = e.touches[0].clientY;
          });
  
          document.addEventListener('touchend', e => {
              const deltaX = e.changedTouches[0].clientX - startX;
              const deltaY = e.changedTouches[0].clientY - startY;
  
              if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
                  handleSwipe(deltaX > 0 ? 'right' : 'left');
              } else if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 10) {
                  handleSwipe(deltaY > 0 ? 'down' : 'up');
              }
          });
  
          // Initial game setup
          resetGame();
      });
    </script>
</body>
</html>
```