AI game creator

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

No:10748

←

Prev Next

→

Merge Game
Developer User4590｜Date and time 23/8/2 22:53:15
Build time 70.029 sec｜Game capacity 8.133KB｜

Script

得分:

游戏结束

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Merge Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }
        #game-board {
            display: flex;
            flex-wrap: wrap;
            width: 320px;
            height: 320px;
            margin: 100px auto;
        }
        .tile {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            width: 70px;
            height: 70px;
            background-color: #eee4da;
            margin: 5px;
            border-radius: 5px;
        }
        .score-board {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            font-size: 24px;
        }
        .score-label {
            margin-right: 10px;
        }
        .score {
            font-weight: bold;
        }
        .game-over {
            display: none;
            text-align: center;
            font-size: 32px;
            margin-top: 50px;
            color: #666;
        }
        .restart-btn {
            display: block;
            width: 120px;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 18px;
            text-align: center;
            background-color: #f44336;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <div class="score-board">
        <div class="score-label">得分:</div>
        <div class="score">0</div>
    </div>
    <div class="game-over">
        游戏结束
        <button class="restart-btn">重新开始</button>
    </div>

// 定义游戏状态
        let tiles = [];
        let score = 0;
        let gameover = false;

// 随机生成2或4的新块
        function generateNewTile() {
            const value = Math.random() < 0.9 ? 2 : 4;
            const tile = { value: value, merged: false };
            return tile;
        }

// 在游戏面板中随机空白位置生成新块
        function addNewTile() {
            const emptyTiles = tiles.filter(tile => tile.value === 0);
            if (emptyTiles.length === 0) {
                return;
            }
            const randomIndex = Math.floor(Math.random() * emptyTiles.length);
            emptyTiles[randomIndex] = generateNewTile();
        }

// 刷新游戏面板
        function renderGameBoard() {
            gameBoard.innerHTML = '';
            tiles.forEach(tile => {
                const tileElement = document.createElement('div');
                tileElement.className = 'tile';
                tileElement.textContent = tile.value !== 0 ? tile.value : '';
                tileElement.style.backgroundColor = getTileColor(tile.value);
                gameBoard.appendChild(tileElement);
            });
            scoreElement.textContent = score;
        }

// 获取块的背景颜色
        function getTileColor(value) {
            const colors = {
                0: '#eee4da',
                2: '#eee4da',
                4: '#ede0c8',
                8: '#f2b179',
                16: '#f59563',
                32: '#f67c5f',
                64: '#f65e3b',
                128: '#edcf72',
                256: '#edcc61',
                512: '#edc850',
                1024: '#efc53f',
                2048: '#eec22e'
            };
            return colors[value] || colors[0];
        }

// 初始化游戏
        function initializeGame() {
            tiles = [];
            score = 0;
            gameover = false;

for (let i = 0; i < 16; i++) {
                tiles.push({ value: 0, merged: false });
            }
            addNewTile();
            addNewTile();
            renderGameBoard();
        }

// 合并相同的块
        function mergeTiles(direction) {
            const movements = {
                'left': { start: 0, end: 3, step: 1 },
                'right': { start: 15, end: 12, step: -1 },
                'up': { start: 0, end: 12, step: 4 },
                'down': { start: 15, end: 3, step: -4 }
            };
            const movement = movements[direction];

let hasMoved = false;
            let hasMerged = false;

for (let i = movement.start; i !== movement.end; i += movement.step) {
                const tile = tiles[i];
                if (tile.value === 0) {
                    continue;
                }
                let nextTileIndex = i;
                while (true) {
                    const nextTileIndexWithStep = nextTileIndex + movement.step;
                    const nextTile = tiles[nextTileIndexWithStep];
                    if (nextTile && nextTile.value === tile.value && !nextTile.merged) {
                        nextTile.value += tile.value;
                        nextTile.merged = true;
                        tile.value = 0;
                        hasMerged = true;
                        score += nextTile.value;
                        break;
                    }
                    if (!nextTile || nextTile.value !== 0) {
                        break;
                    }
                    nextTileIndex = nextTileIndexWithStep;
                }
                if (i !== nextTileIndex) {
                    tiles[nextTileIndex] = tile;
                    tiles[i] = { value: 0, merged: false };
                    hasMoved = true;
                }
            }

return hasMoved || hasMerged;
        }

// 判断是否无法继续移动
        function isGameOver() {
            if (tiles.length < 16 || tiles.filter(tile => tile.value === 0).length > 0) {
                return false;
            }
            for (let i = 0; i < 16; i++) {
                const tile = tiles[i];
                if ((i % 4 < 3 && tile.value === tiles[i + 1].value) || (i < 12 && tile.value === tiles[i + 4].value)) {
                    return false;
                }
            }
            return true;
        }

// 处理移动操作
        function handleMove(direction) {
            if (gameover) {
                return;
            }
            const hasMoved = mergeTiles(direction);
            if (hasMoved) {
                addNewTile();
                renderGameBoard();
                if (isGameOver()) {
                    gameover = true;
                    showGameOver();
                }
            }
        }

// 显示游戏结束界面
        function showGameOver() {
            const gameOverElement = document.querySelector('.game-over');
            gameOverElement.style.display = 'block';
        }

// 重新开始游戏
        function restartGame() {
            const gameOverElement = document.querySelector('.game-over');
            gameOverElement.style.display = 'none';
            initializeGame();
        }

// 监听按键事件
        document.addEventListener('keydown', event => {
            switch(event.keyCode) {
                case 37: // 左箭头
                    handleMove('left');
                    break;
                case 38: // 上箭头
                    handleMove('up');
                    break;
                case 39: // 右箭头
                    handleMove('right');
                    break;
                case 40: // 下箭头
                    handleMove('down');
                    break;
            }
        });

// 监听重新开始点击事件
        const restartBtn = document.querySelector('.restart-btn');
        restartBtn.addEventListener('click', restartGame);

// 执行初始化游戏
        initializeGame();
    </script>
</body>
</html>