AI game creator

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

No:27307

←

Prev Next

→

Pong
Developer User13247｜Date and time 23/12/6 2:56:29
Build time 134.597 sec｜Game capacity 6.251KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
    #canvas {
        border: 1px solid #000;
    }
</style>
</head>
<body>
    <canvas id="canvas" width="800" height="400"></canvas>

// Eventos do teclado
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(event) {
            if (event.key == "ArrowUp") {
                upKeyPressed = true;
            } else if (event.key == "ArrowDown") {
                downKeyPressed = true;
            }
        }

function keyUpHandler(event) {
            if (event.key == "ArrowUp") {
                upKeyPressed = false;
            } else if (event.key == "ArrowDown") {
                downKeyPressed = false;
            }
        }

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

// Função para desenhar as raquetes
        function drawPaddles() {
            // Raquete esquerda
            ctx.beginPath();
            ctx.rect(0, paddleLeftY, paddleWidth, paddleHeight);
            ctx.fillStyle = "#000";
            ctx.fill();
            ctx.closePath();

// Raquete direita
            ctx.beginPath();
            ctx.rect(canvas.width - paddleWidth, paddleRightY, paddleWidth, paddleHeight);
            ctx.fillStyle = "#000";
            ctx.fill();
            ctx.closePath();
        }

// Função para desenhar a pontuação
        function drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#000";
            ctx.fillText("Player 1: " + scoreLeft, 10, 20);
            ctx.fillText("Player 2: " + scoreRight, canvas.width - 95, 20);
        }

// Função para verificar colisões e atualizar a posição dos elementos
        function update() {
            // Verificar colisão com as paredes superiores e inferiores
            if (ballY + dy < ballRadius || ballY + dy > canvas.height - ballRadius) {
                dy = -dy; // Inverter a direção vertical
            }

// Verificar colisão com as raquetes
            if (ballX - ballRadius < paddleWidth && ballY > paddleLeftY && ballY < paddleLeftY + paddleHeight) {
                dx = -dx; // Inverter a direção horizontal
            } else if (ballX + ballRadius > canvas.width - paddleWidth && ballY > paddleRightY && ballY < paddleRightY + paddleHeight) {
                dx = -dx; // Inverter a direção horizontal
            } else if (ballX - ballRadius < 0) { // Se a bola ultrapassar a raquete esquerda
                scoreRight++; // Incrementar a pontuação do jogador direito
                resetBall();
            } else if (ballX + ballRadius > canvas.width) { // Se a bola ultrapassar a raquete direita
                scoreLeft++; // Incrementar a pontuação do jogador esquerdo
                resetBall();
            }

// Atualizar a posição da bola
            ballX += dx;
            ballY += dy;

// Atualizar a posição das raquetes
            if (upKeyPressed && paddleRightY > 0) {
                paddleRightY -= 7;
            } else if (downKeyPressed && paddleRightY < canvas.height - paddleHeight) {
                paddleRightY += 7;
            }

// Verificar se o jogador esquerdo está jogando no modo smartphone
            if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
                document.addEventListener('click', function () {
                    DeviceOrientationEvent.requestPermission().then(function (response) {
                        if (response == 'granted') {
                            window.addEventListener('deviceorientation', function (event) {
                                var beta = event.beta; // Ângulo de inclinação do dispositivo

// Atualizar a posição da raquete esquerda com base no ângulo de inclinação
                                if (beta < -5) {
                                    paddleLeftY += 7;
                                } else if (beta > 5) {
                                    paddleLeftY -= 7;
                                }

// Limitar a posição da raquete esquerda dentro do canvas
                                if (paddleLeftY < 0) {
                                    paddleLeftY = 0;
                                } else if (paddleLeftY > canvas.height - paddleHeight) {
                                    paddleLeftY = canvas.height - paddleHeight;
                                }
                            });
                        }
                    }).catch(console.error);
                });
            }
        }

// Função para resetar a bola
        function resetBall() {
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            dx = -dx;
            dy = -dy;
        }

// Função principal do jogo
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpar o canvas
            drawBall();
            drawPaddles();
            drawScore();
            update();

// Chamar a função novamente para criar o loop do jogo
            requestAnimationFrame(gameLoop);
        }

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