Computer plays itself in pong's game

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

No:26959

←

Prev Next

→

Computer plays itself in pong
Developer User13333｜Date and time 23/12/3 14:29:27
Build time 85.756 sec｜Game capacity 4.452KB｜

Script

Sure! Here's an example of a simple Pong game implemented as a single HTML file using JavaScript:

You can copy and paste the above code into an empty HTML file and save it with a .html extension. When you open the file in a web browser, you will see the Pong game running. The player can control the paddle using touch or mouse input on a smartphone. The computer-controlled paddle will automatically try to block the ball. The player's score is displayed on the left side, and the computer's score is displayed on the right side. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a simple Pong game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas id="pongCanvas" width="800" height="400"></canvas>

let paddle1Y = (canvas.height - paddleHeight) / 2;
        let paddle2Y = (canvas.height - paddleHeight) / 2;

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

let playerScore = 0;
        let computerScore = 0;

const paddleSpeed = 5;

// Helper function to draw a rectangle
        function drawRect(x, y, width, height, color) {
            context.fillStyle = color;
            context.fillRect(x, y, width, height);
        }

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

// Helper function to draw the net
        function drawNet() {
            for (let i = 0; i <= canvas.height; i += 20) {
                drawRect(canvas.width / 2 - 1, i, 2, 10, "white");
            }
        }

// Update function
        function update() {
            // Move the paddles
            if (paddle1Y > 0) {
                paddle1Y -= paddleSpeed;
            }
            if (paddle2Y > 0) {
                paddle2Y -= paddleSpeed;
            }

// Move the ball
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// Handle collision with paddles
            if (
                (ballY + 20 >= paddle1Y && ballY <= paddle1Y + paddleHeight && ballX - 10 <= paddleWidth) ||
                (ballY + 20 >= paddle2Y && ballY <= paddle2Y + paddleHeight && ballX + 10 >= canvas.width - paddleWidth)
            ) {
                ballSpeedX = -ballSpeedX;
            }

// Handle collision with walls
            if (ballY <= 0 || ballY + 20 >= canvas.height) {
                ballSpeedY = -ballSpeedY;
            }

// Handle scoring
            if (ballX <= 0) {
                computerScore++;
                resetBall();
            } else if (ballX + 20 >= canvas.width) {
                playerScore++;
                resetBall();
            }
        }

// Reset ball position
        function resetBall() {
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedX = Math.random() < 0.5 ? -2 : 2;
            ballSpeedY = Math.random() < 0.5 ? -2 : 2;
        }

// Render function
        function render() {
            // Clear canvas
            drawRect(0, 0, canvas.width, canvas.height, "black");

// Draw paddles
            drawRect(0, paddle1Y, paddleWidth, paddleHeight, "white");
            drawRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight, "white");

// Draw ball
            drawBall(ballX, ballY, 10, "white");

// Draw net
            drawNet();

// Draw scores
            context.fillStyle = "white";
            context.fillText("Player: " + playerScore, 20, 20);
            context.fillText("Computer: " + computerScore, canvas.width - 120, 20);
        }

// Game loop
        function gameLoop() {
            update();
            render();
        }

// Start the game loop
        setInterval(gameLoop, 1000 / 60);
    </script>
</body>
</html>
```