AI game creator

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

No:15577

←

Prev Next

→

Merge Game
Developer Nanuiture｜Date and time 23/9/10 2:07:35
Build time 57.858 sec｜Game capacity 7.51KB｜

Script

Score: 0

←

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 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        .game-container {
            width: 300px;
            text-align: center;
        }
        
        .score {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .cell {
            width: 70px;
            height: 70px;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .cell p {
            font-size: 30px;
            margin: 0;
        }
        
        .pictogram {
            width: 50px;
            height: 50px;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="score">Score: 0</div>
        <div class="row">
            <div id="cell-1" class="cell"></div>
            <div id="cell-2" class="cell"></div>
            <div id="cell-3" class="cell"></div>
        </div>
        <div class="row">
            <div id="cell-4" class="cell"></div>
            <div id="cell-5" class="cell"></div>
            <div id="cell-6" class="cell"></div>
        </div>
        <div class="row">
            <div id="cell-7" class="cell"></div>
            <div id="cell-8" class="cell"></div>
            <div id="cell-9" class="cell"></div>
        </div>
        <script>
            // Define the pictograms
            const pictograms = {
                2: "🍏",
                4: "🍉",
                8: "🍓",
                16: "🍇",
                32: "🥝",
                64: "🍍",
                128: "🥥",
                256: "🍌",
                512: "🍊",
                1024: "🍒",
                2048: "🍋"
            };

// Initialize the grid with empty cells
            let grid = [
                [null, null, null],
                [null, null, null],
                [null, null, null]
            ];
            
            // Generate a new random number (2 or 4)
            function generateRandomNumber() {
                return Math.random() < 0.9 ? 2 : 4;
            }
            
            // Add a new number (2 or 4) to a randomly chosen empty cell
            function addRandomNumber() {
                const emptyCells = [];
                
                // Find all the empty cells in the grid
                for (let i = 0; i < 3; i++) {
                    for (let j = 0; j < 3; j++) {
                        if (grid[i][j] === null) {
                            emptyCells.push([i, j]);
                        }
                    }
                }
                
                // Choose a random empty cell and add a new number to it
                const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
                const randomNumber = generateRandomNumber();
                
                grid[randomCell[0]][randomCell[1]] = randomNumber;
            }
            
            // Update the grid cells visually
            function updateGrid() {
                for (let i = 0; i < 3; i++) {
                    for (let j = 0; j < 3; j++) {
                        const cell = document.getElementById(`cell-${i + 1}-${j + 1}`);
                        
                        if (grid[i][j] !== null) {
                            cell.innerHTML = `<p>${pictograms[grid[i][j]]}</p>`;
                        } else {
                            cell.innerHTML = "";
                        }
                    }
                }
            }
            
            // Merge the cells in the given direction
            function mergeCells(direction) {
                let points = 0;
                
                switch (direction) {
                    case "left":
                        for (let i = 0; i < 3; i++) {
                            for (let j = 0; j < 2; j++) {
                                if (grid[i][j] !== null && grid[i][j] === grid[i][j + 1]) {
                                    grid[i][j] *= 2;
                                    grid[i][j + 1] = null;
                                    points += grid[i][j];
                                }
                            }
                        }
                        break;
                    case "right":
                        for (let i = 0; i < 3; i++) {
                            for (let j = 2; j > 0; j--) {
                                if (grid[i][j] !== null && grid[i][j] === grid[i][j - 1]) {
                                    grid[i][j] *= 2;
                                    grid[i][j - 1] = null;
                                    points += grid[i][j];
                                }
                            }
                        }
                        break;
                    case "up":
                        for (let i = 0; i < 2; i++) {
                            for (let j = 0; j < 3; j++) {
                                if (grid[i][j] !== null && grid[i][j] === grid[i + 1][j]) {
                                    grid[i][j] *= 2;
                                    grid[i + 1][j] = null;
                                    points += grid[i][j];
                                }
                            }
                        }
                        break;
                    case "down":
                        for (let i = 2; i > 0; i--) {
                            for (let j = 0; j < 3; j++) {
                                if (grid[i][j] !== null && grid[i][j] === grid[i - 1][j]) {
                                    grid[i][j] *= 2;
                                    grid[i - 1][j] = null;
                                    points += grid[i][j];
                                }
                            }
                        }
                        break;
                }
                
                return points;
            }
            
            // Handle key events
            document.addEventListener("keydown", function(event) {
                let points = 0;
                
                switch (event.key) {
                    case "ArrowLeft":
                        points = mergeCells("left");
                        break;
                    case "ArrowRight":
                        points = mergeCells("right");
                        break;
                    case "ArrowUp":
                        points = mergeCells("up");
                        break;
                    case "ArrowDown":
                        points = mergeCells("down");
                        break;
                }
                
                if (points > 0) {
                    addRandomNumber();
                    updateGrid();
                    document.querySelector(".score").textContent = `Score: ${points}`;
                }
            });
            
            // Start the game
            addRandomNumber();
            addRandomNumber();
            updateGrid();
        </script>
    </div>
</body>
</html>