Make a football game's game

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

No:43140

←

Prev Next

→

Make a football game
Developer User19101｜Date and time 24/2/14 12:28:28
Build time 12.44 sec｜Game capacity 4.419KB｜

Script

Sure! Here's an example of a simple football game implemented as an HTML file:

This game creates a simple football-like experience where you control a player using the left and right arrow keys on your smartphone. The objective is to keep the ball bouncing by using your player to hit it. The ball and player are represented by simple shapes (circles and rectangles) on a HTML canvas. To play the game, you can copy and paste the above code into a single HTML file and open it in a web browser on your smartphone. The game starts automatically, and you can control the player's movement by tapping the left or right side of the screen.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple football game implemented as an HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Football Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Enclose the game code within script tags
        (function () {
            var canvas = document.getElementById("gameCanvas"),
                context = canvas.getContext("2d");

// Initial game state
            var ball = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                radius: 10,
                dx: 2,
                dy: -2
            };

var player = {
                x: canvas.width / 2 - 25,
                y: canvas.height - 30,
                width: 50,
                height: 10,
                dx: 5
            };

// Boolean flag to track player movement
            var rightPressed = false;
            var leftPressed = false;

// Event listeners for key presses
            document.addEventListener("keydown", keyDownHandler, false);
            document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(event) {
                if (event.key === "Right" || event.key === "ArrowRight") {
                    rightPressed = true;
                } else if (event.key === "Left" || event.key === "ArrowLeft") {
                    leftPressed = true;
                }
            }

function keyUpHandler(event) {
                if (event.key === "Right" || event.key === "ArrowRight") {
                    rightPressed = false;
                } else if (event.key === "Left" || event.key === "ArrowLeft") {
                    leftPressed = false;
                }
            }

// Update game state
            function update() {
                context.clearRect(0, 0, canvas.width, canvas.height);

// Move the player
                if (rightPressed && player.x < canvas.width - player.width) {
                    player.x += player.dx;
                }
                else if (leftPressed && player.x > 0) {
                    player.x -= player.dx;
                }

// Move the ball
                ball.x += ball.dx;
                ball.y += ball.dy;

// Reverse ball direction on collision with walls
                if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
                    ball.dx = -ball.dx;
                }

if (ball.y - ball.radius < 0) {
                    ball.dy = -ball.dy;
                }
                else if (ball.y + ball.radius > player.y &&
                    ball.x > player.x &&
                    ball.x < player.x + player.width) {
                    ball.dy = -ball.dy;
                }

draw();
            }

// Draw game objects
            function draw() {
                // Draw the player
                context.beginPath();
                context.rect(player.x, player.y, player.width, player.height);
                context.fillStyle = "#0095DD";
                context.fill();
                context.closePath();

// Draw the ball
                context.beginPath();
                context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
                context.fillStyle = "#0095DD";
                context.fill();
                context.closePath();
            }

// Game loop
            function gameLoop() {
                update();
                requestAnimationFrame(gameLoop);
            }

// Start the game loop
            gameLoop();
        })();
    </script>
</body>
</html>
```

To play the game, you can copy and paste the above code into a single HTML file and open it in a web browser on your smartphone. The game starts automatically, and you can control the player's movement by tapping the left or right side of the screen.