Um simples jogo de pong's game

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

No:18347

←

Prev Next

→

Um simples jogo de pong
Developer User8098｜Date and time 23/9/28 13:43:03
Build time 65.539 sec｜Game capacity 5.466KB｜

Script

Aqui está um exemplo de um jogo Pong simples implementado em um único arquivo HTML.

Para jogar o jogo, pressione as teclas de seta para cima e para baixo para mover a barra da esquerda. Pressione as teclas "W" e "S" para mover a barra da direita. O objetivo é rebater a bola com as barras e evitar que ela atinja as paredes do canvas. Certifique-se de salvar o código acima em um arquivo HTML e abri-lo em um navegador para jogar o jogo. Aproveite o Pong!

←

Prev　Next

→ 　

Back　

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

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

Aqui está um exemplo de um jogo Pong simples implementado em um único arquivo HTML.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Jogo Pong</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="300"></canvas>

// Definindo as posições iniciais da bola e das barras
        var ballX = canvas.width / 2;
        var ballY = canvas.height / 2;
        var ballRadius = 10;
        var ballSpeedX = 2;
        var ballSpeedY = -2;

var paddleWidth = 10;
        var paddleHeight = 50;
        var paddleSpeed = 5;

var leftPaddleY = canvas.height / 2 - paddleHeight / 2;
        var rightPaddleY = canvas.height / 2 - paddleHeight / 2;

// Variáveis para controle
        var upPressed = false;
        var downPressed = false;
        var wPressed = false;
        var sPressed = false;

// Função para desenhar a bola
        function desenharBola() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#000000";
            ctx.fill();
            ctx.closePath();
        }

// Função para desenhar as barras
        function desenharBarras() {
            // Desenhar a barra da esquerda
            ctx.fillStyle = "#000000";
            ctx.fillRect(0, leftPaddleY, paddleWidth, paddleHeight);

// Desenhar a barra da direita
            ctx.fillStyle = "#000000";
            ctx.fillRect(canvas.width - paddleWidth, rightPaddleY, paddleWidth, paddleHeight);
        }

// Função para atualizar a posição dos elementos
        function atualizarPosicao() {
            // Movimentar a bola
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// Verificar colisão com as paredes
            if (ballY + ballRadius > canvas.height || ballY - ballRadius < 0) {
                ballSpeedY = -ballSpeedY;
            }

// Verificar colisão com as barras
            if (ballX - ballRadius < paddleWidth && ballY > leftPaddleY && ballY < leftPaddleY + paddleHeight) {
                ballSpeedX = -ballSpeedX;
            } else if (ballX + ballRadius > canvas.width - paddleWidth && ballY > rightPaddleY && ballY < rightPaddleY + paddleHeight) {
                ballSpeedX = -ballSpeedX;
            }
        }

// Função para atualizar a posição das barras
        function atualizarPosicaoBarras() {
            // Mover a barra da esquerda
            if (upPressed && leftPaddleY > 0) {
                leftPaddleY -= paddleSpeed;
            }
            if (downPressed && leftPaddleY + paddleHeight < canvas.height) {
                leftPaddleY += paddleSpeed;
            }

// Mover a barra da direita
            if (wPressed && rightPaddleY > 0) {
                rightPaddleY -= paddleSpeed;
            }
            if (sPressed && rightPaddleY + paddleHeight < canvas.height) {
                rightPaddleY += paddleSpeed;
            }
        }

// Função para desenhar na tela
        function desenhar() {
            // Limpar o canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Desenhar a bola
            desenharBola();

// Desenhar as barras
            desenharBarras();

// Atualizar a posição dos elementos
            atualizarPosicao();

// Atualizar a posição das barras
            atualizarPosicaoBarras();
        }

// Função para lidar com o pressionamento de teclas
        function pressionarTeclaHandler(e) {
            if (e.keyCode === 38) {
                upPressed = true;
            } else if (e.keyCode === 40) {
                downPressed = true;
            } else if (e.keyCode === 87) {
                wPressed = true;
            } else if (e.keyCode === 83) {
                sPressed = true;
            }
        }

// Função para lidar com a liberação de teclas
        function soltarTeclaHandler(e) {
            if (e.keyCode === 38) {
                upPressed = false;
            } else if (e.keyCode === 40) {
                downPressed = false;
            } else if (e.keyCode === 87) {
                wPressed = false;
            } else if (e.keyCode === 83) {
                sPressed = false;
            }
        }

// Adicionar os event listeners para lidar com o pressionamento e liberação das teclas
        document.addEventListener("keydown", pressionarTeclaHandler, false);
        document.addEventListener("keyup", soltarTeclaHandler, false);

// Iniciar o jogo
        setInterval(desenhar, 10);
    </script>
</body>
</html>
```

Certifique-se de salvar o código acima em um arquivo HTML e abri-lo em um navegador para jogar o jogo. Aproveite o Pong!