AI game creator

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

No:30563

←

Prev Next

→

Merge Game
Developer User14861｜Date and time 23/12/23 0:06:50
Build time 76.918 sec｜Game capacity 13.348KB｜

Script

Score: 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 {
            font-family: Arial, sans-serif;
            text-align: center;
        }

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

.tile {
            width: 80px;
            height: 80px;
            border-radius: 5px;
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
        }

.tile-2 {
            background-color: #eee4da;
            color: #776e65;
        }

.tile-4 {
            background-color: #ede0c8;
            color: #776e65;
        }

.tile-8 {
            background-color: #f2b179;
            color: #f9f6f2;
        }

.tile-16 {
            background-color: #f59563;
            color: #f9f6f2;
        }

.tile-32 {
            background-color: #f67c5f;
            color: #f9f6f2;
        }

.tile-64 {
            background-color: #f65e3b;
            color: #f9f6f2;
        }

.tile-128 {
            background-color: #edcf72;
            color: #f9f6f2;
        }

.tile-256 {
            background-color: #edcc61;
            color: #f9f6f2;
        }

.tile-512 {
            background-color: #edc850;
            color: #f9f6f2;
        }

.tile-1024 {
            background-color: #edc53f;
            color: #f9f6f2;
        }

.tile-2048 {
            background-color: #edc22e;
            color: #f9f6f2;
        }

.tile-4096 {
            background-color: #3c3a32;
            color: #f9f6f2;
        }

.tile-8192 {
            background-color: #3c3a32;
            color: #f9f6f2;
        }

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

.game-over {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
            color: #f9f6f2;
            font-size: 36px;
        }

.game-over span {
            font-size: 24px;
        }

.game-over button {
            padding: 10px 20px;
            margin-top: 20px;
            font-size: 24px;
            background-color: #edc22e;
            color: #f9f6f2;
            border: none;
            cursor: pointer;
        }

@media only screen and (max-width: 600px) {
            .tile {
                width: 60px;
                height: 60px;
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <div id="game-container"></div>
    <div id="score">Score: 0</div>
    <div id="game-over" style="display: none;">
        <span>Game Over!</span>
        <button onclick="restartGame()">Restart</button>
    </div>
    <script>
        // Initialize an empty grid
        let grid = [];
        const size = 4;
        let score = 0;

// Initialize the game
        function startGame() {
            createGrid();
            addRandomTile();
            addRandomTile();
            updateGrid();
        }

// Create a 4x4 grid of zeros
        function createGrid() {
            for (let i = 0; i < size; i++) {
                grid[i] = [];
                for (let j = 0; j < size; j++) {
                    grid[i][j] = 0;
                }
            }
        }

// Add a random tile (2 or 4) to the grid
        function addRandomTile() {
            const options = [];
            for (let i = 0; i < size; i++) {
                for (let j = 0; j < size; j++) {
                    if (grid[i][j] === 0) {
                        options.push({ x: i, y: j });
                    }
                }
            }
            if (options.length > 0) {
                const spot = options[Math.floor(Math.random() * options.length)];
                const value = Math.random() < 0.9 ? 2 : 4;
                grid[spot.x][spot.y] = value;
            }
        }

// Update the grid after every move
        function updateGrid() {
            const gameContainer = document.getElementById('game-container');
            gameContainer.innerHTML = '';
            for (let i = 0; i < size; i++) {
                for (let j = 0; j < size; j++) {
                    const tileValue = grid[i][j];
                    const tile = document.createElement('div');
                    tile.className = `tile tile-${tileValue}`;
                    tile.innerText = tileValue > 0 ? tileValue : '';
                    gameContainer.appendChild(tile);
                }
            }
            document.getElementById('score').innerText = `Score: ${score}`;
        }

// Check if the game is over
        function checkGameOver() {
            for (let i = 0; i < size; i++) {
                for (let j = 0; j < size; j++) {
                    if (grid[i][j] === 0) {
                        return false;
                    }
                    if (j < size - 1 && grid[i][j] === grid[i][j + 1]) {
                        return false;
                    }
                    if (i < size - 1 && grid[i][j] === grid[i + 1][j]) {
                        return false;
                    }
                }
            }
            return true;
        }

// Restart the game
        function restartGame() {
            document.getElementById('score').innerText = 'Score: 0';
            document.getElementById('game-over').style.display = 'none';
            grid = [];
            score = 0;
            startGame();
        }

// Merge the tiles in the specified direction
        function mergeTiles(direction) {
            let moved = false;
            switch (direction) {
                case 'left':
                    for (let i = 0; i < size; i++) {
                        for (let j = 0; j < size - 1; j++) {
                            if (grid[i][j] === grid[i][j + 1] && grid[i][j] !== 0) {
                                grid[i][j] *= 2;
                                grid[i][j + 1] = 0;
                                score += grid[i][j];
                                moved = true;
                            }
                        }
                    }
                    break;
                case 'right':
                    for (let i = 0; i < size; i++) {
                        for (let j = size - 1; j > 0; j--) {
                            if (grid[i][j] === grid[i][j - 1] && grid[i][j] !== 0) {
                                grid[i][j] *= 2;
                                grid[i][j - 1] = 0;
                                score += grid[i][j];
                                moved = true;
                            }
                        }
                    }
                    break;
                case 'up':
                    for (let i = 0; i < size - 1; i++) {
                        for (let j = 0; j < size; j++) {
                            if (grid[i][j] === grid[i + 1][j] && grid[i][j] !== 0) {
                                grid[i][j] *= 2;
                                grid[i + 1][j] = 0;
                                score += grid[i][j];
                                moved = true;
                            }
                        }
                    }
                    break;
                case 'down':
                    for (let i = size - 1; i > 0; i--) {
                        for (let j = 0; j < size; j++) {
                            if (grid[i][j] === grid[i - 1][j] && grid[i][j] !== 0) {
                                grid[i][j] *= 2;
                                grid[i - 1][j] = 0;
                                score += grid[i][j];
                                moved = true;
                            }
                        }
                    }
                    break;
            }
            return moved;
        }

// Shift the tiles in the specified direction
        function shiftTiles(direction) {
            let moved = false;
            switch (direction) {
                case 'left':
                    for (let i = 0; i < size; i++) {
                        let position = 0;
                        for (let j = 0; j < size; j++) {
                            if (grid[i][j] !== 0) {
                                if (position !== j) {
                                    grid[i][position] = grid[i][j];
                                    grid[i][j] = 0;
                                    moved = true;
                                }
                                position++;
                            }
                        }
                    }
                    break;
                case 'right':
                    for (let i = 0; i < size; i++) {
                        let position = size - 1;
                        for (let j = size - 1; j >= 0; j--) {
                            if (grid[i][j] !== 0) {
                                if (position !== j) {
                                    grid[i][position] = grid[i][j];
                                    grid[i][j] = 0;
                                    moved = true;
                                }
                                position--;
                            }
                        }
                    }
                    break;
                case 'up':
                    for (let j = 0; j < size; j++) {
                        let position = 0;
                        for (let i = 0; i < size; i++) {
                            if (grid[i][j] !== 0) {
                                if (position !== i) {
                                    grid[position][j] = grid[i][j];
                                    grid[i][j] = 0;
                                    moved = true;
                                }
                                position++;
                            }
                        }
                    }
                    break;
                case 'down':
                    for (let j = 0; j < size; j++) {
                        let position = size - 1;
                        for (let i = size - 1; i >= 0; i--) {
                            if (grid[i][j] !== 0) {
                                if (position !== i) {
                                    grid[position][j] = grid[i][j];
                                    grid[i][j] = 0;
                                    moved = true;
                                }
                                position--;
                            }
                        }
                    }
                    break;
            }
            return moved;
        }

// Handle arrow key press events
        function handleKeyPress(event) {
            if (event.keyCode === 37) {
                // Left arrow key
                if (shiftTiles('left') | mergeTiles('left') | shiftTiles('left')) {
                    addRandomTile();
                    updateGrid();
                    if (checkGameOver()) {
                        setTimeout(() => {
                            document.getElementById('game-over').style.display = 'flex';
                        }, 500);
                    }
                }
            } else if (event.keyCode === 38) {
                // Up arrow key
                if (shiftTiles('up') | mergeTiles('up') | shiftTiles('up')) {
                    addRandomTile();
                    updateGrid();
                    if (checkGameOver()) {
                        setTimeout(() => {
                            document.getElementById('game-over').style.display = 'flex';
                        }, 500);
                    }
                }
            } else if (event.keyCode === 39) {
                // Right arrow key
                if (shiftTiles('right') | mergeTiles('right') | shiftTiles('right')) {
                    addRandomTile();
                    updateGrid();
                    if (checkGameOver()) {
                        setTimeout(() => {
                            document.getElementById('game-over').style.display = 'flex';
                        }, 500);
                    }
                }
            } else if (event.keyCode === 40) {
                // Down arrow key
                if (shiftTiles('down') | mergeTiles('down') | shiftTiles('down')) {
                    addRandomTile();
                    updateGrid();
                    if (checkGameOver()) {
                        setTimeout(() => {
                            document.getElementById('game-over').style.display = 'flex';
                        }, 500);
                    }
                }
            }
        }

// Start the game when the window is loaded
        window.onload = function () {
            window.addEventListener('keyup', handleKeyPress);
            startGame();
        };
    </script>
</body>
</html>