AI game creator

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

No:8367

1131

←

Prev Next

→

Ping pong
Developer User4180｜Date and time 23/7/15 14:54:25
Build time 25.537 sec｜Game capacity 3.686KB｜

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 Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="ping-pong" width="500" height="300"></canvas>
    <script>
        // Initializing the canvas and game variables
        var canvas = document.getElementById("ping-pong");
        var context = canvas.getContext("2d");
        var ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 10, speedX: 2, speedY: 2 };
        var paddle = { x: 0, y: canvas.height / 2 - 40, width: 10, height: 80, dy: 8 };
        var playerScore = 0;
        var computerScore = 0;

// Function to draw the ball onto the canvas
        function drawBall(x, y, radius, color) {
            context.beginPath();
            context.arc(x, y, radius, 0, Math.PI * 2, false);
            context.fillStyle = color;
            context.fill();
            context.closePath();
        }

// Function to draw the paddle onto the canvas
        function drawPaddle(x, y, width, height, color) {
            context.fillStyle = color;
            context.fillRect(x, y, width, height);
        }

// Function to draw the score onto the canvas
        function drawScore(x, y, score, color) {
            context.font = "20px Arial";
            context.fillStyle = color;
            context.fillText(score, x, y);
        }

// Function to handle user input
        function movePaddle() {
            document.addEventListener("keydown", function (event) {
                if (event.key === "ArrowUp") {
                    paddle.y -= paddle.dy;
                } else if (event.key === "ArrowDown") {
                    paddle.y += paddle.dy;
                }
            });
        }

// Function to update the game state and redraw the canvas
        function update() {
            context.clearRect(0, 0, canvas.width, canvas.height);

drawBall(ball.x, ball.y, ball.radius, "#000");
            drawPaddle(paddle.x, paddle.y, paddle.width, paddle.height, "#000");
            drawScore(canvas.width / 2 - 15, 30, playerScore, "#000");
            drawScore(canvas.width / 2 + 15, 30, computerScore, "#000");

// Move the ball within the canvas
            ball.x += ball.speedX;
            ball.y += ball.speedY;
            if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
                ball.speedX *= -1;
            }
            if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
                ball.speedY *= -1;
            }

// Detect collision between ball and paddle
            if (
                ball.x - ball.radius < paddle.x + paddle.width &&
                ball.y + ball.radius > paddle.y &&
                ball.y - ball.radius < paddle.y + paddle.height
            ) {
                ball.speedX *= -1;
            }

// Update player score if the ball passes the paddle
            if (ball.x + ball.radius > canvas.width) {
                playerScore += 1;
            }

// Computer opponent logic
            if (paddle.y + paddle.height / 2 < ball.y) {
                paddle.y += paddle.dy;
            } else if (paddle.y + paddle.height / 2 > ball.y) {
                paddle.y -= paddle.dy;
            }

// Update computer score if the ball passes the left side of the canvas
            if (ball.x - ball.radius < 0) {
                computerScore += 1;
            }

requestAnimationFrame(update);
        }

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