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

No:36845

←

Prev Next

→

Merge Game
Developer User7867｜Date and time 24/1/18 18:57:44
Build time 37.795 sec｜Game capacity 7.116KB｜

Script

Merge Game

How to play:

Swipe to merge similar tiles and reach the highest number possible!

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 20px;
    }
    .square {
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 2px solid #ddd;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }
    .square:hover {
      background-color: #eee;
    }
    .score {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .game-over {
      font-size: 24px;
      color: red;
    }
  </style>
</head>
<body>
  <h1>Merge Game</h1>
  <h3>How to play:</h3>
  <p>Swipe to merge similar tiles and reach the highest number possible!</p>
  <div class="score">Score: 0</div>
  <div class="container"></div>
  
  <script>
    window.addEventListener('load', () => {
      const container = document.querySelector('.container');
      const scoreDisplay = document.querySelector('.score');
      let score = 0;
      let gameOver = false;
      
      // Initialize game board
      const board = [
        ['', '', '', ''],
        ['', '', '', ''],
        ['', '', '', ''],
        ['', '', '', '']
      ];
      
      // Generate a new random tile
      function generateTile() {
        const tile = Math.random() < 0.8 ? 2 : 4;
        const emptyTiles = [];
        for (let i = 0; i < 4; i++) {
          for (let j = 0; j < 4; j++) {
            if (board[i][j] === '') {
              emptyTiles.push({ row: i, col: j });
            }
          }
        }
        if (emptyTiles.length > 0) {
          const { row, col } = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
          board[row][col] = tile;
        }
      }
      
      // Render game board
      function renderBoard() {
        container.innerHTML = '';
        for (let i = 0; i < 4; i++) {
          for (let j = 0; j < 4; j++) {
            const square = document.createElement('div');
            square.classList.add('square');
            square.textContent = board[i][j] || '';
            container.appendChild(square);
          }
        }
      }
      
      // Check if game is over
      function checkGameOver() {
        let movesAvailable = false;
        
        // Check for available moves horizontally
        for (let i = 0; i < 4; i++) {
          for (let j = 0; j < 3; j++) {
            if (board[i][j] === board[i][j+1] || board[i][j] === '') {
              movesAvailable = true;
              break;
            }
          }
        }
        
        // Check for available moves vertically
        for (let i = 0; i < 3; i++) {
          for (let j = 0; j < 4; j++) {
            if (board[i][j] === board[i+1][j] || board[i][j] === '') {
              movesAvailable = true;
              break;
            }
          }
        }
        
        return !movesAvailable;
      }
      
      // Handle swipe events
      function handleSwipe(e) {
        if (gameOver) return;
        
        const startX = e.touches[0].clientX;
        const startY = e.touches[0].clientY;
        let distX = 0;
        let distY = 0;
        let threshold = 50;
        let restraint = 30;
        let allowedTime = 300;
        let elapsedTime = 0;
        let startTime = new Date().getTime();
        
        e.preventDefault();
        
        function handleSwipeEnd() {
          distX = e.changedTouches[0].clientX - startX;
          distY = e.changedTouches[0].clientY - startY;
          elapsedTime = new Date().getTime() - startTime;
          
          if (elapsedTime <= allowedTime) {
            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
              if (distX > 0) {
                mergeRight();
              } else {
                mergeLeft();
              }
            } else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
              if (distY > 0) {
                mergeDown();
              } else {
                mergeUp();
              }
            }
          }
          
          renderBoard();
          
          if (!gameOver) generateTile();
          renderBoard();
          
          if (checkGameOver()) {
            gameOver = true;
            displayGameOver();
          }
        }
        
        window.addEventListener('touchend', handleSwipeEnd);
      }
      
      // Merge tiles right
      function mergeRight() {
        for (let i = 0; i < 4; i++) {
          for (let j = 3; j > 0; j--) {
            if (board[i][j] !== '' && board[i][j] === board[i][j-1]) {
              board[i][j] *= 2;
              score += board[i][j];
              board[i][j-1] = '';
            } else if (board[i][j] === '' && board[i][j-1] !== '') {
              board[i][j] = board[i][j-1];
              board[i][j-1] = '';
            }
          }
        }
      }
      
      // Merge tiles left
      function mergeLeft() {
        for (let i = 0; i < 4; i++) {
          for (let j = 0; j < 3; j++) {
            if (board[i][j] !== '' && board[i][j] === board[i][j+1]) {
              board[i][j] *= 2;
              score += board[i][j];
              board[i][j+1] = '';
            } else if (board[i][j] === '' && board[i][j+1] !== '') {
              board[i][j] = board[i][j+1];
              board[i][j+1] = '';
            }
          }
        }
      }
      
      // Merge tiles down
      function mergeDown() {
        for (let j = 0; j < 4; j++) {
          for (let i = 3; i > 0; i--) {
            if (board[i][j] !== '' && board[i][j] === board[i-1][j]) {
              board[i][j] *= 2;
              score += board[i][j];
              board[i-1][j] = '';
            } else if (board[i][j] === '' && board[i-1][j] !== '') {
              board[i][j] = board[i-1][j];
              board[i-1][j] = '';
            }
          }
        }
      }
      
      // Merge tiles up
      function mergeUp() {
        for (let j = 0; j < 4; j++) {
          for (let i = 0; i < 3; i++) {
            if (board[i][j] !== '' && board[i][j] === board[i+1][j]) {
              board[i][j] *= 2;
              score += board[i][j];
              board[i+1][j] = '';
            } else if (board[i][j] === '' && board[i+1][j] !== '') {
              board[i][j] = board[i+1][j];
              board[i+1][j] = '';
            }
          }
        }
      }
      
      // Display game over message
      function displayGameOver() {
        const gameOverMsg = document.createElement('div');
        gameOverMsg.classList.add('game-over');
        gameOverMsg.textContent = 'Game Over!';
        container.appendChild(gameOverMsg);
      }
      
      // Initialize game
      function startGame() {
        generateTile();
        generateTile();
        renderBoard();
        container.addEventListener('touchstart', handleSwipe);
      }
      
      startGame();
    });
  </script>
</body>
</html>