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

No:18485

←

Prev Next

→

Merge Game
Developer Burak Arda Bulut｜Date and time 23/9/29 17:03:24
Build time 112.659 sec｜Game capacity 8.89KB｜

Script

Sure, here's an example of a simple Merge Game implemented as a single HTML file using JavaScript and enclosed in script tags:

Merge Game

Score: 0

To play the game, simply open the HTML file in a web browser, and you can move the tiles on the game board using the arrow keys. The objective is to merge tiles with the same value and reach the highest possible score. The game will continue until there are no more available moves or the game board is full.

←

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 enclosed in script tags:

```html
<!DOCTYPE html>
<html>

<head>
  <title>Merge Game</title>
  <style>
    #game-board {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }

.tile {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

.tile span {
      font-size: 40px;
    }

.game-over {
      font-size: 25px;
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>Merge Game</h1>
  <div id="game-board"></div>
  <p id="score">Score: 0</p>
  <p id="game-over" class="game-over"></p>

// Initialize game variables
    let gameBoard, score, gameOver, start;

// Initialize game board
    function init() {
      gameBoard = [];
      score = 0;
      gameOver = false;
      start = false;

// Create game board
      for (let i = 0; i < BOARD_SIZE; i++) {
        gameBoard[i] = [];
        for (let j = 0; j < BOARD_SIZE; j++) {
          gameBoard[i][j] = null;
        }
      }

// Generate two random initial tiles
      generateRandomTile();
      generateRandomTile();

// Render the game board
      renderGameBoard();
    }

// Generate a random tile (either 2 or 4) at an empty position on the game board
    function generateRandomTile() {
      const randomValue = Math.random() < 0.9 ? 2 : 4;
      const emptyPositions = getEmptyPositions();

if (emptyPositions.length > 0) {
        const randomPosition = emptyPositions[Math.floor(Math.random() * emptyPositions.length)];
        const [row, col] = randomPosition;
        gameBoard[row][col] = randomValue;
      }
    }

// Get all empty positions on the game board
    function getEmptyPositions() {
      const emptyPositions = [];

for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          if (gameBoard[i][j] === null) {
            emptyPositions.push([i, j]);
          }
        }
      }

return emptyPositions;
    }

// Render the game board on the HTML page
    function renderGameBoard() {
      const gameBoardElement = document.getElementById('game-board');
      gameBoardElement.innerHTML = '';

for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          const tileValue = gameBoard[i][j];

const tileElement = document.createElement('div');
          tileElement.className = 'tile';
          if (tileValue) {
            const spanElement = document.createElement('span');
            spanElement.textContent = tileValue;
            tileElement.appendChild(spanElement);
          }

gameBoardElement.appendChild(tileElement);
        }
      }
    }

// Handle key press events for game movement
    function handleKeyPress(event) {
      if (!gameOver && event.keyCode >= 37 && event.keyCode <= 40) {
        event.preventDefault();
        
        const direction = event.keyCode - 37; // 0: left, 1: up, 2: right, 3: down

if (direction === 0 || direction === 2) {
          gameBoard = transposeGameBoard();
        }

const moved = moveTiles(direction);

if (direction === 0 || direction === 2) {
          gameBoard = transposeGameBoard();
        }

if (moved) {
          generateRandomTile();
          renderGameBoard();
        }

if (isGameOver()) {
          gameOver = true;
          document.getElementById('game-over').textContent = 'Game Over!';
        }
      }
    }

// Transpose the game board for handling left/right movements
    function transposeGameBoard() {
      const newGameBoard = [];

for (let i = 0; i < BOARD_SIZE; i++) {
        newGameBoard[i] = [];

for (let j = 0; j < BOARD_SIZE; j++) {
          newGameBoard[i][j] = gameBoard[j][i];
        }
      }

return newGameBoard;
    }

// Move the tiles in the specified direction
    // Return true if any tile is moved, false otherwise
    function moveTiles(direction) {
      let moved = false;

switch (direction) {
        case 0: // Left
          for (let i = 0; i < BOARD_SIZE; i++) {
            for (let j = 1; j < BOARD_SIZE; j++) {
              if (gameBoard[i][j] !== null) {
                let k = j;

while (k > 0 && gameBoard[i][k - 1] === null) {
                  gameBoard[i][k - 1] = gameBoard[i][k];
                  gameBoard[i][k] = null;
                  k--;
                  moved = true;
                }

if (k > 0 && gameBoard[i][k - 1] === gameBoard[i][k]) {
                  gameBoard[i][k - 1] += gameBoard[i][k];
                  gameBoard[i][k] = null;
                  score += gameBoard[i][k - 1];
                  moved = true;
                }
              }
            }
          }
          break;

case 1: // Up
          for (let j = 0; j < BOARD_SIZE; j++) {
            for (let i = 1; i < BOARD_SIZE; i++) {
              if (gameBoard[i][j] !== null) {
                let k = i;

while (k > 0 && gameBoard[k - 1][j] === null) {
                  gameBoard[k - 1][j] = gameBoard[k][j];
                  gameBoard[k][j] = null;
                  k--;
                  moved = true;
                }

if (k > 0 && gameBoard[k - 1][j] === gameBoard[k][j]) {
                  gameBoard[k - 1][j] += gameBoard[k][j];
                  gameBoard[k][j] = null;
                  score += gameBoard[k - 1][j];
                  moved = true;
                }
              }
            }
          }
          break;

case 2: // Right
          for (let i = 0; i < BOARD_SIZE; i++) {
            for (let j = BOARD_SIZE - 2; j >= 0; j--) {
              if (gameBoard[i][j] !== null) {
                let k = j;

while (k < BOARD_SIZE - 1 && gameBoard[i][k + 1] === null) {
                  gameBoard[i][k + 1] = gameBoard[i][k];
                  gameBoard[i][k] = null;
                  k++;
                  moved = true;
                }

if (k < BOARD_SIZE - 1 && gameBoard[i][k + 1] === gameBoard[i][k]) {
                  gameBoard[i][k + 1] += gameBoard[i][k];
                  gameBoard[i][k] = null;
                  score += gameBoard[i][k + 1];
                  moved = true;
                }
              }
            }
          }
          break;

case 3: // Down
          for (let j = 0; j < BOARD_SIZE; j++) {
            for (let i = BOARD_SIZE - 2; i >= 0; i--) {
              if (gameBoard[i][j] !== null) {
                let k = i;

while (k < BOARD_SIZE - 1 && gameBoard[k + 1][j] === null) {
                  gameBoard[k + 1][j] = gameBoard[k][j];
                  gameBoard[k][j] = null;
                  k++;
                  moved = true;
                }

if (k < BOARD_SIZE - 1 && gameBoard[k + 1][j] === gameBoard[k][j]) {
                  gameBoard[k + 1][j] += gameBoard[k][j];
                  gameBoard[k][j] = null;
                  score += gameBoard[k + 1][j];
                  moved = true;
                }
              }
            }
          }
          break;

default:
          break;
      }

document.getElementById('score').textContent = `Score: ${score}`;
      return moved;
    }

// Check if the game is over (no more available moves)
    function isGameOver() {
      return getEmptyPositions().length === 0 && !canTilesMove();
    }

// Check if any tiles can still be moved
    function canTilesMove() {
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          if (i - 1 >= 0 && gameBoard[i][j] === gameBoard[i - 1][j]) {
            return true;
          }

if (i + 1 < BOARD_SIZE && gameBoard[i][j] === gameBoard[i + 1][j]) {
            return true;
          }

if (j - 1 >= 0 && gameBoard[i][j] === gameBoard[i][j - 1]) {
            return true;
          }

if (j + 1 < BOARD_SIZE && gameBoard[i][j] === gameBoard[i][j + 1]) {
            return true;
          }
        }
      }

return false;
    }

// Start the game
    init();

// Event listeners
    document.addEventListener('keydown', handleKeyPress);
  </script>
</body>

</html>
```