A football game (3d)'s game | AI game creator

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

No:40736

49

A football game (3d)
Developer User18241｜Date and time 24/2/4 2:08:24
Build time 15.523 sec｜Game capacity 5.21KB｜

Sure, I can provide you with a simple football game implemented as a single HTML file using JavaScript. Since you mentioned smartphone operation, I will make it a touch-based game and use pictograms for visual elements. Here's an example implementation:

This code sets up a simple football game where you control two players using touch gestures on a smartphone screen. The players are represented as yellow circles, and the ball is a white circle. The game logic includes collision detection between players and the ball, scoring goals, and resetting the game after a goal is scored. You can extend this basic implementation to add more features and improve the gameplay as desired.

→ 　

0　

0　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

Sure, I can provide you with a simple football game implemented as a single HTML file using JavaScript. Since you mentioned smartphone operation, I will make it a touch-based game and use pictograms for visual elements. Here's an example implementation:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Football Game</title>
    <style>
        #field {
            position: relative;
            width: 100%;
            height: 400px;
            background: green;
            overflow: hidden;
        }
        
        #ball {
            position: absolute;
            top: 190px;
            left: 50%;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
        }
        
        .player {
            position: absolute;
            width: 40px;
            height: 40px;
            background: yellow;
            border-radius: 50%;
        }
        
        #player1 {
            top: 170px;
            left: 20px;
        }
        
        #player2 {
            top: 230px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="field">
        <div id="ball"></div>
        <div id="player1" class="player"></div>
        <div id="player2" class="player"></div>
    </div>

<script>
        document.addEventListener("DOMContentLoaded", function () {
            var field = document.getElementById('field');
            var ball = document.getElementById('ball');
            var player1 = document.getElementById('player1');
            var player2 = document.getElementById('player2');
            var fieldWidth = field.offsetWidth;
            var fieldHeight = field.offsetHeight;
            var ballX = ball.offsetLeft;
            var ballY = ball.offsetTop;
            var player1X = player1.offsetLeft;
            var player1Y = player1.offsetTop;
            var player2X = player2.offsetLeft;
            var player2Y = player2.offsetTop;
            
            field.addEventListener('touchmove', function(event) {
                event.preventDefault();
                var touch = event.changedTouches[0];
                var touchX = touch.pageX - field.offsetLeft;
                var touchY = touch.pageY - field.offsetTop;
                
                if (touchX < fieldWidth/2) {
                    player1.style.left = touchX - player1.offsetWidth/2 + 'px';
                    player1.style.top = touchY - player1.offsetHeight/2 + 'px';
                } else {
                    player2.style.left = touchX - player2.offsetWidth/2 + 'px';
                    player2.style.top = touchY - player2.offsetHeight/2 + 'px';
                }
            });
            
            function gameLoop() {
                // Update ball's position
                ballX += 1; // Increment X position for simplicity
                ball.style.left = ballX + 'px';
                ball.style.top = ballY + 'px';
                
                // Check collision with players
                if (checkCollision(player1, ball)) {
                    // Player 1 touched the ball
                    console.log('Player 1 got the ball!');
                } else if (checkCollision(player2, ball)) {
                    // Player 2 touched the ball
                    console.log('Player 2 got the ball!');
                }
                
                // Check ball's position for goal
                if (ballX < 0) {
                    // Player 2 scored a goal
                    console.log('Player 2 scored!');
                    resetGame();
                } else if (ballX + ball.offsetWidth > fieldWidth) {
                    // Player 1 scored a goal
                    console.log('Player 1 scored!');
                    resetGame();
                }
                
                requestAnimationFrame(gameLoop);
            }
            
            function checkCollision(player, ball) {
                var playerRect = player.getBoundingClientRect();
                var ballRect = ball.getBoundingClientRect();
                
                return (
                    playerRect.left < ballRect.right && 
                    playerRect.right > ballRect.left &&
                    playerRect.top < ballRect.bottom &&
                    playerRect.bottom > ballRect.top
                );
            }
            
            function resetGame() {
                // Reset ball position
                ballX = fieldWidth/2 - ball.offsetWidth/2;
                ballY = fieldHeight/2 - ball.offsetHeight/2;
                ball.style.left = ballX + 'px';
                ball.style.top = ballY + 'px';
            }
            
            gameLoop();
        });
    </script>
</body>
</html>
```

This code sets up a simple football game where you control two players using touch gestures on a smartphone screen. The players are represented as yellow circles, and the ball is a white circle. The game logic includes collision detection between players and the ball, scoring goals, and resetting the game after a goal is scored. You can extend this basic implementation to add more features and improve the gameplay as desired.