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

No:18354

←

Prev Next

→

Merge Game
Developer User8110｜Date and time 23/9/28 18:21:01
Build time 92.464 sec｜Game capacity 6.67KB｜

Script

Merge Game

Score: 0

←

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>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      #score {
        font-size: 30px;
        margin-bottom: 10px;
      }
      #board {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
      .cell {
        width: 100px;
        height: 100px;
        margin: 5px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h1>Merge Game</h1>
    
    <div id="score">Score: 0</div>
    
    <div id="board">
      <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>

// Function to generate a random number between 1 and 2
      function generateRandomNumber() {
        return Math.floor(Math.random() * 2) + 1;
      }

// Function to generate a new cell with a random value
      function addNewCell() {
        var emptyCells = cells.filter(cell => cell === 0);
        var randomIndex = Math.floor(Math.random() * emptyCells.length);
        cells[emptyCells[randomIndex]] = generateRandomNumber();

renderBoard();
      }

// Function to merge two cells with the same value
      function mergeCells(cellIndex1, cellIndex2) {
        cells[cellIndex1] = cells[cellIndex1] * 2;
        cells[cellIndex2] = 0;
      }

// Function to handle the movement of the cells
      function moveCells(direction) {
        switch(direction) {
          case 'left':
            for (var i = 0; i < 9; i += 3) {
              if (cells[i] !== 0 && cells[i] === cells[i + 1]) {
                mergeCells(i, i + 1);
              }
              if (cells[i + 1] !== 0 && cells[i + 1] === cells[i + 2]) {
                mergeCells(i + 1, i + 2);
              }
              if (cells[i] === 0 && cells[i + 1] !== 0) {
                cells[i] = cells[i + 1];
                cells[i + 1] = 0;
              }
              if (cells[i + 1] === 0 && cells[i + 2] !== 0) {
                cells[i + 1] = cells[i + 2];
                cells[i + 2] = 0;
              }
              if (cells[i] === 0 && cells[i + 1] === 0 && cells[i + 2] !== 0) {
                cells[i] = cells[i + 2];
                cells[i + 2] = 0;
              }
            }
            break;
          case 'right':
            for (var i = 0; i < 9; i += 3) {
              if (cells[i + 2] !== 0 && cells[i + 2] === cells[i + 1]) {
                mergeCells(i + 2, i + 1);
              }
              if (cells[i + 1] !== 0 && cells[i + 1] === cells[i]) {
                mergeCells(i + 1, i);
              }
              if (cells[i + 2] === 0 && cells[i + 1] !== 0) {
                cells[i + 2] = cells[i + 1];
                cells[i + 1] = 0;
              }
              if (cells[i + 1] === 0 && cells[i] !== 0) {
                cells[i + 1] = cells[i];
                cells[i] = 0;
              }
              if (cells[i + 2] === 0 && cells[i + 1] === 0 && cells[i] !== 0) {
                cells[i + 2] = cells[i];
                cells[i] = 0;
              }
            }
            break;
          case 'up':
            for (var i = 0; i < 3; i++) {
              if (cells[i] !== 0 && cells[i] === cells[i + 3]) {
                mergeCells(i, i + 3);
              }
              if (cells[i + 3] !== 0 && cells[i + 3] === cells[i + 6]) {
                mergeCells(i + 3, i + 6);
              }
              if (cells[i] === 0 && cells[i + 3] !== 0) {
                cells[i] = cells[i + 3];
                cells[i + 3] = 0;
              }
              if (cells[i + 3] === 0 && cells[i + 6] !== 0) {
                cells[i + 3] = cells[i + 6];
                cells[i + 6] = 0;
              }
              if (cells[i] === 0 && cells[i + 3] === 0 && cells[i + 6] !== 0) {
                cells[i] = cells[i + 6];
                cells[i + 6] = 0;
              }
            }
            break;
          case 'down':
            for (var i = 0; i < 3; i++) {
              if (cells[i + 6] !== 0 && cells[i + 6] === cells[i + 3]) {
                mergeCells(i + 6, i + 3);
              }
              if (cells[i + 3] !== 0 && cells[i + 3] === cells[i]) {
                mergeCells(i + 3, i);
              }
              if (cells[i + 6] === 0 && cells[i + 3] !== 0) {
                cells[i + 6] = cells[i + 3];
                cells[i + 3] = 0;
              }
              if (cells[i + 3] === 0 && cells[i] !== 0) {
                cells[i + 3] = cells[i];
                cells[i] = 0;
              }
              if (cells[i + 6] === 0 && cells[i + 3] === 0 && cells[i] !== 0) {
                cells[i + 6] = cells[i];
                cells[i] = 0;
              }
            }
            break;
        }

addNewCell();
      }

// Function to render the board
      function renderBoard() {
        var boardElement = document.getElementById('board');
        boardElement.innerHTML = '';

for (var i = 0; i < cells.length; i++) {
          var cellValue = cells[i] !== 0 ? cells[i] : '';
          var cellElement = document.createElement('div');
          cellElement.classList.add('cell');
          cellElement.textContent = cellValue;
          boardElement.appendChild(cellElement);
        }
        
        var scoreElement = document.getElementById('score');
        scoreElement.textContent = 'Score: ' + calculateScore();
      }
      
      // Function to calculate the score as the sum of all cell values
      function calculateScore() {
        return cells.reduce((total, cell) => total + cell, 0);
      }

// Initialization function
      function init() {
        addNewCell();
        addNewCell();
      }

// Event listener to handle the arrow key presses
      document.addEventListener('keydown', function(event) {
        event.preventDefault();
        if (event.keyCode === 37) {
          moveCells('left');
        } else if (event.keyCode === 38) {
          moveCells('up');
        } else if (event.keyCode === 39) {
          moveCells('right');
        } else if (event.keyCode === 40) {
          moveCells('down');
        }
      });

// Start the game
      init();
    </script>
  </body>
</html>