AI game creator

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

No:30286

←

Prev Next

→

Jogo de ping pong
Developer User14723｜Date and time 23/12/21 4:31:34
Build time 29.018 sec｜Game capacity 4.363KB｜

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>
</head>
<body>
    <canvas id="pingPongCanvas" width="480" height="320"></canvas>

// Definindo pontuação inicial dos jogadores
        var playerScore = 0;
        var computerScore = 0;

// Definindo posição inicial da raquete do jogador
        var playerY = (canvas.height - 60) / 2;

// Definindo posição inicial da raquete do computador
        var computerY = (canvas.height - 60) / 2;

// Definindo posição inicial da bola
        var ballX = canvas.width / 2;
        var ballY = canvas.height / 2;
        var ballSpeedX = -3;
        var ballSpeedY = -3;

// Função responsável por desenhar retângulos
        function drawRect(x, y, width, height, color) {
            context.fillStyle = color;
            context.fillRect(x, y, width, height);
        }

// Função responsável por desenhar o círculo (bola)
        function drawCircle(x, y, radius, color) {
            context.fillStyle = color;
            context.beginPath();
            context.arc(x, y, radius, 0, Math.PI * 2, false);
            context.closePath();
            context.fill();
        }

// Função responsável por desenhar o texto
        function drawText(text, x, y, color) {
            context.fillStyle = color;
            context.font = "32px sans-serif";
            context.fillText(text, x, y);
        }

// Função principal para renderizar todos os elementos do jogo
        function draw() {
            // Limpar a tela
            drawRect(0, 0, canvas.width, canvas.height, "#000");

// Desenhar a raquete do jogador
            drawRect(10, playerY, 10, 60, "#FFF");

// Desenhar a raquete do computador
            drawRect(canvas.width - 20, computerY, 10, 60, "#FFF");

// Desenhar a bola
            drawCircle(ballX, ballY, 8, "#FFF");

// Desenhar a pontuação dos jogadores
            drawText(playerScore, 100, 50, "#FFF");
            drawText(computerScore, canvas.width - 130, 50, "#FFF");
        }

// Função responsável por atualizar a posição dos elementos do jogo
        function update() {
            // Movimentação da raquete do jogador
            canvas.addEventListener("touchmove", function (event) {
                playerY = event.touches[0].clientY - canvas.offsetTop - 30;
                if (playerY < 0) {
                    playerY = 0;
                } else if (playerY > canvas.height - 60) {
                    playerY = canvas.height - 60;
                }
            });

// Movimentação da raquete do computador
            computerY += (ballY - (computerY + 30)) * 0.1;

// Movimentação da bola
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// Lógica de colisão com as paredes
            if (ballY < 0 || ballY > canvas.height - 8) {
                ballSpeedY = -ballSpeedY;
            }

// Lógica de colisão com as raquetes
            if (ballX < 20) {
                if (ballY > playerY && ballY < playerY + 60) {
                    ballSpeedX = -ballSpeedX;
                    playerScore++;
                } else {
                    resetGame();
                    computerScore++;
                }
            }
            if (ballX > canvas.width - 28) {
                if (ballY > computerY && ballY < computerY + 60) {
                    ballSpeedX = -ballSpeedX;
                } else {
                    resetGame();
                    playerScore++;
                }
            }
        }

// Função responsável por reiniciar o jogo após a bola sair da tela
        function resetGame() {
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedX = -3;
            ballSpeedY = -3;
        }

// Função de gameloop para atualizar e renderizar o jogo continuamente
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

// Iniciar o jogo
        gameLoop();
    </script>
</body>
</html>