AI game creator

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

No:29157

←

Prev Next

→

Jogo de ping pong
Developer User14419｜Date and time 23/12/16 9:27:43
Build time 33.111 sec｜Game capacity 3.973KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Jogo de Ping Pong</title>
    <style>
        #pong {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid black;
        }
        #paddleA, #paddleB, #ball {
            position: absolute;
            background-color: black;
        }
        #paddleA, #paddleB {
            width: 15px;
            height: 60px;
        }
        #paddleA {
            left: 0;
        }
        #paddleB {
            right: 0;
        }
        #ball {
            width: 15px;
            height: 15px;
            left: 242.5px;
            top: 142.5px;
        }
    </style>
</head>
<body>
    <div id="pong">
        <div id="paddleA"></div>
        <div id="paddleB"></div>
        <div id="ball"></div>
    </div>

// Definir as propriedades de posicionamento inicial da quadra, remos e bola
        let pongWidth = pong.clientWidth;
        let pongHeight = pong.clientHeight;

let paddleAHeight = paddleA.clientHeight;
        let paddleAWidth = paddleA.clientWidth;
        let paddleA_Y = (pongHeight - paddleAHeight) / 2;

let paddleBHeight = paddleB.clientHeight;
        let paddleBWidth = paddleB.clientWidth;
        let paddleB_Y = (pongHeight - paddleBHeight) / 2;

let ballSize = ball.clientWidth;
        let ball_X = (pongWidth - ballSize) / 2;
        let ball_Y = (pongHeight - ballSize) / 2;

let ballSpeed_X = 2;
        let ballSpeed_Y = 2;

// Atualizar a posição dos elementos no jogo
        function update() {
            ball_X += ballSpeed_X;
            ball_Y += ballSpeed_Y;

// Verificar colisões com as bordas da quadra
            if (ball_Y <= 0 || ball_Y >= pongHeight - ballSize) {
                ballSpeed_Y *= -1;
            }

// Verificar colisões com os remos
            if (
                ball_X <= paddleAWidth &&
                ball_Y + ballSize >= paddleA_Y &&
                ball_Y <= paddleA_Y + paddleAHeight
            ) {
                ballSpeed_X *= -1;
            }

if (
                ball_X + ballSize >= pongWidth - paddleBWidth &&
                ball_Y + ballSize >= paddleB_Y &&
                ball_Y <= paddleB_Y + paddleBHeight
            ) {
                ballSpeed_X *= -1;
            }

// Verificar pontuação
            if (ball_X <= 0 || ball_X + ballSize >= pongWidth) {
                reset();
            }

// Atualizar posições na tela
            paddleA.style.top = paddleA_Y + "px";
            paddleB.style.top = paddleB_Y + "px";

ball.style.left = ball_X + "px";
            ball.style.top = ball_Y + "px";
        }

// Reseta a posição da bola e a velocidade
        function reset() {
            ball_X = (pongWidth - ballSize) / 2;
            ball_Y = (pongHeight - ballSize) / 2;
            ballSpeed_X *= -1;
            ballSpeed_Y *= -1;
        }

// Rastrear o toque do dedo na tela e mover o remo correspondente
        pong.addEventListener("touchmove", function (event) {
            if (event.touches[0].clientY < paddleA_Y) {
                paddleA_Y = 0;
            } else if (
                event.touches[0].clientY >
                pongHeight - paddleAHeight + paddleA_Y
            ) {
                paddleA_Y = pongHeight - paddleAHeight;
            } else {
                paddleA_Y = event.touches[0].clientY - paddleAHeight / 2;
            }
        });

// Iniciar o loop de atualização do jogo
        setInterval(update, 10);
    </script>
</body>
</html>