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

No:39531

136

Merge Game
Developer User12900｜Date and time 24/1/28 19:55:02
Build time 30.913 sec｜Game capacity 8.06KB｜

Sure, here's an example of a simple merge game implemented in a single HTML file using JavaScript and pictograms:

Merge Game

This game is played by using the arrow keys on a smartphone to merge identical cells. The goal is to reach the highest possible number on the board by merging cells. The game will end when there are no more possible moves. The game over message will be displayed at the top of the page.

→ 　

0　

0　

　
　
　
　

[PR]現在の売れ筋ゲームランキング

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

(C)2023 HisashiApp

Sure, here's an example of a simple merge game implemented in a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Merge Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            max-width: 300px;
            margin: 0 auto;
            margin-top: 20px;
        }
        
        .cell {
            background-color: #eee;
            border-radius: 5px;
            padding: 10px;
            text-align: center;
        }
        
        .game-over {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #f00;
        }
    </style>
</head>
<body>
    <h1>Merge Game</h1>
    <div class="grid"></div>
    <div class="game-over" id="gameOver"></div>

<script>
    // Game board
    const board = [
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0]
    ];
    
    // Initialize game
    function initGame() {
        addRandomCell();
        drawGrid();
        document.addEventListener('keydown', handleKey);
    }
    
    // Add a random cell with a value of 2
    function addRandomCell() {
        const emptyCells = getEmptyCells();
        if (emptyCells.length > 0) {
            const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
            board[randomCell.row][randomCell.col] = 2;
        }
    }
    
    // Get all the empty cells on the board
    function getEmptyCells() {
        const emptyCells = [];
        for (let row = 0; row < 4; row++) {
            for (let col = 0; col < 4; col++) {
                if (board[row][col] === 0) {
                    emptyCells.push({ row, col });
                }
            }
        }
        return emptyCells;
    }
    
    // Draw the grid on the page
    function drawGrid() {
        const gridElement = document.querySelector('.grid');
        gridElement.innerHTML = '';
        board.forEach(row => {
            row.forEach(cell => {
                const cellElement = document.createElement('div');
                cellElement.classList.add('cell');
                cellElement.innerText = cell === 0 ? '' : cell;
                gridElement.appendChild(cellElement);
            });
        });
    }
    
    // Handle keyboard input
    function handleKey(event) {
        if (!isGameOver()) {
            let moved = false;
            switch (event.key) {
                case 'ArrowUp':
                    moved = moveUp();
                    break;
                case 'ArrowDown':
                    moved = moveDown();
                    break;
                case 'ArrowLeft':
                    moved = moveLeft();
                    break;
                case 'ArrowRight':
                    moved = moveRight();
                    break;
            }
            
            if (moved) {
                addRandomCell();
                drawGrid();
                if (isGameOver()) {
                    document.removeEventListener('keydown', handleKey);
                    document.getElementById('gameOver').innerText = 'Game Over!';
                }
            }
        }
    }
    
    // Move cells up
    function moveUp() {
        let moved = false;
        for (let col = 0; col < 4; col++) {
            for (let row = 1; row < 4; row++) {
                if (board[row][col] !== 0) {
                    let currentRow = row;
                    let newRow = row - 1;
                    while (newRow >= 0 && board[newRow][col] === 0) {
                        board[newRow][col] = board[currentRow][col];
                        board[currentRow][col] = 0;
                        currentRow--;
                        newRow--;
                        moved = true;
                    }
                    if (newRow >= 0 && board[newRow][col] === board[row][col]) {
                        board[newRow][col] *= 2;
                        board[row][col] = 0;
                        moved = true;
                    }
                }
            }
        }
        return moved;
    }
    
    // Move cells down
    function moveDown() {
        let moved = false;
        for (let col = 0; col < 4; col++) {
            for (let row = 2; row >= 0; row--) {
                if (board[row][col] !== 0) {
                    let currentRow = row;
                    let newRow = row + 1;
                    while (newRow < 4 && board[newRow][col] === 0) {
                        board[newRow][col] = board[currentRow][col];
                        board[currentRow][col] = 0;
                        currentRow++;
                        newRow++;
                        moved = true;
                    }
                    if (newRow < 4 && board[newRow][col] === board[row][col]) {
                        board[newRow][col] *= 2;
                        board[row][col] = 0;
                        moved = true;
                    }
                }
            }
        }
        return moved;
    }
    
    // Move cells left
    function moveLeft() {
        let moved = false;
        for (let row = 0; row < 4; row++) {
            for (let col = 1; col < 4; col++) {
                if (board[row][col] !== 0) {
                    let currentCol = col;
                    let newCol = col - 1;
                    while (newCol >= 0 && board[row][newCol] === 0) {
                        board[row][newCol] = board[row][currentCol];
                        board[row][currentCol] = 0;
                        currentCol--;
                        newCol--;
                        moved = true;
                    }
                    if (newCol >= 0 && board[row][newCol] === board[row][col]) {
                        board[row][newCol] *= 2;
                        board[row][col] = 0;
                        moved = true;
                    }
                }
            }
        }
        return moved;
    }
    
    // Move cells right
    function moveRight() {
        let moved = false;
        for (let row = 0; row < 4; row++) {
            for (let col = 2; col >= 0; col--) {
                if (board[row][col] !== 0) {
                    let currentCol = col;
                    let newCol = col + 1;
                    while (newCol < 4 && board[row][newCol] === 0) {
                        board[row][newCol] = board[row][currentCol];
                        board[row][currentCol] = 0;
                        currentCol++;
                        newCol++;
                        moved = true;
                    }
                    if (newCol < 4 && board[row][newCol] === board[row][col]) {
                        board[row][newCol] *= 2;
                        board[row][col] = 0;
                        moved = true;
                    }
                }
            }
        }
        return moved;
    }
    
    // Check if the game is over
    function isGameOver() {
        for (let row = 0; row < 4; row++) {
            for (let col = 0; col < 4; col++) {
                if (board[row][col] === 0 ||
                    (row > 0 && board[row][col] === board[row - 1][col]) ||
                    (row < 3 && board[row][col] === board[row + 1][col]) ||
                    (col > 0 && board[row][col] === board[row][col - 1]) ||
                    (col < 3 && board[row][col] === board[row][col + 1])) {
                    return false;
                }
            }
        }
        return true;
    }
    
    // Start the game
    initGame();
</script>

</body>
</html>
```

This game is played by using the arrow keys on a smartphone to merge identical cells. The goal is to reach the highest possible number on the board by merging cells. The game will end when there are no more possible moves. The game over message will be displayed at the top of the page.