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

No:24996

←

Prev Next

→

Merge Game
Developer User12075｜Date and time 23/11/15 20:52:51
Build time 223.564 sec｜Game capacity 9.341KB｜

Script

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

Merge Game

This implementation of the merge game is designed to be played on a smartphone. The game grid consists of 4x4 cells, and the player can swipe left, right, up, or down to merge matching tiles and reach the 2048 tile. The game ends when there are no more empty spaces and no more possible merges. The score is calculated based on the sum of all tiles on the grid. The UI of the game uses different background colors for different tile values to distinguish them visually. Note: The game doesn't include pictograms but instead uses number values to represent the tiles. You can modify the implementation to include pictograms if desired.

←

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 written in JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Merge Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }

h1 {
            color: #555;
        }

#game-container {
            display: inline-block;
            border: 2px solid #555;
            padding: 10px;
            margin-top: 20px;
        }

.cell {
            width: 75px;
            height: 75px;
            display: inline-block;
            margin: 5px;
            background-color: #f2f2f2;
            font-size: 24px;
            text-align: center;
            line-height: 75px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Merge Game</h1>
    <div id="game-container"></div>

// Generate a new tile (2 or 4) at a random empty position
        function generateNewTile() {
            var emptyCells = [];
            for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    if (grid[i][j] === 0) {
                        emptyCells.push({ row: i, col: j });
                    }
                }
            }

if (emptyCells.length > 0) {
                var randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
                grid[randomCell.row][randomCell.col] = Math.random() < 0.9 ? 2 : 4;
            }
        }

// Update the game grid UI
        function updateGridUI() {
            var gameContainer = document.getElementById("game-container");
            gameContainer.innerHTML = "";

for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    var cell = document.createElement("div");
                    cell.className = "cell";
                    cell.innerHTML = grid[i][j] !== 0 ? grid[i][j] : "";

switch (grid[i][j]) {
                        case 0:
                            cell.style.backgroundColor = "#f2f2f2";
                            break;
                        case 2:
                            cell.style.backgroundColor = "#eee4da";
                            break;
                        case 4:
                            cell.style.backgroundColor = "#ede0c8";
                            break;
                        case 8:
                            cell.style.backgroundColor = "#f2b179";
                            break;
                        case 16:
                            cell.style.backgroundColor = "#f59563";
                            break;
                        case 32:
                            cell.style.backgroundColor = "#f67c5f";
                            break;
                        case 64:
                            cell.style.backgroundColor = "#f65e3b";
                            break;
                        case 128:
                            cell.style.backgroundColor = "#edcf72";
                            break;
                        case 256:
                            cell.style.backgroundColor = "#edcc61";
                            break;
                        case 512:
                            cell.style.backgroundColor = "#9c0";
                            break;
                        case 1024:
                            cell.style.backgroundColor = "#33b5e5";
                            break;
                        case 2048:
                            cell.style.backgroundColor = "#09c";
                            break;
                        default:
                            cell.style.backgroundColor = "#ccc0b3";
                            break;
                    }

gameContainer.appendChild(cell);
                }
                gameContainer.appendChild(document.createElement("br"));
            }
        }

// Start the game
        function startGame() {
            generateNewTile();
            generateNewTile();
            updateGridUI();
        }

// Perform the merge operation on the given row or column
        function merge(items) {
            var merged = false;

for (var i = 3; i > 0; i--) {
                if (items[i] === items[i - 1] && items[i] !== 0) {
                    items[i] *= 2;
                    items[i - 1] = 0;
                    merged = true;
                }
            }

return merged;
        }

// Handle keyboard events
        document.onkeydown = function (event) {
            var keyPressed = event.keyCode;

if (![37, 38, 39, 40].includes(keyPressed)) {
                return;
            }

var moved = false;

// Move left
            if (keyPressed === 37) {
                for (var i = 0; i < 4; i++) {
                    var row = grid[i];
                    if (merge(row)) {
                        moved = true;
                    }
                    var newRow = row.filter(item => item !== 0);
                    while (newRow.length < 4) {
                        newRow.push(0);
                    }
                    grid[i] = newRow;
                }
            }

// Move up
            if (keyPressed === 38) {
                for (var j = 0; j < 4; j++) {
                    var column = [grid[0][j], grid[1][j], grid[2][j], grid[3][j]];
                    if (merge(column)) {
                        moved = true;
                    }
                    var newColumn = column.filter(item => item !== 0);
                    while (newColumn.length < 4) {
                        newColumn.push(0);
                    }
                    grid[0][j] = newColumn[0];
                    grid[1][j] = newColumn[1];
                    grid[2][j] = newColumn[2];
                    grid[3][j] = newColumn[3];
                }
            }

// Move right
            if (keyPressed === 39) {
                for (var i = 0; i < 4; i++) {
                    var row = grid[i].slice().reverse();
                    if (merge(row)) {
                        moved = true;
                    }
                    var newRow = row.filter(item => item !== 0);
                    while (newRow.length < 4) {
                        newRow.push(0);
                    }
                    grid[i] = newRow.slice().reverse();
                }
            }

// Move down
            if (keyPressed === 40) {
                for (var j = 0; j < 4; j++) {
                    var column = [grid[0][j], grid[1][j], grid[2][j], grid[3][j]].reverse();
                    if (merge(column)) {
                        moved = true;
                    }
                    var newColumn = column.filter(item => item !== 0);
                    while (newColumn.length < 4) {
                        newColumn.push(0);
                    }
                    grid[0][j] = newColumn[3];
                    grid[1][j] = newColumn[2];
                    grid[2][j] = newColumn[1];
                    grid[3][j] = newColumn[0];
                }
            }

if (moved) {
                generateNewTile();
                updateGridUI();
                checkGameOver();
            }
        }

// Check if the game is over
        function checkGameOver() {
            for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    if (grid[i][j] === 0) {
                        return false;
                    }
                    if (i < 3 && grid[i][j] === grid[i + 1][j]) {
                        return false;
                    }
                    if (j < 3 && grid[i][j] === grid[i][j + 1]) {
                        return false;
                    }
                }
            }

alert("Game Over. Your score: " + calculateScore());
            return true;
        }

// Calculate the current score
        function calculateScore() {
            var score = 0;

for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    score += grid[i][j];
                }
            }

return score;
        }

// Start the game on page load
        window.onload = startGame;
    </script>
</body>
</html>
```

Note: The game doesn't include pictograms but instead uses number values to represent the tiles. You can modify the implementation to include pictograms if desired.