AI game creator

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

No:50463

103

←

Prev Next

→

2048
Developer User21309｜Date and time 24/3/8 16:23:01
Build time 18.574 sec｜Game capacity 3.976KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>2048</title>
    <style>
        .tile {
            width: 100px;
            height: 100px;
            background-color: #eee4da;
            color: #776e65;
            font-size: 36px;
            text-align: center;
            border-radius: 6px;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="gameBoard"></div>
    
    <script>
        document.addEventListener('keydown', handleKeyPress);
        
        let gameBoard = [];
        let rows = 4;
        let cols = 4;
        let score = 0;
        
        startGame();
        
        function startGame() {
            for(let i = 0; i < rows; i++) {
                gameBoard[i] = [];
                for(let j = 0; j < cols; j++) {
                    gameBoard[i][j] = 0;
                }
            }
            
            addRandomTile();
            addRandomTile();
            
            updateGameBoard();
        }
        
        function addRandomTile() {
            let options = [];
            
            for(let i = 0; i < rows; i++) {
                for(let j = 0; j < cols; j++) {
                    if(gameBoard[i][j] === 0) {
                        options.push({x: i, y: j});
                    }
                }
            }
            
            if(options.length > 0) {
                let spot = options[Math.floor(Math.random() * options.length)];
                gameBoard[spot.x][spot.y] = Math.random() > 0.1 ? 2 : 4;
            }
        }
        
        function updateGameBoard() {
            let board = document.getElementById('gameBoard');
            board.innerHTML = '';
            
            for(let i = 0; i < rows; i++) {
                for(let j = 0; j < cols; j++) {
                    let tile = document.createElement('div');
                    tile.className = 'tile';
                    tile.innerText = gameBoard[i][j] === 0 ? '' : gameBoard[i][j];
                    tile.style.backgroundColor = getTileColor(gameBoard[i][j]);
                    board.appendChild(tile);
                }
            }
        }
        
        function getTileColor(value) {
            switch(value) {
                case 2:
                    return '#eee4da';
                case 4:
                    return '#ede0c8';
                case 8:
                    return '#f2b179';
                case 16:
                    return '#f59563';
                case 32:
                    return '#f67c5f';
                case 64:
                    return '#f65e3b';
                case 128:
                    return '#edcf72';
                case 256:
                    return '#edcc61';
                case 512:
                    return '#edc850';
                case 1024:
                    return '#edc53f';
                case 2048:
                    return '#edc22e';
                default:
                    return '#3c3a32';
            }
        }
        
        function handleKeyPress(event) {
            let key = event.key;
            
            if(key === 'ArrowUp') {
                moveUp();
            } else if(key === 'ArrowDown') {
                moveDown();
            } else if(key === 'ArrowLeft') {
                moveLeft();
            } else if(key === 'ArrowRight') {
                moveRight();
            }
            
            updateGameBoard();
        }
        
        function moveUp() {
            // Implement moving tiles up
            addRandomTile();
        }
        
        function moveDown() {
            // Implement moving tiles down
            addRandomTile();
        }
        
        function moveLeft() {
            // Implement moving tiles left
            addRandomTile();
        }
        
        function moveRight() {
            // Implement moving tiles right
            addRandomTile();
        }
    </script>
</body>
</html>