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

No:16049

91

Merge Game
Developer User7101｜Date and time 23/9/15 17:46:50
Build time 71.788 sec｜Game capacity 7.901KB｜

Sure! Here's an example of a simple merge game implemented as a single HTML file, using JavaScript and pictograms. Keep in mind that this is just a basic implementation to give you an idea, and you can add more features and enhancements as desired.

Merge Game

In this game, the objective is to merge the numbers on the board by swiping (keyboard arrows or touch gestures) in the up, down, left, or right direction. The game begins with a 5x5 grid, where each cell is initially filled with the number 2. Swiping in a particular direction will move and merge the numbers accordingly. The game continues until there are no available moves left. Note that the game uses the popular Emoji CSS library (emoji.min.css) to display pictographic representations of the numbers. You may need to include the `emoji.min.css` file in the same directory as this HTML file, or use a CDN to serve it. Feel free to enhance the game by adding additional features such as score tracking, animations, or customizing the emoji representation.

→ 　

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 as a single HTML file, using JavaScript and pictograms. Keep in mind that this is just a basic implementation to give you an idea, and you can add more features and enhancements as desired.

```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji.css/dist/emoji.min.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
        }
        
        h1 {
            margin-top: 50px;
        }
        
        #game-board {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 30px;
        }
        
        .cell {
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ccc;
            font-size: 40px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Merge Game</h1>
    <div id="game-board"></div>
    <script>
        // Game initialization
        const boardSize = 5; // Change this value to modify board size
        let board = [];
        
        function initializeBoard() {
            for (let i = 0; i < boardSize * boardSize; i++) {
                board.push(2); // Start with every cell having a value of 2
            }
        }
        
        // Generate a random empty cell index
        function getRandomEmptyCell() {
            const emptyCells = [];
            for (let i = 0; i < board.length; i++) {
                if (board[i] == 0) {
                    emptyCells.push(i);
                }
            }
            if (emptyCells.length === 0) return -1; // No empty cells remaining
            const randomIndex = Math.floor(Math.random() * emptyCells.length);
            return emptyCells[randomIndex];
        }
        
        // Add a new number (2 or 4) to a random empty cell
        function addNewNumber() {
            const newNumber = Math.random() < 0.9 ? 2 : 4; // 90% chance of 2, 10% chance of 4
            const emptyCellIndex = getRandomEmptyCell();
            if (emptyCellIndex !== -1) {
                board[emptyCellIndex] = newNumber;
            }
        }
        
        // Update the game board
        function updateBoard() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';
            for (let i = 0; i < board.length; i++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.textContent = board[i] ? board[i] : ''; // Display only non-zero values
                gameBoard.appendChild(cell);
            }
        }
        
        // Handle swipe gesture
        function handleSwipe(gesture) {
            if (gesture === 'up' || gesture === 'down') {
                const columnSize = boardSize;
                for (let i = 0; i < columnSize; i++) {
                    const column = [];
                    for (let j = i; j < board.length; j += columnSize) {
                        column.push(board[j]);
                    }
                    
                    const mergedColumn = mergeCells(gesture, column);
                    
                    for (let j = i; j < board.length; j += columnSize) {
                        board[j] = mergedColumn[j - i];
                    }
                }
            } else if (gesture === 'left' || gesture === 'right') {
                for (let i = 0; i < board.length; i += boardSize) {
                    const row = board.slice(i, i + boardSize);
                    const mergedRow = mergeCells(gesture, row);
                    board.splice(i, boardSize, ...mergedRow);
                }
            }
            
            addNewNumber();
            updateBoard();
        }
        
        // Merge cells in a given direction
        function mergeCells(direction, cells) {
            let mergedCells = [];
            if (direction === 'up' || direction === 'left') {
                mergedCells = cells.filter(cell => cell !== 0);
                for (let i = 0; i < mergedCells.length - 1; i++) {
                    if (mergedCells[i] === mergedCells[i + 1]) {
                        mergedCells[i] *= 2;
                        mergedCells.splice(i + 1, 1);
                    }
                }
                while (mergedCells.length < cells.length) {
                    mergedCells.push(0);
                }
            } else if (direction === 'down' || direction === 'right') {
                mergedCells = cells.filter(cell => cell !== 0);
                for (let i = mergedCells.length - 1; i > 0; i--) {
                    if (mergedCells[i] === mergedCells[i - 1]) {
                        mergedCells[i] *= 2;
                        mergedCells.splice(i - 1, 1);
                    }
                }
                while (mergedCells.length < cells.length) {
                    mergedCells.unshift(0);
                }
            }
            return mergedCells;
        }
        
        // Handle keyboard events
        document.addEventListener('keydown', event => {
            if (event.key === 'ArrowUp') {
                handleSwipe('up');
            } else if (event.key === 'ArrowDown') {
                handleSwipe('down');
            } else if (event.key === 'ArrowLeft') {
                handleSwipe('left');
            } else if (event.key === 'ArrowRight') {
                handleSwipe('right');
            }
        });
        
        // Handle swipe events for smartphones
        let initialX = null;
        let initialY = null;
        function handleTouchStart(event) {
            initialX = event.touches[0].clientX;
            initialY = event.touches[0].clientY;
        }
        
        function handleTouchMove(event) {
            if (!initialX || !initialY) {
                return;
            }
        
            const currentX = event.touches[0].clientX;
            const currentY = event.touches[0].clientY;
            const diffX = currentX - initialX;
            const diffY = currentY - initialY;
        
            if (Math.abs(diffX) > Math.abs(diffY)) {
                if (diffX > 0) {
                    handleSwipe('right');
                } else {
                    handleSwipe('left');
                }
            } else {
                if (diffY > 0) {
                    handleSwipe('down');
                } else {
                    handleSwipe('up');
                }
            }
        
            initialX = null;
            initialY = null;
            event.preventDefault();
        }
        
        document.addEventListener('touchstart', handleTouchStart, false);
        document.addEventListener('touchmove', handleTouchMove, false);
        
        // Start the game
        initializeBoard();
        addNewNumber();
        addNewNumber();
        updateBoard();
    </script>
</body>
</html>
```

In this game, the objective is to merge the numbers on the board by swiping (keyboard arrows or touch gestures) in the up, down, left, or right direction. The game begins with a 5x5 grid, where each cell is initially filled with the number 2. Swiping in a particular direction will move and merge the numbers accordingly. The game continues until there are no available moves left.

Note that the game uses the popular Emoji CSS library (emoji.min.css) to display pictographic representations of the numbers. You may need to include the `emoji.min.css` file in the same directory as this HTML file, or use a CDN to serve it.

Feel free to enhance the game by adding additional features such as score tracking, animations, or customizing the emoji representation.