AI game creator

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

No:39855

←

Prev Next

→

playing football
Developer User17643｜Date and time 24/1/30 17:52:18
Build time 17.479 sec｜Game capacity 4.838KB｜

Script

Sure! Here's an example of a simple football game implemented as a single HTML file using JavaScript. It is designed for smartphone operation and uses pictograms for a visual representation. Please note that this is a simplified version and may require further enhancements to be a complete game.

To play the game: 1. Open a new HTML file in a web browser on your smartphone. 2. Use your finger to touch the left or right side of the field to move the corresponding player. 3. The objective is to prevent the ball from hitting your side and scoring goals. Note: This is a basic implementation and can be enhanced with scoring systems, improved player controls, and additional features based on your requirements.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Football Game</title>
    <style>
        #field {
            width: 100%;
            height: 350px;
            background-color: green;
            position: relative;
            overflow: hidden;
        }
        #ball {
            width: 30px;
            height: 30px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .player {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            bottom: 10px;
        }
        #player-left {
            left: 10px;
        }
        #player-right {
            right: 10px;
        }
    </style>
</head>
<body>
    <div id="field">
        <div id="ball"></div>
        <div class="player" id="player-left"></div>
        <div class="player" id="player-right"></div>
    </div>

// Adjusting player position on screen touch
        field.addEventListener('touchstart', function(event) {
            event.preventDefault();
            var touch = event.touches[0];
            var touchX = touch.clientX;
            var fieldRect = field.getBoundingClientRect();
            var fieldLeft = fieldRect.left;
            var fieldRight = fieldRect.right;

if (touchX < fieldLeft + (fieldRight - fieldLeft) / 2) {
                playerLeft.style.left = Math.max(10, touchX - fieldLeft) + 'px';
            } else {
                playerRight.style.right = Math.max(10, fieldRight - touchX) + 'px';
            }
        });

// Moving the ball
        function moveBall() {
            var fieldRect = field.getBoundingClientRect();
            var fieldWidth = fieldRect.width;
            var ballRect = ball.getBoundingClientRect();
            var ballWidth = ballRect.width;

var ballLeft = parseFloat(ball.style.left) || ballRect.left;
            var ballTop = parseFloat(ball.style.top) || ballRect.top;
            var ballRight = ballLeft + ballWidth;
            var ballBottom = ballTop + ballWidth;

var playerLeftRect = playerLeft.getBoundingClientRect();
            var playerRightRect = playerRight.getBoundingClientRect();

// Checking ball collision with players
            if (ballBottom >= playerLeftRect.top && ballLeft <= playerLeftRect.right && ballRight >= playerLeftRect.left) {
                // Ball hits the left player
                alert('Goal! Right player scores!');
                resetGame();
            }

if (ballTop <= playerRightRect.bottom && ballLeft <= playerRightRect.right && ballRight >= playerRightRect.left) {
                // Ball hits the right player
                alert('Goal! Left player scores!');
                resetGame();
            }

// Moving the ball
            ball.style.left = (ballLeft + 5) + 'px'; // Adjust the ball speed here
            ball.style.top = (ballTop + 5) + 'px';   // Adjust the ball speed here

// Checking ball out of bounds
            if (ballTop > fieldWidth || ballLeft > fieldWidth ||
                ballBottom < 0 || ballRight < 0) {
                // Ball is out of bounds
                alert("Ball is out of bounds!");
                resetGame();
            } else {
                // Continue moving the ball
                requestAnimationFrame(moveBall);
            }
        }

// Resetting the game
        function resetGame() {
            ball.style.left = "50%";
            ball.style.top = "50%";
            playerLeft.style.left = "10px";
            playerRight.style.right = "10px";
            moveBall();
        }

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

Note: This is a basic implementation and can be enhanced with scoring systems, improved player controls, and additional features based on your requirements.