AI game creator

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

No:35643

←

Prev Next

→

Football game
Developer User16442｜Date and time 24/1/15 1:20:48
Build time 10.145 sec｜Game capacity 2.767KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Voetbal Spel</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>

// Player
        const player = {
            x: 100,
            y: canvas.height / 2,
            width: 20,
            height: 20,
            color: "blue",
            speed: 5
        };

// Ball
        const ball = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 10,
            speed: 4,
            dx: 4,
            dy: 4,
            color: "red"
        };

// Function to draw the player
        function drawPlayer() {
            context.beginPath();
            context.rect(player.x, player.y, player.width, player.height);
            context.fillStyle = player.color;
            context.fill();
            context.closePath();
        }

// Function to draw the ball
        function drawBall() {
            context.beginPath();
            context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
            context.fillStyle = ball.color;
            context.fill();
            context.closePath();
        }

// Function to update game state
        function update() {
            // Move player
            document.addEventListener("keydown", function (event) {
                if (event.key === "ArrowUp" && player.y > 0) {
                    player.y -= player.speed;
                }
                else if (event.key === "ArrowDown" && player.y + player.height < canvas.height) {
                    player.y += player.speed;
                }
            });

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

// Ball collision with top/bottom walls
            if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
                ball.dy *= -1;
            }

// Ball collision with player
            if (
                ball.y + ball.radius > player.y &&
                ball.y - ball.radius < player.y + player.height &&
                ball.x + ball.radius > player.x &&
                ball.x - ball.radius < player.x + player.width
            ) {
                ball.dx *= -1;
            }

// Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
            drawPlayer();

// Draw ball
            drawBall();

// Request animation frame
            requestAnimationFrame(update);
        }

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