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

No:36154

←

Prev Next

→

Merge Game
Developer User16758｜Date and time 24/1/17 1:00:56
Build time 38.161 sec｜Game capacity 10.253KB｜

Script

Sure, I can help you create a simple merge game using JavaScript and HTML. Here's an example implementation:

Merge Game

In this merge game, you can play by swiping or using arrow keys on your smartphone. The goal is to merge cells with the same value to reach the 2048 tile. When two adjacent cells with the same value collide, they merge into one and double their value. The game ends when you can no longer merge any cells. The game board is displayed using HTML `div` elements with appropriate styles. The JavaScript code handles the game logic, including merging cells, generating new cells, updating the score, and checking for a game-over condition. Note that this is a basic implementation and can be customized and improved further based on your specific requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure, I can help you create a simple merge game using JavaScript and HTML. Here's an example implementation:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Merge Game</title>
    <style>
        .cell {
            width: 80px;
            height: 80px;
            font-size: 40px;
            text-align: center;
            line-height: 70px;
            border: 2px solid black;
            margin: 5px;
            background-color: #F2F2F2;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1>Merge Game</h1>

function initializeBoard() {
            for (var i = 0; i < 4; i++) {
                board[i] = [];
                for (var j = 0; j < 4; j++) {
                    board[i][j] = 0;
                }
            }

// Add initial cells
            addNewCell();
            addNewCell();
        }

function addNewCell() {
            var emptyCells = getEmptyCells();

if (emptyCells.length > 0) {
                var randomIndex = Math.floor(Math.random() * emptyCells.length);
                var cell = emptyCells[randomIndex];
                var value = Math.random() < 0.9 ? 2 : 4;
                board[cell[0]][cell[1]] = value;
            }
        }

function getEmptyCells() {
            var emptyCells = [];

for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    if (board[i][j] === 0) {
                        emptyCells.push([i, j]);
                    }
                }
            }

return emptyCells;
        }

function updateBoard() {
            var gameBoard = document.getElementById("gameBoard");
            gameBoard.innerHTML = "";

for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    var cell = document.createElement("div");
                    cell.className = "cell";
                    cell.innerText = board[i][j] !== 0 ? board[i][j].toString() : "";
                    cell.style.backgroundColor = getCellColor(board[i][j]);
                    gameBoard.appendChild(cell);
                }
            }

// Update score
            document.getElementById("score").innerText = "Score: " + score;
        }

function getCellColor(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 "#CDC1B5";
            }
        }

return true; // Game over
        }

function merge(direction) {
            var updated = false;

switch (direction) {
                case "up":
                    for (var j = 0; j < 4; j++) {
                        for (var i = 1; i < 4; i++) {
                            if (board[i][j] !== 0) {
                                for (var k = i - 1; k >= 0; k--) {
                                    if (board[k][j] === 0) {
                                        board[k][j] = board[k + 1][j];
                                        board[k + 1][j] = 0;
                                        updated = true;
                                    } else if (board[k][j] === board[k + 1][j]) {
                                        board[k][j] += board[k + 1][j];
                                        score += board[k][j];
                                        board[k + 1][j] = 0;
                                        updated = true;
                                        break;
                                    } else {
                                        break;
                                    }
                                }
                            }
                        }
                    }
                    break;
                case "down":
                    for (var j = 0; j < 4; j++) {
                        for (var i = 2; i >= 0; i--) {
                            if (board[i][j] !== 0) {
                                for (var k = i + 1; k < 4; k++) {
                                    if (board[k][j] === 0) {
                                        board[k][j] = board[k - 1][j];
                                        board[k - 1][j] = 0;
                                        updated = true;
                                    } else if (board[k][j] === board[k - 1][j]) {
                                        board[k][j] += board[k - 1][j];
                                        score += board[k][j];
                                        board[k - 1][j] = 0;
                                        updated = true;
                                        break;
                                    } else {
                                        break;
                                    }
                                }
                            }
                        }
                    }
                    break;
                case "left":
                    for (var i = 0; i < 4; i++) {
                        for (var j = 1; j < 4; j++) {
                            if (board[i][j] !== 0) {
                                for (var k = j - 1; k >= 0; k--) {
                                    if (board[i][k] === 0) {
                                        board[i][k] = board[i][k + 1];
                                        board[i][k + 1] = 0;
                                        updated = true;
                                    } else if (board[i][k] === board[i][k + 1]) {
                                        board[i][k] += board[i][k + 1];
                                        score += board[i][k];
                                        board[i][k + 1] = 0;
                                        updated = true;
                                        break;
                                    } else {
                                        break;
                                    }
                                }
                            }
                        }
                    }
                    break;
                case "right":
                    for (var i = 0; i < 4; i++) {
                        for (var j = 2; j >= 0; j--) {
                            if (board[i][j] !== 0) {
                                for (var k = j + 1; k < 4; k++) {
                                    if (board[i][k] === 0) {
                                        board[i][k] = board[i][k - 1];
                                        board[i][k - 1] = 0;
                                        updated = true;
                                    } else if (board[i][k] === board[i][k - 1]) {
                                        board[i][k] += board[i][k - 1];
                                        score += board[i][k];
                                        board[i][k - 1] = 0;
                                        updated = true;
                                        break;
                                    } else {
                                        break;
                                    }
                                }
                            }
                        }
                    }
                    break;
            }

if (updated) {
                addNewCell();
                updateBoard();

if (checkGameOver()) {
                    alert("Game Over!");
                }
            }
        }

function handleSwipe(direction) {
            merge(direction);
        }

// Event listeners
        window.addEventListener("keydown", function(event) {
            switch (event.key) {
                case "ArrowUp":
                    handleSwipe("up");
                    break;
                case "ArrowDown":
                    handleSwipe("down");
                    break;
                case "ArrowLeft":
                    handleSwipe("left");
                    break;
                case "ArrowRight":
                    handleSwipe("right");
                    break;
            }
        });

// Initialize the game
        initializeBoard();
        updateBoard();
    </script>
</body>
</html>
```

The game board is displayed using HTML `div` elements with appropriate styles. The JavaScript code handles the game logic, including merging cells, generating new cells, updating the score, and checking for a game-over condition.

Note that this is a basic implementation and can be customized and improved further based on your specific requirements.