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

No:27890

←

Prev Next

→

Merge Game
Developer User13914｜Date and time 23/12/10 0:14:52
Build time 50.301 sec｜Game capacity 6.003KB｜

Script

Sure, here's a simple example of a merge game implemented as a single HTML file using JavaScript:

Merge Game

Score: 0

In this game, the player can use the arrow keys to merge adjacent tiles with the same number. The goal is to reach the 2048 tile by merging tiles and increasing the score. The game ends when there are no available moves left. The game is displayed as a grid of cells, where each cell represents a tile. The value of each tile is displayed as a number inside the cell. The player can view their score at the top of the page.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure, here's a simple example of a merge game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 10px;
    }

.cell {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      font-size: 32px;
      line-height: 100px;
    }

#board {
      margin-top: 20px;
    }

#score {
      font-size: 24px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Merge Game</h1>
  <div id="board"></div>
  <div id="score">Score: 0</div>

const boardSize = 4;
    let board;
    let score;

function startGame() {
      initializeBoard();
      addListeners();
      updateBoardView();
      score = 0;
      updateScore(score);
    }

function addListeners() {
      document.addEventListener('keydown', handleKeyPress);
    }

function handleKeyPress(event) {
      let direction = '';
      switch (event.key) {
        case 'ArrowUp':
          direction = 'up';
          break;
        case 'ArrowDown':
          direction = 'down';
          break;
        case 'ArrowLeft':
          direction = 'left';
          break;
        case 'ArrowRight':
          direction = 'right';
          break;
      }

if (direction !== '') {
        event.preventDefault();
        moveTiles(direction);
      }
    }

function moveTiles(direction) {
      const oldBoard = JSON.parse(JSON.stringify(board));

switch (direction) {
        case 'up':
          for (let j = 0; j < boardSize; j++) {
            for (let i = 1; i < boardSize; i++) {
              if (board[i][j] !== 0) {
                let row = i - 1;
                while (row >= 0 && board[row][j] === 0) {
                  row--;
                }
                if (row === -1) {
                  board[0][j] = board[i][j];
                  board[i][j] = 0;
                } else if (board[row][j] === board[i][j]) {
                  board[row][j] *= 2;
                  score += board[row][j];
                  board[i][j] = 0;
                } else if (row + 1 !== i) {
                  board[row + 1][j] = board[i][j];
                  board[i][j] = 0;
                }
              }
            }
          }
          break;
        // Implement the other directions (down, left, right) similarly

}

if (!areEqual(oldBoard, board)) {
        placeRandomTile();
        updateBoardView();
        updateScore(score);
        if (!canMove()) {
          alert('Game Over');
        }
      }
    }

const randomIndex = Math.floor(Math.random() * emptyCells.length);
      const { x, y } = emptyCells[randomIndex];
      board[x][y] = Math.random() < 0.9 ? 2 : 4;
    }

function updateBoardView() {
      const boardElement = document.getElementById('board');
      boardElement.innerHTML = '';

for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          const cell = document.createElement('div');
          cell.className = 'cell';
          cell.textContent = board[i][j] !== 0 ? board[i][j] : '';
          cell.style.backgroundColor = getTileColor(board[i][j]);
          boardElement.appendChild(cell);
        }
      }
    }

function getTileColor(value) {
      switch (value) {
        case 2:
          return '#eee4da';
        case 4:
          return '#ede0c8';
        case 8:
          return '#f2b179';
        case 16:
          return '#f59563';
        case 32:
          return '#f67c5f';
        case 64:
          return '#f65e3b';
        case 128:
          return '#edcf72';
        case 256:
          return '#edcc61';
        case 512:
          return '#edc850';
        case 1024:
          return '#edc53f';
        case 2048:
          return '#edc22e';
        default:
          return '#eee';
      }
    }

function updateScore(score) {
      const scoreElement = document.getElementById('score');
      scoreElement.textContent = 'Score: ' + score;
    }

function areEqual(board1, board2) {
      return JSON.stringify(board1) === JSON.stringify(board2);
    }

The game is displayed as a grid of cells, where each cell represents a tile. The value of each tile is displayed as a number inside the cell. The player can view their score at the top of the page.