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

No:37029

Créame un juego de futbol
Developer User16957｜Date and time 24/1/19 23:33:31
Build time 12.066 sec｜Game capacity 3.042KB｜

Script

Juego de Fútbol

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
        
        #field {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            background-color: blue;
            position: relative;
        }
        
        #ball {
            width: 25px;
            height: 25px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
        }
        
        #player {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <h1>Juego de Fútbol</h1>
    <div id="field">
        <div id="ball"></div>
        <div id="player"></div>
    </div>
    
    <script>
        let ball = document.getElementById('ball');
        let player = document.getElementById('player');
        
        // Initialize ball position
        let ballTop = 100;
        let ballLeft = 250;
        
        // Initialize player position
        let playerLeft = 225;
        
        // Register device orientation event listener
        window.addEventListener('deviceorientation', handleOrientation);
        
        // Function to handle device orientation changes
        function handleOrientation(event) {
            // Adjust player position based on device tilt
            playerLeft = playerLeft + event.gamma / 10;
            
            // Prevent player from going outside the field
            if (playerLeft < 0) {
                playerLeft = 0;
            } else if (playerLeft > 450) {
                playerLeft = 450;
            }
            
            // Update player position
            player.style.left = playerLeft + 'px';
        }
        
        // Function to update ball position
        function updateBallPosition() {
            // Adjust ball position based on ball speed
            ballTop += 1;
            
            // Check if the ball hits the player
            if (ballTop + 25 >= 275 && ballLeft >= playerLeft && ballLeft <= playerLeft + 50) {
                alert('¡Gol!');
                resetBallPosition();
            }
            
            // Check if the ball hits the ground
            if (ballTop + 25 >= 300) {
                alert('¡Fallaste!');
                resetBallPosition();
            }
            
            // Update ball position
            ball.style.top = ballTop + 'px';
            ball.style.left = ballLeft + 'px';
        }
        
        // Function to reset ball position
        function resetBallPosition() {
            ballTop = 100;
            ballLeft = Math.random() * 450;
            ball.style.top = ballTop + 'px';
            ball.style.left = ballLeft + 'px';
        }
        
        // Start the game
        setInterval(updateBallPosition, 10);
    </script>
</body>
</html>