AI game creator

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

No:8126

861

←

Prev Next

→

Merge Game
Developer User4144｜Date and time 23/7/13 11:42:26
Build time 44.16 sec｜Game capacity 7.072KB｜

Script

你好！以下是一个简单的合并游戏的示例，以满足你的要求。这个游戏类似于经典的2048游戏，通过合并相同的方块来增加它们的值，并在游戏板上创建更大的数字。

将以上代码保存为一个 HTML 文件并在浏览器中打开，你就可以开始玩这个合并游戏了。通过滑动手势向上、下、左、右合并相同的方块，尝试在游戏板上创建更大的数字，并争取获得更高的分数！

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
<style>
    .game-board {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 10px;
        margin: 20px;
    }

.cell {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: lightgray;
        font-size: 24px;
        font-weight: bold;
        width: 100px;
        height: 100px;
    }
</style>
</head>
<body>
    <div class="game-board"></div>

// 初始化游戏板
        for (let i = 0; i < 4; i++) {
            for (let j = 0; j < 4; j++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                cells.push(cell);
                board.appendChild(cell);
            }
        }

// 游戏状态
        let gameState = {
            grid: [
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0]
            ],
            score: 0
        };

// 随机生成方块
        function generateRandomTile() {
            const emptyCells = [];
            for (let i = 0; i < gameState.grid.length; i++) {
                for (let j = 0; j < gameState.grid[i].length; j++) {
                    if (gameState.grid[i][j] === 0) {
                        emptyCells.push({ row: i, col: j });
                    }
                }
            }
            if (emptyCells.length > 0) {
                const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
                const value = Math.random() > 0.1 ? 2 : 4; // 生成2和4的概率比例为9:1
                gameState.grid[randomCell.row][randomCell.col] = value;
                updateGameBoard();
                checkGameOver();
            }
        }

// 更新游戏板显示
        function updateGameBoard() {
            for (let i = 0; i < cells.length; i++) {
                const row = Math.floor(i / 4);
                const col = i % 4;
                const value = gameState.grid[row][col];
                const tile = cells[i];
                tile.innerText = value === 0 ? '' : value;
                tile.style.backgroundColor = getTileColor(value);
            }
        }

// 获取方块颜色
        function getTileColor(value) {
            const colors = {
                2: 'lightblue',
                4: 'lightgreen',
                8: 'lightpink',
                16: 'lightyellow',
                32: 'lightcoral',
                64: 'lightsalmon',
                128: 'lightseagreen',
                256: 'lightslategray',
                512: 'lightsteelblue',
                1024: 'lightgoldenrodyellow',
                2048: 'lightcyan'
            }
            return colors[value] || 'gray';
        }

// 合并方块
        function mergeTiles(direction) {
            const newGrid = JSON.parse(JSON.stringify(gameState.grid)); // 克隆当前游戏板
            let score = gameState.score;

// 根据滑动方向调整处理方向
            const isHorizontal = direction === 'left' || direction === 'right';
            const isPositive = direction === 'right' || direction === 'down';
            const increment = isPositive ? 1 : -1;
            const start = isPositive ? 3 : 0;
            const end = isPositive ? 0 : 3;

for (let i = 0; i < 4; i++) {
                const tiles = [];
                for (let j = start; isPositive ? j >= end : j <= end; j += increment) {
                    const tile = isHorizontal ? newGrid[i][j] : newGrid[j][i];
                    if (tile !== 0) {
                        tiles.push(tile);
                    }
                }

for (let j = 0; j < tiles.length - 1; j++) {
                    if (tiles[j] === tiles[j + 1]) {
                        tiles[j] *= 2;
                        score += tiles[j];
                        tiles.splice(j + 1, 1);
                    }
                }

while (tiles.length < 4) {
                    tiles.unshift(0);
                }

for (let j = start; isPositive ? j >= end : j <= end; j += increment) {
                    if (isHorizontal) {
                        newGrid[i][j] = tiles.shift();
                    } else {
                        newGrid[j][i] = tiles.shift();
                    }
                }
            }

gameState.grid = newGrid;
            gameState.score = score;
            updateGameBoard();
        }

// 检查游戏是否结束
        function checkGameOver() {
            // 检查是否有可以合并的方块
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    if (gameState.grid[i][j] === 0) {
                        return;
                    }
                    if (i !== 3 && gameState.grid[i][j] === gameState.grid[i + 1][j]) {
                        return;
                    }
                    if (j !== 3 && gameState.grid[i][j] === gameState.grid[i][j + 1]) {
                        return;
                    }
                }
            }

alert('游戏结束！得分：' + gameState.score);
        }

// 监听滑动手势
        let touchStartX = 0;
        let touchStartY = 0;
        let touchEndX = 0;
        let touchEndY = 0;

document.addEventListener('touchstart', function(event) {
            touchStartX = event.touches[0].clientX;
            touchStartY = event.touches[0].clientY;
        });

document.addEventListener('touchend', function(event) {
            touchEndX = event.changedTouches[0].clientX;
            touchEndY = event.changedTouches[0].clientY;

const dx = touchEndX - touchStartX;
            const dy = touchEndY - touchStartY;

if (Math.abs(dx) > Math.abs(dy)) {
                if (dx > 0) {
                    mergeTiles('right');
                } else {
                    mergeTiles('left');
                }
            } else {
                if (dy > 0) {
                    mergeTiles('down');
                } else {
                    mergeTiles('up');
                }
            }

generateRandomTile();
        });

// 开始游戏
        generateRandomTile();
    </script>
</body>
</html>
```