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

No:14396

←

Prev Next

→

Merge Game
Developer User6095｜Date and time 23/9/1 23:03:58
Build time 74.31 sec｜Game capacity 7.933KB｜

Script

Merge Game

←

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 game board and initial state
    var board = {
      size: 4,
      cells: []
    };
    
    var score = 0;
    
    // Initialize the game board after the page is loaded
    window.onload = function() {
      createBoard();
      generateNewTile();
      generateNewTile();
      updateBoard();
    };
    
    // Function to generate a new random tile
    function generateNewTile() {
      var emptyCells = getEmptyCells();
      if (emptyCells.length > 0) {
        var randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
        var randomNumber = Math.random() < 0.9 ? 2 : 4;
        board.cells[randomCell.row][randomCell.column] = randomNumber;
      }
    }
    
    // Function to create the initial game board
    function createBoard() {
      for (var i = 0; i < board.size; i++) {
        board.cells[i] = [];
        for (var j = 0; j < board.size; j++) {
          board.cells[i][j] = 0;
        }
      }
    }
    
    // Function to get the empty cells on the board
    function getEmptyCells() {
      var emptyCells = [];
      for (var i = 0; i < board.size; i++) {
        for (var j = 0; j < board.size; j++) {
          if (board.cells[i][j] === 0) {
            emptyCells.push({row: i, column: j});
          }
        }
      }
      return emptyCells;
    }
    
    // Function to update the game board after each move
    function updateBoard() {
      var boardElement = document.getElementById("board");
      boardElement.innerHTML = "";
      
      for (var i = 0; i < board.size; i++) {
        for (var j = 0; j < board.size; j++) {
          var cellValue = board.cells[i][j];
          var cellElement = document.createElement("div");
          cellElement.classList.add("cell");
          cellElement.innerHTML = cellValue !== 0 ? cellValue : "";
          boardElement.appendChild(cellElement);
        }
      }
      
      document.getElementById("score").innerHTML = "Score: " + score;
    }
    
    // Function to handle the swipe events for merging tiles
    function handleSwipe(swipeDirection) {
      var moved = false;
      
      if (swipeDirection === "up") {
        moved = moveUp();
      } else if (swipeDirection === "down") {
        moved = moveDown();
      } else if (swipeDirection === "left") {
        moved = moveLeft();
      } else if (swipeDirection === "right") {
        moved = moveRight();
      }
      
      if (moved) {
        generateNewTile();
        updateBoard();
        checkGameOver();
      }
    }
    
    // Function to move tiles up
    function moveUp() {
      var moved = false;
      for (var j = 0; j < board.size; j++) {
        for (var i = 1; i < board.size; i++) {
          var currentValue = board.cells[i][j];
          if (currentValue !== 0) {
            var row = i;
            while (row > 0 && board.cells[row - 1][j] === 0) {
              board.cells[row][j] = 0;
              board.cells[row - 1][j] = currentValue;
              row--;
              moved = true;
            }
            if (row > 0 && board.cells[row - 1][j] === currentValue) {
              board.cells[row][j] = 0;
              board.cells[row - 1][j] = currentValue * 2;
              score += currentValue * 2;
              row--;
              moved = true;
            }
          }
        }
      }
      
      return moved;
    }
    
    // Function to move tiles down
    function moveDown() {
      var moved = false;
      for (var j = 0; j < board.size; j++) {
        for (var i = board.size - 2; i >= 0; i--) {
          var currentValue = board.cells[i][j];
          if (currentValue !== 0) {
            var row = i;
            while (row < board.size - 1 && board.cells[row + 1][j] === 0) {
              board.cells[row][j] = 0;
              board.cells[row + 1][j] = currentValue;
              row++;
              moved = true;
            }
            if (row < board.size - 1 && board.cells[row + 1][j] === currentValue) {
              board.cells[row][j] = 0;
              board.cells[row + 1][j] = currentValue * 2;
              score += currentValue * 2;
              row++;
              moved = true;
            }
          }
        }
      }
      
      return moved;
    }
    
    // Function to move tiles left
    function moveLeft() {
      var moved = false;
      for (var i = 0; i < board.size; i++) {
        for (var j = 1; j < board.size; j++) {
          var currentValue = board.cells[i][j];
          if (currentValue !== 0) {
            var column = j;
            while (column > 0 && board.cells[i][column - 1] === 0) {
              board.cells[i][column] = 0;
              board.cells[i][column - 1] = currentValue;
              column--;
              moved = true;
            }
            if (column > 0 && board.cells[i][column - 1] === currentValue) {
              board.cells[i][column] = 0;
              board.cells[i][column - 1] = currentValue * 2;
              score += currentValue * 2;
              column--;
              moved = true;
            }
          }
        }
      }
      
      return moved;
    }
    
    // Function to move tiles right
    function moveRight() {
      var moved = false;
      for (var i = 0; i < board.size; i++) {
        for (var j = board.size - 2; j >= 0; j--) {
          var currentValue = board.cells[i][j];
          if (currentValue !== 0) {
            var column = j;
            while (column < board.size - 1 && board.cells[i][column + 1] === 0) {
              board.cells[i][column] = 0;
              board.cells[i][column + 1] = currentValue;
              column++;
              moved = true;
            }
            if (column < board.size - 1 && board.cells[i][column + 1] === currentValue) {
              board.cells[i][column] = 0;
              board.cells[i][column + 1] = currentValue * 2;
              score += currentValue * 2;
              column++;
              moved = true;
            }
          }
        }
      }
      
      return moved;
    }
    
    // Function to check if the game is over
    function checkGameOver() {
      if (getEmptyCells().length === 0) {
        var gameOverMsg = "Game Over!\nYour score: " + score;
        alert(gameOverMsg);
      }
    }
  </script>
  
  <style>
    #board {
      display: flex;
      flex-wrap: wrap;
      width: 200px;
      height: 200px;
      margin: 0 auto;
      border: 1px solid black;
    }
    
    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 48px;
      height: 48px;
      font-size: 24px;
      background-color: lightgray;
      margin: 2px;
    }
    
    #score {
      text-align: center;
      margin-top: 16px;
    }
  </style>
  
  <h1>Merge Game</h1>
  <div id="board"></div>
  <div id="score"></div>
  
  <script>
    // Handle swipe events for smartphone operation
    var xDown = null;
    var yDown = null;
    
    function handleTouchStart(event) {
      xDown = event.touches[0].clientX;
      yDown = event.touches[0].clientY;
    }
    
    function handleTouchMove(event) {
      if (!xDown || !yDown) {
        return;
      }
      
      var xUp = event.touches[0].clientX;
      var yUp = event.touches[0].clientY;
      
      var xDiff = xDown - xUp;
      var yDiff = yDown - yUp;
      
      if (Math.abs(xDiff) > Math.abs(yDiff)) {
        if (xDiff > 0) {
          handleSwipe("left");
        } else {
          handleSwipe("right");
        }
      } else {
        if (yDiff > 0) {
          handleSwipe("up");
        } else {
          handleSwipe("down");
        }
      }
      
      xDown = null;
      yDown = null;
    }
    
    document.addEventListener("touchstart", handleTouchStart, false);
    document.addEventListener("touchmove", handleTouchMove, false);
  </script>
</body>
</html>