AI game creator

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

No:40208

←

Prev Next

→

Merge Game
Developer User18026｜Date and time 24/2/1 20:05:11
Build time 36.962 sec｜Game capacity 9.791KB｜

Script

←

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 {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        .game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            border: 2px solid #ccc;
            border-radius: 5px;
        }
        
        .cell {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 70px;
            height: 70px;
            margin: 5px;
            font-size: 24px;
            font-weight: bold;
            background-color: #f2f2f2;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="game-container"></div>

// Check if there are any moves left
        function checkGameEnd(grid) {
            for (let i = 0; i < grid.length; i++) {
                for (let j = 0; j < grid[i].length; j++) {
                    if (grid[i][j] === null) {
                        return false;
                    }
                    if (i !== grid.length - 1 && grid[i][j] === grid[i + 1][j]) {
                        return false;
                    }
                    if (j !== grid[i].length - 1 && grid[i][j] === grid[i][j + 1]) {
                        return false;
                    }
                }
            }
            return true;
        }

// Render the game grid
        function renderGrid(grid) {
            const gameContainer = document.querySelector('.game-container');
            gameContainer.innerHTML = '';

for (let i = 0; i < grid.length; i++) {
                for (let j = 0; j < grid[i].length; j++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    if (grid[i][j] !== null) {
                        cell.textContent = grid[i][j];
                    }
                    gameContainer.appendChild(cell);
                }
            }
        }

// Add a new value to the grid at a random empty position
        function addNewValue(grid) {
            const emptyPositions = [];
            for (let i = 0; i < grid.length; i++) {
                for (let j = 0; j < grid[i].length; j++) {
                    if (grid[i][j] === null) {
                        emptyPositions.push({ row: i, col: j });
                    }
                }
            }

if (emptyPositions.length === 0) {
                return;
            }

const randomPosition = emptyPositions[getRandomNumber(0, emptyPositions.length - 1)];
            grid[randomPosition.row][randomPosition.col] = getRandomNumber(1, 2) * 2;
        }

// Merge adjacent cells with the same value
        function mergeCells(grid, direction) {
            const mergedGrid = JSON.parse(JSON.stringify(grid)); // Create a deep copy of the grid

switch (direction) {
                case 'up':
                    for (let j = 0; j < mergedGrid[0].length; j++) {
                        for (let i = 0; i < mergedGrid.length - 1; i++) {
                            if (mergedGrid[i][j] === mergedGrid[i + 1][j] && mergedGrid[i][j] !== null) {
                                mergedGrid[i][j] *= 2;
                                mergedGrid[i + 1][j] = null;
                            }
                        }
                    }
                    break;
                case 'down':
                    for (let j = 0; j < mergedGrid[0].length; j++) {
                        for (let i = mergedGrid.length - 1; i > 0; i--) {
                            if (mergedGrid[i][j] === mergedGrid[i - 1][j] && mergedGrid[i][j] !== null) {
                                mergedGrid[i][j] *= 2;
                                mergedGrid[i - 1][j] = null;
                            }
                        }
                    }
                    break;
                case 'left':
                    for (let i = 0; i < mergedGrid.length; i++) {
                        for (let j = 0; j < mergedGrid[i].length - 1; j++) {
                            if (mergedGrid[i][j] === mergedGrid[i][j + 1] && mergedGrid[i][j] !== null) {
                                mergedGrid[i][j] *= 2;
                                mergedGrid[i][j + 1] = null;
                            }
                        }
                    }
                    break;
                case 'right':
                    for (let i = 0; i < mergedGrid.length; i++) {
                        for (let j = mergedGrid[i].length - 1; j > 0; j--) {
                            if (mergedGrid[i][j] === mergedGrid[i][j - 1] && mergedGrid[i][j] !== null) {
                                mergedGrid[i][j] *= 2;
                                mergedGrid[i][j - 1] = null;
                            }
                        }
                    }
                    break;
            }

return mergedGrid;
        }

// Handle key press events
        function handleKeyPress(event) {
            const keyMap = {
                'ArrowUp': 'up',
                'ArrowDown': 'down',
                'ArrowLeft': 'left',
                'ArrowRight': 'right',
            };

const direction = keyMap[event.key];
            if (direction) {
                event.preventDefault();
                moveCells(direction);
            }
        }

// Move the cells in the given direction
        function moveCells(direction) {
            const updatedGrid = JSON.parse(JSON.stringify(grid)); // Create a deep copy of the grid

switch (direction) {
                case 'up':
                    for (let j = 0; j < updatedGrid[0].length; j++) {
                        let nextEmptyRow = 0;
                        for (let i = 0; i < updatedGrid.length; i++) {
                            if (updatedGrid[i][j] !== null) {
                                updatedGrid[nextEmptyRow][j] = updatedGrid[i][j];
                                if (i !== nextEmptyRow) {
                                    updatedGrid[i][j] = null;
                                }
                                nextEmptyRow++;
                            }
                        }
                    }
                    break;
                case 'down':
                    for (let j = 0; j < updatedGrid[0].length; j++) {
                        let nextEmptyRow = updatedGrid.length - 1;
                        for (let i = updatedGrid.length - 1; i >= 0; i--) {
                            if (updatedGrid[i][j] !== null) {
                                updatedGrid[nextEmptyRow][j] = updatedGrid[i][j];
                                if (i !== nextEmptyRow) {
                                    updatedGrid[i][j] = null;
                                }
                                nextEmptyRow--;
                            }
                        }
                    }
                    break;
                case 'left':
                    for (let i = 0; i < updatedGrid.length; i++) {
                        let nextEmptyCol = 0;
                        for (let j = 0; j < updatedGrid[i].length; j++) {
                            if (updatedGrid[i][j] !== null) {
                                updatedGrid[i][nextEmptyCol] = updatedGrid[i][j];
                                if (j !== nextEmptyCol) {
                                    updatedGrid[i][j] = null;
                                }
                                nextEmptyCol++;
                            }
                        }
                    }
                    break;
                case 'right':
                    for (let i = 0; i < updatedGrid.length; i++) {
                        let nextEmptyCol = updatedGrid[i].length - 1;
                        for (let j = updatedGrid[i].length - 1; j >= 0; j--) {
                            if (updatedGrid[i][j] !== null) {
                                updatedGrid[i][nextEmptyCol] = updatedGrid[i][j];
                                if (j !== nextEmptyCol) {
                                    updatedGrid[i][j] = null;
                                }
                                nextEmptyCol--;
                            }
                        }
                    }
                    break;
            }

const mergedGrid = mergeCells(updatedGrid, direction);
            if (JSON.stringify(grid) !== JSON.stringify(mergedGrid)) {
                grid = mergedGrid;
                addNewValue(grid);
                renderGrid(grid);
                if (checkGameEnd(grid)) {
                    alert("Game Over!");
                }
            }
        }

// Initialize the game
        function initializeGame() {
            document.addEventListener('keydown', handleKeyPress);
            grid = [
                [null, null, null, null],
                [null, null, null, null],
                [null, null, null, null],
                [null, null, null, null]
            ];
            addNewValue(grid);
            addNewValue(grid);
            renderGrid(grid);
        }

// Start the game
        let grid;
        initializeGame();
    </script>
</body>
</html>