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

No:21053

←

Prev Next

→

Merge Game
Developer User9315｜Date and time 23/10/13 4:58:32
Build time 198.535 sec｜Game capacity 9.229KB｜

Script

Sure! Here's an example of a simple merge game implemented as a single HTML file with JavaScript:

Merge Game

This implementation creates a 4x4 game board where you can swipe or use arrow keys to merge tiles. The goal is to reach the 2048 tile. Each time you make a move, a new tile with value 2 or 4 will appear randomly on the board. When no more moves are possible, the game ends and the final score is displayed.

←

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 with JavaScript:

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

#game-board {
            margin-top: 50px;
        }

.tile {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 2px solid gray;
            margin: 5px;
            font-size: 24px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <h1>Merge Game</h1>
    <div id="game-board"></div>

var score = 0;

// Create a random tile on the board
        function createRandomTile() {
            var row = Math.floor(Math.random() * 4);
            var col = Math.floor(Math.random() * 4);

// Check if tile already exists in the randomly chosen position
            if (board[row][col] === null) {
                var newValue = Math.random() < 0.8 ? 2 : 4;
                board[row][col] = newValue;
            } else {
                createRandomTile(); // Try again
            }
        }

// Update the game board
        function updateBoard() {
            var gameBoard = document.getElementById("game-board");
            gameBoard.innerHTML = "";

for (var row = 0; row < 4; row++) {
                for (var col = 0; col < 4; col++) {
                    var tile = document.createElement("div");
                    tile.className = "tile";

if (board[row][col] !== null) {
                        tile.textContent = board[row][col];
                        tile.style.backgroundColor = getTileColor(board[row][col]);
                    }

gameBoard.appendChild(tile);
                }
                gameBoard.appendChild(document.createElement("br"));
            }
        }

// Get tile color based on its value
        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 "#eee4da";
            }
        }

// Merge tiles in a row
        function mergeTiles(row) {
            for (var i = 3; i >= 1; i--) {
                if (board[row][i] !== null && board[row][i] === board[row][i - 1]) {
                    board[row][i] *= 2;
                    score += board[row][i];
                    board[row][i - 1] = null;
                }
            }
        }

// Handle swipe events
        var touchStartX, touchStartY;
        var touchEndX, touchEndY;

function handleSwipe() {
            var dx = touchEndX - touchStartX;
            var dy = touchEndY - touchStartY;

if (Math.abs(dx) > Math.abs(dy)) {
                // Horizontal swipe
                if (dx > 0) {
                    moveRight();
                } else {
                    moveLeft();
                }
            } else {
                // Vertical swipe
                if (dy > 0) {
                    moveDown();
                } else {
                    moveUp();
                }
            }

updateBoard();
            checkGameOver();
        }

// Handle touch start event
        function onTouchStart(event) {
            touchStartX = event.touches[0].clientX;
            touchStartY = event.touches[0].clientY;
        }

// Handle touch end event
        function onTouchEnd(event) {
            touchEndX = event.changedTouches[0].clientX;
            touchEndY = event.changedTouches[0].clientY;

handleSwipe();
        }

// Move tiles to the left
        function moveLeft() {
            for (var row = 0; row < 4; row++) {
                mergeTiles(row);

// Move tiles to the right
        function moveRight() {
            for (var row = 0; row < 4; row++) {
                // Reverse the row for merging
                board[row].reverse();
                mergeTiles(row);

var newRow = [];
                for (var col = 0; col < 4; col++) {
                    newRow.unshift(board[row][col]);
                }
                board[row] = newRow;
            }
        }

// Move tiles up
        function moveUp() {
            for (var col = 0; col < 4; col++) {
                var column = [];
                for (var row = 0; row < 4; row++) {
                    column.push(board[row][col]);
                }

mergeTiles(col);

for (var k = 0; k < 4; k++) {
                    board[k][col] = newColumn[k];
                }
            }
        }

// Move tiles down
        function moveDown() {
            for (var col = 0; col < 4; col++) {
                var column = [];
                for (var row = 0; row < 4; row++) {
                    column.push(board[row][col]);
                }

// Reverse the column for merging
                column.reverse();
                mergeTiles(col);

var newColumn = [];
                for (var i = 0; i < 4; i++) {
                    newColumn.unshift(column[i]);
                }

for (var j = 0; j < 4; j++) {
                    board[j][col] = newColumn[j];
                }
            }
        }

// Check if the game is over
        function checkGameOver() {
            for (var row = 0; row < 4; row++) {
                for (var col = 0; col < 4; col++) {
                    if (board[row][col] === null) {
                        return; // At least one empty tile, game is not over
                    }

if (row !== 3 && board[row][col] === board[row + 1][col]) {
                        return; // At least one merge possible, game is not over
                    }

if (col !== 3 && board[row][col] === board[row][col + 1]) {
                        return; // At least one merge possible, game is not over
                    }
                }
            }

// No empty tiles and no merges possible, game over
            alert("Game Over! Score: " + score);
            resetGame();
        }

// Reset the game
        function resetGame() {
            board = [];
            for (var i = 0; i < 4; i++) {
                board.push([null, null, null, null]);
            }

score = 0;
            createRandomTile();
            createRandomTile();
            updateBoard();
        }

// Initialize game
        createRandomTile();
        createRandomTile();
        updateBoard();

// Event listeners
        document.addEventListener("keydown", function (event) {
            if (event.key === "ArrowUp") {
                moveUp();
            } else if (event.key === "ArrowDown") {
                moveDown();
            } else if (event.key === "ArrowLeft") {
                moveLeft();
            } else if (event.key === "ArrowRight") {
                moveRight();
            }

updateBoard();
            checkGameOver();
        });

document.addEventListener("touchstart", onTouchStart);
        document.addEventListener("touchend", onTouchEnd);
    </script>
</body>
</html>
```