AI game creator

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

No:27712

137

←

Prev Next

→

Ping-pong
Developer User13778｜Date and time 23/12/8 12:35:05
Build time 35.664 sec｜Game capacity 4.348KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
        
        #game-container {
            display: inline-block;
        }
        
        #ball {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: black;
            position: absolute;
        }
        
        #paddle-left, #paddle-right {
            width: 15px;
            height: 70px;
            background-color: black;
            position: absolute;
        }
        
        #paddle-left {
            left: 10px;
        }
        
        #paddle-right {
            right: 10px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="ball"></div>
        <div id="paddle-left"></div>
        <div id="paddle-right"></div>
    </div>

// Initialize game
        var ballX = (containerWidth - ballSize)/2;
        var ballY = (containerHeight - ballSize)/2;
        var ballDirectionX = 1;
        var ballDirectionY = 1;

// Move paddles
        function movePaddle(element, direction) {
            var paddleTop = element.offsetTop;
            var paddleBottom = paddleTop + paddleHeight;
            
            if (direction === "up" && paddleTop > 0) {
                element.style.top = paddleTop - paddleSpeed + "px";
            }
            else if (direction === "down" && paddleBottom < containerHeight) {
                element.style.top = paddleTop + paddleSpeed + "px";
            }
        }

// Handle keydown event for paddle control
        document.addEventListener("keydown", function (event) {
            event.preventDefault();
            switch (event.keyCode) {
                case 87:  // W key
                    movePaddle(paddleLeft, "up");
                    break;
                case 83:  // S key
                    movePaddle(paddleLeft, "down");
                    break;
                case 38:  // Arrow Up key
                    movePaddle(paddleRight, "up");
                    break;
                case 40:  // Arrow Down key
                    movePaddle(paddleRight, "down");
                    break;
            }
        });

// Update game state
        function updateGame() {
            var nextBallX = ballX + (ballSpeed * ballDirectionX);
            var nextBallY = ballY + (ballSpeed * ballDirectionY);

// Collision detection with paddles
            var paddleLeftTop = paddleLeft.offsetTop;
            var paddleLeftBottom = paddleLeftTop + paddleHeight;
            var paddleRightTop = paddleRight.offsetTop;
            var paddleRightBottom = paddleRightTop + paddleHeight;

if (nextBallX <= paddleLeft.offsetWidth && nextBallY + ballSize >= paddleLeftTop && nextBallY <= paddleLeftBottom) {
                ballDirectionX = 1;
            }
            else if (nextBallX + ballSize >= containerWidth - paddleRight.offsetWidth && nextBallY + ballSize >= paddleRightTop && nextBallY <= paddleRightBottom) {
                ballDirectionX = -1;
            }

// Collision detection with walls
            if (nextBallY <= 0 || nextBallY >= containerHeight - ballSize) {
                ballDirectionY *= -1;
            }

// Update ball position
            ballX += (ballSpeed * ballDirectionX);
            ballY += (ballSpeed * ballDirectionY);

// Move the ball on the screen
            ball.style.left = ballX + "px";
            ball.style.top = ballY + "px";

// Recursive call to update game
            requestAnimationFrame(updateGame);
        }

// Start the game
        updateGame();
    </script>
</body>
</html>