Ping pong with friends's game

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

No:30369

←

Prev Next

→

Ping pong with friends
Developer User14751｜Date and time 23/12/21 9:49:35
Build time 41.004 sec｜Game capacity 6.06KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Ping Pong com Amigos</title>
</head>
<body>
    <canvas id="pingpongCanvas" width="800" height="400"></canvas>

// Função para retornar a posição do mouse
        function calculateMousePos(evt) {
            var rect = canvas.getBoundingClientRect();
            var root = document.documentElement;
            var mouseX = evt.clientX - rect.left - root.scrollLeft;
            var mouseY = evt.clientY - rect.top - root.scrollTop;
            return {
                x: mouseX,
                y: mouseY
            };
        }

// Função para reiniciar o jogo
        function handleMouseClick(evt) {
            if (showWinScreen) {
                player1Score = 0;
                player2Score = 0;
                showWinScreen = false;
            }
        }

// Função principal de desenho do jogo
        function drawEverything() {
            // Preencher o fundo do canvas
            colorRect(0, 0, canvas.width, canvas.height, 'black');

if (showWinScreen) {
                canvasContext.fillStyle = 'white';

if (player1Score >= 3) {
                        canvasContext.fillText("Jogador 1 Venceu!", 350, 200);
                    } else if (player2Score >= 3) {
                        canvasContext.fillText("Jogador 2 Venceu!", 350, 200);
                    }

canvasContext.fillText("Clique para continuar", 350, 500);
                return;
            }

// Desenhar a rede no centro
            drawNet();

// Desenhar a raquete do jogador 1
            colorRect(0, paddle1Y, paddleWidth, paddleHeight, 'white');

// Desenhar a raquete do jogador 2
            colorRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight, 'white');

// Desenhar a bola
            colorCircle(ballX, ballY, 10, 'white');

// Exibir pontuação
            canvasContext.fillText("Jogador 1: " + player1Score, 100, 100);
            canvasContext.fillText("Jogador 2: " + player2Score, canvas.width - 175, 100);
        }

// Função para desenhar um retângulo
        function colorRect(leftX, topY, width, height, drawColor) {
            canvasContext.fillStyle = drawColor;
            canvasContext.fillRect(leftX, topY, width, height);
        }

// Função para desenhar um círculo
        function colorCircle(centerX, centerY, radius, drawColor) {
            canvasContext.fillStyle = drawColor;
            canvasContext.beginPath();
            canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
            canvasContext.fill();
        }

// Função para desenhar a rede central
        function drawNet() {
            for (var i = 0; i < canvas.height; i += 40) {
                colorRect(canvas.width / 2 - 1, i, 2, 20, 'white');
            }
        }

// Função para mover a raquete do jogador 2 automaticamente
        function computerMovement() {
            var paddle2YCenter = paddle2Y + (paddleHeight / 2);
            if (paddle2YCenter < ballY - 35) {
                paddle2Y += 6;
            } else if (paddle2YCenter > ballY + 35) {
                paddle2Y -= 6;
            }
        }

// Função para atualizar a posição dos elementos
        function moveEverything() {
            if (showWinScreen) {
                return;
            }

computerMovement();

ballX += ballSpeedX;
            ballY += ballSpeedY;

if (ballX < 0) {
                if (ballY > paddle1Y && ballY < paddle1Y + paddleHeight) {
                    ballSpeedX = -ballSpeedX;

var deltaY = ballY - (paddle2Y + paddleHeight / 2);
                    ballSpeedY = deltaY * 0.35;
                } else {
                    player1Score++; // jogador 1 pontua
                    ballReset();
                }
            }

if (ballY < 0) {
                ballSpeedY = -ballSpeedY;
            }
            if (ballY > canvas.height) {
                ballSpeedY = -ballSpeedY;
            }
        }

// Função para reposicionar a bola no centro
        function ballReset() {
            if (player1Score >= 3 || player2Score >= 3) {
                showWinScreen = true;
            }

ballSpeedX = -ballSpeedX;
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
        }

// Função de inicialização para executar no carregamento da página
        window.onload = function () {
            canvas = document.getElementById('pingpongCanvas');
            canvasContext = canvas.getContext('2d');

var framesPerSecond = 30;
            setInterval(function () {
                moveEverything();
                drawEverything();
            }, 1000 / framesPerSecond);

canvas.addEventListener('mousemove', function (evt) {
                var mousePos = calculateMousePos(evt);
                paddle1Y = mousePos.y - paddleHeight / 2;
            });

canvas.addEventListener('mousedown', handleMouseClick);
        }
    </script>
</body>
</html>