Réalise un jeu complet de baby-foot's game

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

No:36533

←

Prev Next

→

Réalise un jeu complet de baby-foot
Developer User16756｜Date and time 24/1/17 22:40:37
Build time 21.48 sec｜Game capacity 4.543KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Baby-Foot</title>
    <style>
        #playground {
            width: 600px;
            height: 400px;
            background-color: green;
            position: relative;
        }

#players {
            width: 40px;
            height: 120px;
            background-color: white;
            position: absolute;
        }

#ball {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="playground">
        <div id="playerA" class="players"></div>
        <div id="playerB" class="players"></div>
        <div id="ball"></div>
    </div>

var playgroundWidth = 600;
        var playgroundHeight = 400;

var playerAInitialX = 20;
        var playerBInitialX = playgroundWidth - 60;
        var playersInitialY = 140;
        var ballInitialX = playgroundWidth / 2 - 10;
        var ballInitialY = playgroundHeight / 2 - 10;

var playerAMoveStep = 5;
        var playerBMoveStep = 5;
        var ballStepX = 2;
        var ballStepY = 2;

// Initialisation des positions des éléments
        playerA.style.left = playerAInitialX + "px";
        playerA.style.top = playersInitialY + "px";
        playerB.style.left = playerBInitialX + "px";
        playerB.style.top = playersInitialY + "px";
        ball.style.left = ballInitialX + "px";
        ball.style.top = ballInitialY + "px";

// Fonction pour déplacer les joueurs
        function movePlayers(event) {
            var keyCode = event.keyCode;
            if (keyCode === 38 && playerA.offsetTop > 0) {
                playerA.style.top = playerA.offsetTop - playerAMoveStep + "px";
            } else if (keyCode === 40 && playerA.offsetTop < playgroundHeight - playerA.offsetHeight) {
                playerA.style.top = playerA.offsetTop + playerAMoveStep + "px";
            } else if (keyCode === 87 && playerB.offsetTop > 0) {
                playerB.style.top = playerB.offsetTop - playerBMoveStep + "px";
            } else if (keyCode === 83 && playerB.offsetTop < playgroundHeight - playerB.offsetHeight) {
                playerB.style.top = playerB.offsetTop + playerBMoveStep + "px";
            }
        }

// Fonction pour déplacer la balle
        function moveBall() {
            var ballX = parseInt(ball.style.left);
            var ballY = parseInt(ball.style.top);

// Vérifier et inverser la direction si la balle atteint les bords horizontaux
            if (ballX <= 0 || ballX >= playgroundWidth - ball.offsetWidth) {
                ballStepX = -ballStepX;
            }

// Vérifier et inverser la direction si la balle atteint les bords verticaux
            if (ballY <= 0 || ballY >= playgroundHeight - ball.offsetHeight) {
                ballStepY = -ballStepY;
            }

// Vérifier et réinitialiser la position si la balle touche un joueur
            if (collides(ball, playerA) || collides(ball, playerB)) {
                ball.style.left = ballInitialX + "px";
                ball.style.top = ballInitialY + "px";
                ballStepX = -ballStepX;
            }

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

// Appeler à nouveau la fonction moveBall pour continuer le déplacement
            requestAnimationFrame(moveBall);
        }

// Vérifier la collision entre la balle et un joueur
        function collides(ball, player) {
            var ballRect = ball.getBoundingClientRect();
            var playerRect = player.getBoundingClientRect();

return (
                ballRect.left < playerRect.right &&
                ballRect.right > playerRect.left &&
                ballRect.top < playerRect.bottom &&
                ballRect.bottom > playerRect.top
            );
        }

// Événement pour déplacer les joueurs lors de l'appui sur les touches de direction
        document.addEventListener("keydown", movePlayers);

// Démarrage du déplacement de la balle
        moveBall();
    </script>
</body>
</html>