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

No:12258

←

Prev Next

→

Merge Game
Developer User5036｜Date and time 23/8/14 16:30:59
Build time 31.104 sec｜Game capacity 4.003KB｜

Script

Merge Game

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Merge Game</title>
    <style>
        body {
            text-align: center;
        }

#container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            padding: 10px;
        }

.box {
            background-color: aqua;
            width: 80px;
            height: 80px;
            border-radius: 5px;
            margin: 5px;
        }

.score {
            margin-top: 20px;
        }

button {
            font-size: 20px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>Merge Game</h1>
    <div id="container"></div>
    <p class="score">Score: <span id="score">0</span></p>
    <button onclick="startGame()">Start Game</button>

// Pictograms representing different numbers
        const pictograms = {
            2: '🌟',
            4: '💥',
            8: '🔥',
            16: '⭐️',
            32: '🌞',
            64: '🌈',
            128: '🌺',
            256: '🍕',
            512: '🚗',
            1024: '🏆',
            2048: '🎉',
        };

// Generate a random number (either 2 or 4)
        function generateRandomNumber() {
            return Math.random() < 0.5 ? 2 : 4;
        }

// Create a new box with a random number
        function createBox() {
            let box = document.createElement('div');
            box.className = 'box';
            box.innerHTML = pictograms[generateRandomNumber()];
            container.appendChild(box);
        }

// Start the game
        function startGame() {
            container.innerHTML = '';
            score = 0;
            updateScore();
            createBox();
            createBox();
        }

// Handle merging of boxes with the same number
        function mergeBoxes() {
            let boxes = document.getElementsByClassName('box');
            
            for (let i = 0; i < boxes.length - 1; i++) {
                let currentBox = boxes[i];
                let nextBox = boxes[i + 1];

if (currentBox.innerHTML === nextBox.innerHTML) {
                    let currentValue = parseInt(currentBox.innerHTML);
                    let mergedValue = currentValue * 2;
                    
                    currentBox.innerHTML = pictograms[mergedValue];
                    nextBox.remove();

score += mergedValue;
                    updateScore();
                }
            }
        }

// Move the boxes to the left
        function moveLeft() {
            let boxes = document.getElementsByClassName('box');
            let moved = false;

for (let i = 0; i < boxes.length; i++) {
                let box = boxes[i];
                let prevBox = boxes[i - 1];

if (prevBox) {
                    if (prevBox.innerHTML === box.innerHTML) {
                        continue;
                    }

let emptySpace = false;
                    if (!prevBox.innerHTML) {
                        emptySpace = true;
                    }

if (emptySpace || prevBox !== box.previousElementSibling) {
                        box.parentNode.insertBefore(box, prevBox);
                        moved = true;
                    }
                }
            }

return moved;
        }

// Handle keyboard events
        document.addEventListener('keyup', function(event) {
            if (event.key === 'ArrowLeft') {
                if (moveLeft()) {
                    mergeBoxes();
                }
            }
        });

// Update the score on the screen
        function updateScore() {
            scoreElement.innerText = score;
        }
    </script>
</body>
</html>