Football game with 3D players a football 2 teams a design for the jerseys's game

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

No:49691

←

Prev Next

→

Football game with 3D players a football 2 teams a..ALL
Developer User21134｜Date and time 24/3/6 5:38:16
Build time 14.292 sec｜Game capacity 3.295KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
<title>Football Game</title>
<style>
    body {
        text-align: center;
        font-family: Arial, sans-serif;
    }

#field {
        width: 300px;
        height: 500px;
        border: 1px solid green;
        position: relative;
        margin: auto;
    }

.player {
        width: 20px;
        height: 20px;
        background: blue;
        border-radius: 50%;
        position: absolute;
        bottom: 10px;
    }

#player1 {
        left: 140px;
    }

#player2 {
        left: 140px;
    }

#ball {
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
        position: absolute;
        bottom: 50px;
        left: 140px;
    }

#goal1 {
        width: 150px;
        height: 10px;
        background: red;
        position: absolute;
        bottom: 5px;
        left: 75px;
    }

#goal2 {
        width: 150px;
        height: 10px;
        background: red;
        position: absolute;
        bottom: 5px;
        left: 75px;
    }
</style>
</head>
<body>
<div id="field">
    <div class="player" id="player1"></div>
    <div class="player" id="player2"></div>
    <div id="ball"></div>
    <div id="goal1"></div>
    <div id="goal2"></div>
</div>

player1.style.top = '0';
    player2.style.top = '0';

let ballX = 140;
    let ballY = 250;

let player1X = 140;
    let player2X = 140;
    let player1Y = 0;
    let player2Y = 0;

document.addEventListener('keydown', function(event) {
        switch(event.key) {
            case 'ArrowLeft':
                player1X -= 5;
                player1.style.left = player1X + 'px';
                break;
            case 'ArrowRight':
                player1X += 5;
                player1.style.left = player1X + 'px';
                break;
            case 'a':
                player2X -= 5;
                player2.style.left = player2X + 'px';
                break;
            case 'd':
                player2X += 5;
                player2.style.left = player2X + 'px';
                break;
            default:
                break;
        }
    });

function moveBall() {
        ballY -= 1;
        ball.style.top = ballY + 'px';

if(ballY <= 60 && ballX >= player1X && ballX <= player1X + 20) {
            alert('Goal for team 2!');
            resetGame();
        } else if(ballY <= 60 && ballX >= player2X && ballX <= player2X + 20) {
            alert('Goal for team 1!');
            resetGame();
        }

if(ballY <= 0) {
            ballY = 250;
            ball.style.top = ballY + 'px';
        }

setTimeout(moveBall, 10);
    }

function resetGame() {
        ballY = 250;
        ball.style.top = ballY + 'px';
        player1X = 140;
        player1.style.left = player1X + 'px';
        player2X = 140;
        player2.style.left = player2X + 'px';
    }

moveBall();
</script>
</body>
</html>
```