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

No:38248

←

Prev Next

→

Merge Game
Developer User17280｜Date and time 24/1/23 19:31:09
Build time 37.047 sec｜Game capacity 9.425KB｜

Script

Sure! Here's an example of a simple merge game implemented as a single HTML file using JavaScript and pictograms:

Merge Game

Combine pictograms with the same value to merge them and try to reach the highest score!

Score: 0

This implementation showcases a simple merge game where the player combines pictograms with the same value by swiping on their smartphone screen (touch events). The goal is to merge them as much as possible and achieve the highest score. Note that the pictograms used in the code may not render correctly in all browsers or operating systems, so feel free to replace them with appropriate pictograms that are compatible with your target device.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's an example of a simple merge game implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
</head>
<body>
  <div>
    <h1>Merge Game</h1>
    <p>Combine pictograms with the same value to merge them and try to reach the highest score!</p>
    <p id="score">Score: 0</p>
    <button onclick="startGame()">Start</button>
    <div id="gameBoard"></div>
  </div>

// Function to initialize and start the game
    function startGame() {
      const gameBoard = document.getElementById("gameBoard");
      const scoreElem = document.getElementById("score");
      let score = 0;
      let board = [[null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null]];

// Function to update the game board
      function updateBoard() {
        gameBoard.innerHTML = ""; // Clear previous board

// Loop through the board to create pictogram cells
        for (let row = 0; row < board.length; row++) {
          for (let col = 0; col < board[row].length; col++) {
            const cell = board[row][col];
            const pictoCell = document.createElement("div");
            pictoCell.className = "pictogram-cell";
            pictoCell.innerText = cell || "";
            gameBoard.appendChild(pictoCell);
          }
          gameBoard.appendChild(document.createElement("br")); // Add line break between rows
        }
      }

// Function to check if the game is over
      function isGameOver() {
        for (let row = 0; row < board.length; row++) {
          for (let col = 0; col < board[row].length; col++) {
            if (board[row][col] === null || canMerge(row, col)) {
              return false;
            }
          }
        }
        return true;
      }

// Function to check if merging is possible at given coordinates
      function canMerge(row, col) {
        return (
          (row > 0 && board[row - 1][col] === board[row][col]) ||
          (row < board.length - 1 && board[row + 1][col] === board[row][col]) ||
          (col > 0 && board[row][col - 1] === board[row][col]) ||
          (col < board[row].length - 1 && board[row][col + 1] === board[row][col])
        );
      }

// Function to merge cells at given coordinates
      function mergeCells(row1, col1, row2, col2) {
        const value = board[row1][col1] + board[row2][col2];
        score += value.charCodeAt(0);
        board[row1][col1] = value;
        board[row2][col2] = null;
        scoreElem.innerText = "Score: " + score;
      }

// Function to handle swipe moves
      function handleSwipeMove(startX, startY, endX, endY) {
        const dx = endX - startX;
        const dy = endY - startY;

// Determine primary direction of the swipe
        if (Math.abs(dx) > Math.abs(dy)) {
          if (dx > 0) {
            // Swipe right
            for (let row = 0; row < board.length; row++) {
              for (let col = board[row].length - 2; col >= 0; col--) {
                if (board[row][col] !== null) {
                  let nextCol = col + 1;
                  while (nextCol < board[row].length && board[row][nextCol] === null) {
                    nextCol++;
                  }
                  if (nextCol < board[row].length && board[row][col] === board[row][nextCol]) {
                    mergeCells(row, col, row, nextCol);
                  } else if (col !== nextCol - 1) { // Move the cell to the empty position
                    board[row][nextCol - 1] = board[row][col];
                    board[row][col] = null;
                  }
                }
              }
            }
          } else {
            // Swipe left
            for (let row = 0; row < board.length; row++) {
              for (let col = 1; col < board[row].length; col++) {
                if (board[row][col] !== null) {
                  let nextCol = col - 1;
                  while (nextCol >= 0 && board[row][nextCol] === null) {
                    nextCol--;
                  }
                  if (nextCol >= 0 && board[row][col] === board[row][nextCol]) {
                    mergeCells(row, col, row, nextCol);
                  } else if (col !== nextCol + 1) { // Move the cell to the empty position
                    board[row][nextCol + 1] = board[row][col];
                    board[row][col] = null;
                  }
                }
              }
            }
          }
        } else {
          if (dy > 0) {
            // Swipe down
            for (let col = 0; col < board[0].length; col++) {
              for (let row = board.length - 2; row >= 0; row--) {
                if (board[row][col] !== null) {
                  let nextRow = row + 1;
                  while (nextRow < board.length && board[nextRow][col] === null) {
                    nextRow++;
                  }
                  if (nextRow < board.length && board[row][col] === board[nextRow][col]) {
                    mergeCells(row, col, nextRow, col);
                  } else if (row !== nextRow - 1) { // Move the cell to the empty position
                    board[nextRow - 1][col] = board[row][col];
                    board[row][col] = null;
                  }
                }
              }
            }
          } else {
            // Swipe up
            for (let col = 0; col < board[0].length; col++) {
              for (let row = 1; row < board.length; row++) {
                if (board[row][col] !== null) {
                  let nextRow = row - 1;
                  while (nextRow >= 0 && board[nextRow][col] === null) {
                    nextRow--;
                  }
                  if (nextRow >= 0 && board[row][col] === board[nextRow][col]) {
                    mergeCells(row, col, nextRow, col);
                  } else if (row !== nextRow + 1) { // Move the cell to the empty position
                    board[nextRow + 1][col] = board[row][col];
                    board[row][col] = null;
                  }
                }
              }
            }
          }
        }

generateNewPictogram(); // Generate new random pictogram after each move

updateBoard(); // Update the game board
        if (isGameOver()) {
          alert("Game over! Final score: " + score);
        }
      }

// Function to handle touch or mouse events
      function handleTouchEvent(event) {
        event.preventDefault();
        const touch = event.changedTouches[0];
        const cellSize = gameBoard.offsetWidth / board[0].length;
        const startX = Math.floor(touch.clientX / cellSize);
        const startY = Math.floor(touch.clientY / cellSize);

function handleMove(event) {
          event.preventDefault();
          const touchMove = event.changedTouches[0];
          const endX = Math.floor(touchMove.clientX / cellSize);
          const endY = Math.floor(touchMove.clientY / cellSize);
          handleSwipeMove(startX, startY, endX, endY);
        }

function handleEnd(event) {
          updateBoard(); // Update the game board
          if (isGameOver()) {
            alert("Game over! Final score: " + score);
          }
          document.removeEventListener("touchmove", handleMove);
          document.removeEventListener("touchend", handleEnd);
        }

document.addEventListener("touchmove", handleMove);
        document.addEventListener("touchend", handleEnd);
      }

// Function to generate a new random pictogram on the game board
      function generateNewPictogram() {
        const availableCells = [];
        for (let row = 0; row < board.length; row++) {
          for (let col = 0; col < board[row].length; col++) {
            if (board[row][col] === null) {
              availableCells.push({ row: row, col: col });
            }
          }
        }
        if (availableCells.length === 0) return;
        const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)];
        board[randomCell.row][randomCell.col] = generatePictogram();
      }

// Clear the existing game board and start a new game
      board = [[null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null]];
      score = 0;
      scoreElem.innerText = "Score: " + score;
      updateBoard();

// Bind touch event to handle swipe moves
      gameBoard.addEventListener("touchstart", handleTouchEvent);
    }
  </script>
</body>
</html>
```