AI game creator

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

No:49207

139

←

Prev Next

→

Football game
Developer User20944｜Date and time 24/3/4 2:46:57
Build time 10.862 sec｜Game capacity 2.214KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Football Game</title>
<style>
    body {
        text-align: center;
    }
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

let playerX = canvas.width / 2;
    let playerY = 350;
    let ballX = canvas.width / 2;
    let ballY = 50;
    let ballSpeedX = 5;
    let ballSpeedY = 5;
    let playerSpeed = 10;

function drawPlayer() {
        ctx.fillStyle = "blue";
        ctx.fillRect(playerX, playerY, 50, 50);
    }

function drawBall() {
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
        ctx.fill();
    }

function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

function draw() {
        clearCanvas();
        drawPlayer();
        drawBall();
        ballX += ballSpeedX;
        ballY += ballSpeedY;

if (ballX + 10 > canvas.width || ballX - 10 < 0) {
            ballSpeedX = -ballSpeedX; 
        }

if (ballY - 10 < 0) {
            ballSpeedY = -ballSpeedY;
        } else if (ballY + 10 > playerY && ballX > playerX && ballX < playerX + 50) {
            ballSpeedY = -ballSpeedY;
        } else if (ballY + 10 > canvas.height) {
            alert("Game Over! You missed the ball.");
            document.location.reload();
        }

requestAnimationFrame(draw);
    }

function movePlayer(direction) {
        if (direction === "left" && playerX - playerSpeed >= 0) {
            playerX -= playerSpeed;
        } else if (direction === "right" && playerX + playerSpeed + 50 <= canvas.width) {
            playerX += playerSpeed;
        }
    }

draw();
</script>
</body>
</html>