AI game creator

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

No:7918

351

←

Prev Next

→

2048
Developer User4098｜Date and time 23/7/10 23:31:26
Build time 34.693 sec｜Game capacity 10.296KB｜

Script

Sure, here's a sample implementation of the popular game 2048 as a single HTML file using JavaScript:

To play the game, save the above code as a `.html` file and open it in a web browser. You can use the arrow keys to move the tiles and try to reach the 2048 tile. The game will display the current score and notify you when the game is over.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure, here's a sample implementation of the popular game 2048 as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2048</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            background-color: #f3f3f3;
        }
        
        #game-container {
            border: 1px solid #ccc;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .cell {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            width: 80px;
            height: 80px;
            border-radius: 5px;
            background-color: #eee;
        }
        
        .row {
            display: flex;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

function startGame() {
            // Initialize the grid
            grid = new Array(4).fill(null).map(() => new Array(4).fill(null));
            score = 0;
            gameOver = false;

// Clear the game container
            gameContainer.innerHTML = '';

// Create game board
            for (let i = 0; i < 4; i++) {
                const row = document.createElement('div');
                row.classList.add('row');

for (let j = 0; j < 4; j++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    row.appendChild(cell);
                }

gameContainer.appendChild(row);
            }

// Generate initial tiles
            generateNewTile();
            generateNewTile();

// Render the grid
            renderGrid();
        }

function generateNewTile() {
            const availableCells = [];

// Find all available cells
            for (let i = 0; i < grid.length; i++) {
                for (let j = 0; j < grid[i].length; j++) {
                    if (grid[i][j] === null) {
                        availableCells.push({ x: i, y: j });
                    }
                }
            }

// Randomly select an available cell and assign it a value of 2 or 4
            if (availableCells.length > 0) {
                const { x, y } = availableCells[Math.floor(Math.random() * availableCells.length)];
                grid[x][y] = Math.random() < 0.9 ? 2 : 4;
            }
        }

function renderGrid() {
            const cells = Array.from(document.getElementsByClassName('cell'));

cells.forEach((cell, index) => {
                const i = Math.floor(index / 4);
                const j = index % 4;

if (grid[i][j]) {
                    cell.textContent = grid[i][j];
                    cell.style.backgroundColor = getTileColor(grid[i][j]);
                } else {
                    cell.textContent = '';
                    cell.style.backgroundColor = '#eee';
                }
            });
        }

// Tile colors
        function getTileColor(value) {
            const colors = {
                2: '#eee4da',
                4: '#ede0c8',
                8: '#f2b179',
                16: '#f59563',
                32: '#f67c5f',
                64: '#f65e3b',
                128: '#edcf72',
                256: '#edcc61',
                512: '#edc850',
                1024: '#edc53f',
                2048: '#edc22e'
            };

return colors[value] || '#ccc0b3';
        }

// Game controls
        document.addEventListener('keydown', handleKeydown);

function handleKeydown(event) {
            if (gameOver) return;

switch (event.key) {
                case 'ArrowUp':
                    moveUp();
                    break;
                case 'ArrowDown':
                    moveDown();
                    break;
                case 'ArrowLeft':
                    moveLeft();
                    break;
                case 'ArrowRight':
                    moveRight();
                    break;
            }

if (isGameOver()) {
                gameOver = true;
                alert('Game Over!');
            }
        }

// Move up
        function moveUp() {
            let moved = false;

for (let j = 0; j < 4; j++) {
                for (let i = 1; i < 4; i++) {
                    if (grid[i][j] !== null) {
                        for (let k = i - 1; k >= 0; k--) {
                            if (grid[k][j] === null) {
                                grid[k][j] = grid[i][j];
                                grid[i][j] = null;
                                moved = true;
                                break;
                            } else if (grid[k][j] === grid[i][j]) {
                                grid[k][j] *= 2;
                                score += grid[k][j];
                                grid[i][j] = null;
                                moved = true;
                                break;
                            } else {
                                break;
                            }
                        }
                    }
                }
            }

if (moved) generateNewTile();
            renderGrid();
        }

// Move down
        function moveDown() {
            let moved = false;

for (let j = 0; j < 4; j++) {
                for (let i = 2; i >= 0; i--) {
                    if (grid[i][j] !== null) {
                        for (let k = i + 1; k < 4; k++) {
                            if (grid[k][j] === null) {
                                grid[k][j] = grid[i][j];
                                grid[i][j] = null;
                                moved = true;
                                break;
                            } else if (grid[k][j] === grid[i][j]) {
                                grid[k][j] *= 2;
                                score += grid[k][j];
                                grid[i][j] = null;
                                moved = true;
                                break;
                            } else {
                                break;
                            }
                        }
                    }
                }
            }

if (moved) generateNewTile();
            renderGrid();
        }

// Move left
        function moveLeft() {
            let moved = false;

for (let i = 0; i < 4; i++) {
                for (let j = 1; j < 4; j++) {
                    if (grid[i][j] !== null) {
                        for (let k = j - 1; k >= 0; k--) {
                            if (grid[i][k] === null) {
                                grid[i][k] = grid[i][j];
                                grid[i][j] = null;
                                moved = true;
                                break;
                            } else if (grid[i][k] === grid[i][j]) {
                                grid[i][k] *= 2;
                                score += grid[i][k];
                                grid[i][j] = null;
                                moved = true;
                                break;
                            } else {
                                break;
                            }
                        }
                    }
                }
            }

if (moved) generateNewTile();
            renderGrid();
        }

// Move right
        function moveRight() {
            let moved = false;

for (let i = 0; i < 4; i++) {
                for (let j = 2; j >= 0; j--) {
                    if (grid[i][j] !== null) {
                        for (let k = j + 1; k < 4; k++) {
                            if (grid[i][k] === null) {
                                grid[i][k] = grid[i][j];
                                grid[i][j] = null;
                                moved = true;
                                break;
                            } else if (grid[i][k] === grid[i][j]) {
                                grid[i][k] *= 2;
                                score += grid[i][k];
                                grid[i][j] = null;
                                moved = true;
                                break;
                            } else {
                                break;
                            }
                        }
                    }
                }
            }

if (moved) generateNewTile();
            renderGrid();
        }

// Check if game over
        function isGameOver() {
            const availableCells = [];

// Check if no more moves can be made
            if (availableCells.length === 0) {
                for (let i = 0; i < grid.length; i++) {
                    for (let j = 0; j < grid[i].length - 1; j++) {
                        if (grid[i][j] === grid[i][j + 1] || grid[j][i] === grid[j + 1][i]) {
                            return false;
                        }
                    }
                }

return true;
            }

return false;
        }

// Start the game
        startGame();
    </script>
</body>
</html>
```