Soccer game with realistic's game

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

No:19433

←

Prev Next

→

Soccer game with realistic
Developer User8622｜Date and time 23/10/4 1:12:55
Build time 9.099 sec｜Game capacity 2.026KB｜

Script

physics.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

physics.

<!DOCTYPE html>
<html>
<head>
<title>Soccer Game</title>
<style>
    #soccer-field {
        width: 500px;
        height: 300px;
        background-color: green;
        position: relative;
    }
    #soccer-ball {
        width: 20px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
        position: absolute;
    }
    #goal-post {
        width: 5px;
        height: 80px;
        background-color: white;
        position: absolute;
        top: 110px;
    }
</style>
</head>
<body>
    <div id="soccer-field">
        <div id="soccer-ball"></div>
        <div id="goal-post"></div>
    </div>

var ballX = 0;
        var ballY = 0;
        var ballSpeedX = 0;
        var ballSpeedY = 0;

var goalPostHeight = 80;
        var goalPostWidth = 5;

function updateBallPosition() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

if (ballY <= 0 || ballY >= 280) {
                ballSpeedY *= -1;
            }

if (ballX <= 0 || ballX >= 480) {
                ballSpeedX *= -1;
            }

if (
                ballX + 20 >= goal.offsetLeft &&
                ballX <= goal.offsetLeft + goalPostWidth &&
                ballY + 20 >= goal.offsetTop &&
                ballY <= goal.offsetTop + goalPostHeight
            ) {
                alert("GOAL!");
                resetBall();
            }

ball.style.left = ballX + "px";
            ball.style.top = ballY + "px";
        }

function resetBall() {
            ballX = 0;
            ballY = 0;
            ballSpeedX = Math.random() < 0.5 ? -1 : 1;
            ballSpeedY = Math.random() < 0.5 ? -1 : 1;
        }

function startGame() {
            resetBall();
            setInterval(updateBallPosition, 10);
        }

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