Pong with up and down controls for each side's game

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

No:17635

124

←

Prev Next

→

Pong with up and down controls for each side
Developer User7745｜Date and time 23/9/24 4:29:54
Build time 48.933 sec｜Game capacity 5.924KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Pong Game</title>
    <style>
        #pong {
            position: relative;
            width: 600px;
            height: 400px;
            background: black;
            margin: 0 auto;
        }

.paddle {
            position: absolute;
            width: 10px;
            height: 60px;
            background: white;
        }

#leftPaddle {
            left: 10px;
            top: 170px;
        }

#rightPaddle {
            right: 10px;
            top: 170px;
        }

#ball {
            position: absolute;
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="pong">
        <div id="leftPaddle" class="paddle"></div>
        <div id="rightPaddle" class="paddle"></div>
        <div id="ball"></div>
    </div>

// Function to update the position of the paddles
        function updatePaddlePosition() {
            leftPaddleY += leftPaddleDirection * leftPaddleSpeed;
            rightPaddleY += rightPaddleDirection * rightPaddleSpeed;

if (leftPaddleY <= 0) {
                leftPaddleY = 0;
            }

if (leftPaddleY >= (pongHeight - paddleHeight)) {
                leftPaddleY = pongHeight - paddleHeight;
            }

if (rightPaddleY <= 0) {
                rightPaddleY = 0;
            }

if (rightPaddleY >= (pongHeight - paddleHeight)) {
                rightPaddleY = pongHeight - paddleHeight;
            }

leftPaddle.style.top = leftPaddleY + "px";
            rightPaddle.style.top = rightPaddleY + "px";
        }

// Function to update the position of the ball
        function updateBallPosition() {
            var ballX = parseInt(getComputedStyle(ball).left);
            var ballY = parseInt(getComputedStyle(ball).top);

// Ball movement
            ballX += ballXSpeed;
            ballY += ballYSpeed;

// Checking collision with paddles
            if (ballX <= paddleWidth && ballY + ballHeight >= leftPaddleY && ballY <= leftPaddleY + paddleHeight) {
                ballXSpeed = -ballXSpeed;
            }

if (ballX + ballWidth >= pongWidth - paddleWidth && ballY + ballHeight >= rightPaddleY && ballY <= rightPaddleY + paddleHeight) {
                ballXSpeed = -ballXSpeed;
            }

// Checking collision with top and bottom edges
            if (ballY <= 0 || ballY + ballHeight >= pongHeight) {
                ballYSpeed = -ballYSpeed;
            }

// Checking if ball goes beyond paddles
            if (ballX <= 0 || ballX + ballWidth >= pongWidth) {
                clearInterval(gameInterval);
                alert("Game over!");
                resetGame();
            }

// Update ball position
            ball.style.left = ballX + "px";
            ball.style.top = ballY + "px";
        }

// Reset game function
        function resetGame() {
            ball.style.left = "295px";
            ball.style.top = "195px";
            leftPaddle.style.top = "170px";
            rightPaddle.style.top = "170px";
            leftPaddleY = 170;
            rightPaddleY = 170;
            gameInterval = setInterval(updateGame, 20);
        }

// Function to handle key press events
        function handleKeyDown(event) {
            event.preventDefault();

var keyCode = event.keyCode;

if (keyCode === 38) {
                rightPaddleDirection = -1; // Up arrow key pressed
            } else if (keyCode === 40) {
                rightPaddleDirection = 1; // Down arrow key pressed
            }

if (keyCode === 87) {
                leftPaddleDirection = -1; // W key pressed
            } else if (keyCode === 83) {
                leftPaddleDirection = 1; // S key pressed
            }
        }

// Function to handle key release events
        function handleKeyUp(event) {
            event.preventDefault();

var keyCode = event.keyCode;

if (keyCode === 38 || keyCode === 40) {
                rightPaddleDirection = 0; // Up arrow or down arrow key released
            }

if (keyCode === 87 || keyCode === 83) {
                leftPaddleDirection = 0; // W or S key released
            }
        }

// Main game loop
        function updateGame() {
            updatePaddlePosition();
            updateBallPosition();
        }

// Initialize game
        function initializeGame() {
            document.addEventListener("keydown", handleKeyDown);
            document.addEventListener("keyup", handleKeyUp);
            resetGame();
        }

// Start processing
        initializeGame();
    </script>
</body>
</html>