AI game creator

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

No:24956

←

Prev Next

→

Ping pong
Developer User12039｜Date and time 23/11/15 4:22:57
Build time 148.886 sec｜Game capacity 4.757KB｜

Script

Sure! Here's a simple ping pong game implemented as a single HTML file using JavaScript and enclosed within script tags:

To play the game, you need to save this code as a .html file, open it in your web browser, and you'll see the ping pong game running on the canvas. Control the player paddle by moving your mouse, and try to hit the ball back to the computer paddle while avoiding missing the ball. Please note that due to the limitations of text-based format, the pictograms are not included in the code. However, you can customize the visuals and add pictograms using HTML and CSS styles as needed.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple ping pong game implemented as a single HTML file using JavaScript and enclosed within script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Ping Pong Game</title>
    <style>
        canvas {
            background: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="pingPongCanvas" width="640" height="480"></canvas>

// Create the paddles
        var paddleWidth = 10, paddleHeight = 80;
        var playerPaddle = { x: 10, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight };
        var computerPaddle = { x: canvas.width - paddleWidth - 10, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight };

// Create the ball
        var ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 6, dx: 3, dy: -3 };

// Store player and computer scores
        var playerScore = 0, computerScore = 0;

// Update the paddles' positions based on mouse movement
        canvas.addEventListener("mousemove", function (event) {
            var mousePos = getMousePos(event);
            playerPaddle.y = mousePos.y - playerPaddle.height / 2;
        });

function getMousePos(event) {
            var rect = canvas.getBoundingClientRect();
            var root = document.documentElement;
            var mouseX = event.clientX - rect.left - root.scrollLeft;
            var mouseY = event.clientY - rect.top - root.scrollTop;
            return { x: mouseX, y: mouseY };
        }

// Update the game canvas
        function update() {
            // Move the ball
            ball.x += ball.dx;
            ball.y += ball.dy;

// Check collision with paddles
            if (ball.x + ball.radius > canvas.width - paddleWidth || ball.x - ball.radius < paddleWidth) {
                if (ball.y > playerPaddle.y && ball.y < playerPaddle.y + playerPaddle.height) {
                    ball.dx = -ball.dx;
                }
                else if (ball.y > computerPaddle.y && ball.y < computerPaddle.y + computerPaddle.height) {
                    ball.dx = -ball.dx;
                }
                else {
                    // Ball missed the paddles
                    if (ball.dx > 0) {
                        playerScore++;
                    }
                    else {
                        computerScore++;
                    }
                    resetBall();
                }
            }

if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
                ball.dy = -ball.dy;
            }

// Move the computer paddle automatically (simple AI)
            if (computerPaddle.y + computerPaddle.height / 2 < ball.y) {
                computerPaddle.y += 2;
            }
            else {
                computerPaddle.y -= 2;
            }

// Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw game elements
            context.fillStyle = "#FFF";
            context.fillRect(playerPaddle.x, playerPaddle.y, playerPaddle.width, playerPaddle.height);
            context.fillRect(computerPaddle.x, computerPaddle.y, computerPaddle.width, computerPaddle.height);

context.beginPath();
            context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
            context.closePath();
            context.fill();

// Draw scores
            context.font = "20px Arial";
            context.fillText("Player: " + playerScore, 20, 40);
            context.fillText("Computer: " + computerScore, canvas.width - 160, 40);

// Request next frame
            requestAnimationFrame(update);
        }

// Reset the ball position
        function resetBall() {
            ball.x = canvas.width / 2;
            ball.y = canvas.height / 2;
            ball.dx = ball.dx > 0 ? 3 : -3;
            ball.dy = ball.dy > 0 ? -3 : 3;
        }

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

Please note that due to the limitations of text-based format, the pictograms are not included in the code. However, you can customize the visuals and add pictograms using HTML and CSS styles as needed.