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

No:32636

←

Prev Next

→

Merge Game
Developer User15470｜Date and time 23/12/31 19:11:00
Build time 85.594 sec｜Game capacity 9.055KB｜

Script

Merge Game - 合并游戏

得分: 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;
            font-family: Arial, sans-serif;
        }

.container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

.block {
            width: 60px;
            height: 60px;
            margin: 10px;
            background-color: #F5F5F5;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            border-radius: 5px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }

.score {
            font-size: 20px;
            margin-top: 20px;
        }

.btn {
            padding: 10px 20px;
            font-size: 18px;
            display: inline-block;
            margin-top: 20px;
            background-color: #4CAF50;
            color: #FFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Merge Game - 合并游戏</h1>
    <div id="game" class="container"></div>
    <div id="score" class="score">得分: 0</div>
    <button id="restart" class="btn">重新开始</button>

// Initialize the game
        function initGame() {
            score = 0;
            gameGrid = [];
            for (var row = 0; row < 4; row++) {
                gameGrid[row] = [];
                for (var col = 0; col < 4; col++) {
                    gameGrid[row][col] = 0;
                }
            }

addNewBlock();
            addNewBlock();

updateUI();
        }

// Generate a random number between min and max (inclusive)
        function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

// Add a new block to the game grid
        function addNewBlock() {
            var emptyCells = [];

for (var row = 0; row < 4; row++) {
                for (var col = 0; col < 4; col++) {
                    if (gameGrid[row][col] === 0) {
                        emptyCells.push({ row: row, col: col });
                    }
                }
            }

if (emptyCells.length > 0) {
                var randomCell = emptyCells[getRandomNumber(0, emptyCells.length - 1)];
                var newValue = Math.random() < 0.9 ? 2 : 4;
                gameGrid[randomCell.row][randomCell.col] = newValue;
            }
        }

// Update the game UI
        function updateUI() {
            var gameContainer = document.getElementById("game");
            gameContainer.innerHTML = "";

for (var row = 0; row < 4; row++) {
                for (var col = 0; col < 4; col++) {
                    var block = document.createElement("div");
                    block.className = "block";
                    block.innerHTML = gameGrid[row][col] !== 0 ? gameGrid[row][col] : "";
                    block.style.backgroundColor = getBlockBackgroundColor(gameGrid[row][col]);
                    gameContainer.appendChild(block);
                }
            }

document.getElementById("score").innerHTML = "得分: " + score;
        }

// Get the background color for a block based on its value
        function getBlockBackgroundColor(value) {
            switch (value) {
                case 0: return "#CDC1B4";
                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 "#3C3A32";
            }
        }

// Check if the game is over (no valid moves)
        function isGameOver() {
            for (var row = 0; row < 4; row++) {
                for (var col = 0; col < 4; col++) {
                    if (gameGrid[row][col] === 0) {
                        return false;
                    }

if (row !== 3 && gameGrid[row][col] === gameGrid[row + 1][col]) {
                        return false;
                    }

if (col !== 3 && gameGrid[row][col] === gameGrid[row][col + 1]) {
                        return false;
                    }
                }
            }

return true;
        }

// Merge the blocks and update the game state
        function mergeBlocks(direction) {
            var moved = false;

if (direction === "up" || direction === "down") {
                for (var col = 0; col < 4; col++) {
                    for (var row = 0; row < 3; row++) {
                        if (gameGrid[row][col] !== 0) {
                            var currentRow = row;
                            while (currentRow < 3 && gameGrid[currentRow + 1][col] === 0) {
                                gameGrid[currentRow + 1][col] = gameGrid[currentRow][col];
                                gameGrid[currentRow][col] = 0;
                                currentRow++;
                                moved = true;
                            }

if (currentRow < 3 && gameGrid[currentRow][col] === gameGrid[currentRow + 1][col]) {
                                gameGrid[currentRow][col] *= 2;
                                score += gameGrid[currentRow][col];
                                gameGrid[currentRow + 1][col] = 0;
                                moved = true;
                            }
                        }
                    }
                }
            }

if (direction === "left" || direction === "right") {
                for (var row = 0; row < 4; row++) {
                    for (var col = 0; col < 3; col++) {
                        if (gameGrid[row][col] !== 0) {
                            var currentCol = col;
                            while (currentCol < 3 && gameGrid[row][currentCol + 1] === 0) {
                                gameGrid[row][currentCol + 1] = gameGrid[row][currentCol];
                                gameGrid[row][currentCol] = 0;
                                currentCol++;
                                moved = true;
                            }

if (currentCol < 3 && gameGrid[row][currentCol] === gameGrid[row][currentCol + 1]) {
                                gameGrid[row][currentCol] *= 2;
                                score += gameGrid[row][currentCol];
                                gameGrid[row][currentCol + 1] = 0;
                                moved = true;
                            }
                        }
                    }
                }
            }

if (moved) {
                addNewBlock();
                updateUI();

if (isGameOver()) {
                    alert("游戏结束！得分: " + score);
                }
            }
        }

// Handle keyboard and touch events for game controls
        window.addEventListener("keyup", function (event) {
            switch (event.key) {
                case "ArrowUp":
                    mergeBlocks("up");
                    break;
                case "ArrowDown":
                    mergeBlocks("down");
                    break;
                case "ArrowLeft":
                    mergeBlocks("left");
                    break;
                case "ArrowRight":
                    mergeBlocks("right");
                    break;
                default:
                    return;
            }
        });

var touchStartX, touchStartY;
        var touchEndX, touchEndY;

window.addEventListener("touchstart", function (event) {
            touchStartX = event.changedTouches[0].screenX;
            touchStartY = event.changedTouches[0].screenY;
        });

window.addEventListener("touchend", function (event) {
            touchEndX = event.changedTouches[0].screenX;
            touchEndY = event.changedTouches[0].screenY;
            var deltaX = touchEndX - touchStartX;
            var deltaY = touchEndY - touchStartY;
            var direction;

if (Math.abs(deltaX) > Math.abs(deltaY)) {
                direction = deltaX > 0 ? "right" : "left";
            } else {
                direction = deltaY > 0 ? "down" : "up";
            }

mergeBlocks(direction);
        });

// Start the game when the page loads
        window.onload = function () {
            document.getElementById("restart").addEventListener("click", initGame);
            initGame();
        };
    </script>
</body>
</html>