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

No:40777

←

Prev Next

→

Merge Game
Developer User18255｜Date and time 24/2/4 4:04:06
Build time 30.025 sec｜Game capacity 8.582KB｜

Script

Merge Game

Score: 0

←

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-size: 24px;
        text-align: center;
      }
      .score {
        font-size: 36px;
        margin-bottom: 10px;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 20px;
        margin-bottom: 40px;
      }
      .cell {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        background-color: #eee;
        font-weight: bold;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <h1>Merge Game</h1>
    <p class="score">Score: 0</p>
  
    <div class="grid">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    
    <script>
      // A simple pictogram set for the game
      const pictograms = [
        "🍎", "🍌", "🍒", "🍇", "🍊", "🍓", "🍋", "🍉", "🥝"
      ];
      
      // Randomly get a pictogram from the set
      function getRandomPictogram() {
        return pictograms[Math.floor(Math.random() * pictograms.length)];
      }
      
      // Merge Game
      function MergeGame() {
        this.grid = [];
        this.score = 0;
      }
      
      // Initialize the game
      MergeGame.prototype.initialize = function() {
        this.grid = [];
        this.score = 0;
        for (let i = 0; i < 16; i++) {
          this.grid.push({ value: null });
        }
      }
      
      // Add a new random pictogram to the grid
      MergeGame.prototype.addRandomPictogram = function() {
        const availableCells = this.grid.filter(cell => cell.value === null);
        if (availableCells.length > 0) {
          const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)];
          randomCell.value = getRandomPictogram();
        }
      }
      
      // Render the grid
      MergeGame.prototype.renderGrid = function() {
        const gridContainer = document.querySelector('.grid');
        gridContainer.innerHTML = '';
        for (let i = 0; i < this.grid.length; i++) {
          const cell = document.createElement('div');
          cell.className = 'cell';
          cell.textContent = this.grid[i].value ? this.grid[i].value : '';
          gridContainer.appendChild(cell);
        }
        const scoreLabel = document.querySelector('.score');
        scoreLabel.textContent = `Score: ${this.score}`;
      }
      
      // Handle swipe gestures
      MergeGame.prototype.handleSwipe = function(direction) {
        let moved = false;
        switch (direction) {
          case 'left':
            moved = this.moveLeft();
            break;
          case 'right':
            moved = this.moveRight();
            break;
          case 'up':
            moved = this.moveUp();
            break;
          case 'down':
            moved = this.moveDown();
            break;
        }
        if (moved) {
          this.addRandomPictogram();
          this.renderGrid();
          if (this.isGameOver()) {
            alert(`Game Over! Your score: ${this.score}`);
            this.initialize();
            this.addRandomPictogram();
            this.renderGrid();
          }
        }
      }
      
      // Move values to the left
      MergeGame.prototype.moveLeft = function() {
        let moved = false;
        for (let row = 0; row < 4; row++) {
          for (let col = 1; col < 4; col++) {
            if (this.grid[row * 4 + col].value !== null) {
              let targetCol = col;
              while (targetCol > 0 && this.grid[row * 4 + targetCol - 1].value === null) {
                targetCol--;
              }
              if (targetCol !== col) {
                this.grid[row * 4 + targetCol].value = this.grid[row * 4 + col].value;
                this.grid[row * 4 + col].value = null;
                moved = true;
              }
            }
          }
        }
        return moved;
      }
      
      // Move values to the right
      MergeGame.prototype.moveRight = function() {
        let moved = false;
        for (let row = 0; row < 4; row++) {
          for (let col = 2; col >= 0; col--) {
            if (this.grid[row * 4 + col].value !== null) {
              let targetCol = col;
              while (targetCol < 3 && this.grid[row * 4 + targetCol + 1].value === null) {
                targetCol++;
              }
              if (targetCol !== col) {
                this.grid[row * 4 + targetCol].value = this.grid[row * 4 + col].value;
                this.grid[row * 4 + col].value = null;
                moved = true;
              }
            }
          }
        }
        return moved;
      }
      
      // Move values up
      MergeGame.prototype.moveUp = function() {
        let moved = false;
        for (let col = 0; col < 4; col++) {
          for (let row = 1; row < 4; row++) {
            if (this.grid[row * 4 + col].value !== null) {
              let targetRow = row;
              while (targetRow > 0 && this.grid[(targetRow - 1) * 4 + col].value === null) {
                targetRow--;
              }
              if (targetRow !== row) {
                this.grid[targetRow * 4 + col].value = this.grid[row * 4 + col].value;
                this.grid[row * 4 + col].value = null;
                moved = true;
              }
            }
          }
        }
        return moved;
      }
      
      // Move values down
      MergeGame.prototype.moveDown = function() {
        let moved = false;
        for (let col = 0; col < 4; col++) {
          for (let row = 2; row >= 0; row--) {
            if (this.grid[row * 4 + col].value !== null) {
              let targetRow = row;
              while (targetRow < 3 && this.grid[(targetRow + 1) * 4 + col].value === null) {
                targetRow++;
              }
              if (targetRow !== row) {
                this.grid[targetRow * 4 + col].value = this.grid[row * 4 + col].value;
                this.grid[row * 4 + col].value = null;
                moved = true;
              }
            }
          }
        }
        return moved;
      }
      
      // Check if the game is over (no more available merges)
      MergeGame.prototype.isGameOver = function() {
        for (let i = 0; i < this.grid.length; i++) {
          if (this.grid[i].value === null) {
            return false;
          }
          if (i % 4 !== 3 && this.grid[i].value === this.grid[i + 1].value) {
            return false;
          }
          if (Math.floor(i / 4) < 3 && this.grid[i].value === this.grid[i + 4].value) {
            return false;
          }
        }
        return true;
      }
      
      // Create a new instance of the game
      const mergeGame = new MergeGame();
      
      // Initialize and render the grid
      mergeGame.initialize();
      mergeGame.addRandomPictogram();
      mergeGame.addRandomPictogram();
      mergeGame.renderGrid();
      
      // Handle touch swipe gestures
      let touchStartX = 0;
      let touchStartY = 0;
      
      function handleTouchStart(event) {
        touchStartX = event.touches[0].clientX;
        touchStartY = event.touches[0].clientY;
      }
      
      function handleTouchEnd(event) {
        const touchEndX = event.changedTouches[0].clientX;
        const touchEndY = event.changedTouches[0].clientY;
        const dx = touchEndX - touchStartX;
        const dy = touchEndY - touchStartY;
        if (Math.abs(dx) > Math.abs(dy)) {
          // Horizontal swipe
          if (dx > 0) {
            mergeGame.handleSwipe('right');
          } else {
            mergeGame.handleSwipe('left');
          }
        } else {
          // Vertical swipe
          if (dy > 0) {
            mergeGame.handleSwipe('down');
          } else {
            mergeGame.handleSwipe('up');
          }
        }
      }
      
      document.addEventListener('touchstart', handleTouchStart, false);
      document.addEventListener('touchend', handleTouchEnd, false);
    </script>
  </body>
</html>
```