AI game creator

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

No:39186

←

Prev Next

→

Football game
Developer User17553｜Date and time 24/1/27 7:51:18
Build time 16.846 sec｜Game capacity 4.972KB｜

Script

Sure! Here's a simple football game implemented as a single HTML file using JavaScript and enclosed in script tags. The game can be played on a smartphone and utilizes pictograms to represent different game elements. However, please note that this code is just a basic prototype and can be further enhanced with additional functionalities, animations, and visual improvements.

To play the game, open a new HTML file in a web browser (such as Google Chrome) and paste the above code into the file. Save it with a `.html` extension, then open the saved file in the browser. You can control the player's movement using the left and right arrow keys or the 'A' and 'D' keys on a keyboard. The objective is to score 10 goals by intercepting the ball with the player. Once you reach a score of 10, a game over message will be displayed.

←

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: 300px;
            height: 500px;
            border: 1px solid black;
            position: relative;
            margin: 0 auto;
        }

#ball {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: black;
            position: absolute;
            top: 235px;
            left: 135px;
        }

#player {
            width: 50px;
            height: 50px;
            background-image: url('player.png');
            background-size: cover;
            position: absolute;
            bottom: 10px;
            left: 125px;
        }

#goal {
            width: 100px;
            height: 10px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 100px;
        }
    </style>
</head>
<body>
    <div id="field">
        <div id="player"></div>
        <div id="goal"></div>
        <div id="ball"></div>
    </div>

// Initialize the game state
        let score = 0;
        let isGameOver = false;

// Move the player to the left
        function moveLeft() {
            let currentPos = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
            if (currentPos > 10) {
                player.style.left = currentPos - 10 + 'px';
            }
        }

// Move the player to the right
        function moveRight() {
            let currentPos = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
            if (currentPos < 240) {
                player.style.left = currentPos + 10 + 'px';
            }
        }

// Start the game
        function startGame() {
            if (isGameOver) {
                isGameOver = false;
                ball.style.top = '235px';
                score = 0;
                updateScore();
            }
        }

// Update the score display
        function updateScore() {
            document.getElementById('score').innerText = score;
        }

// Function to handle collision between ball and player
        function handleCollision() {
            let ballTop = parseInt(window.getComputedStyle(ball).getPropertyValue('top'));
            let playerTop = parseInt(window.getComputedStyle(player).getPropertyValue('top'));
            let playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue('left'));

if (ballTop >= playerTop && playerLeft <= 140 && (playerLeft + 50) >= 160) {
                score++;
                updateScore();
                ball.style.top = '235px';
            }

if (score >= 10) {
                isGameOver = true;
                alert('Game Over! You scored 10 goals!');
            }
        }

// Function to animate the ball
        function animateBall() {
            let currentTop = parseInt(window.getComputedStyle(ball).getPropertyValue('top'));
            
            if (!isGameOver) {
                if (currentTop <= 0) {
                    ball.style.top = '235px';
                } else {
                    ball.style.top = currentTop - 5 + 'px';
                }
            }
            
            handleCollision();
            requestAnimationFrame(animateBall);
        }

// Event listeners for player movement
        document.addEventListener('keydown', function (event) {
            if (event.code === 'ArrowLeft' || event.code === 'KeyA') {
                moveLeft();
            } else if (event.code === 'ArrowRight' || event.code === 'KeyD') {
                moveRight();
            }
        });

// Event listener for game start
        document.addEventListener('click', function () {
            startGame();
        });

// Start the ball animation
        animateBall();
    </script>
</body>
</html>
```