Create apong game with a paddle on both sides's game

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

No:40866

←

Prev Next

→

Create apong game with a paddle on both sides
Developer User18279｜Date and time 24/2/4 11:30:17
Build time 17.926 sec｜Game capacity 5.441KB｜

Script

Sure! Here's a simple implementation of the classic Pong game using JavaScript and enclosed in HTML's script tags. The game is designed for smartphone operation and uses pictograms for the paddles. To play, you can simply copy and paste the code into a single HTML file, save it, and open the file in a web browser.

This code sets up the game canvas, initializes the paddles and ball positions, handles user input (touch/mouse movements), updates the game state, and renders the game on the canvas. The paddles move vertically based on the user's touch or mouse input. The game loop continuously updates and renders the game on the canvas for smooth gameplay. The scores are displayed using different colors for the user and computer paddles.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

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

// Define variables to store the paddle and ball positions
        const paddleWidth = 20;
        const paddleHeight = 100;

const user = {
            x: 0,
            y: canvas.height / 2 - paddleHeight / 2,
            width: paddleWidth,
            height: paddleHeight,
            color: "#0aeb00",
            score: 0
        };

const computer = {
            x: canvas.width - paddleWidth,
            y: canvas.height / 2 - paddleHeight / 2,
            width: paddleWidth,
            height: paddleHeight,
            color: "#eb000a",
            score: 0
        };

const ball = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 10,
            speed: 4,
            dx: 4,
            dy: 4,
            color: "#ebd200"
        };

// Move the user paddle based on touch/mouse coordinates
        canvas.addEventListener("touchmove", movePaddle);

// Handle touch/mouse event to move the paddle
        function movePaddle(e) {
            const rect = canvas.getBoundingClientRect();
            user.y = e.touches[0].clientY - rect.top - user.height / 2;
        }

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

// Function to draw the ball on the canvas
        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();
        }

// Function to draw the score on the canvas
        function drawScore(x, y, score, color) {
            context.fillStyle = color;
            context.font = "35px sans-serif";
            context.fillText(score, x, y);
        }

// Function to update and move the ball
        function update() {
            ball.x += ball.dx;
            ball.y += ball.dy;

// Check collision with top/bottom walls
            if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
                ball.dy *= -1;
            }

// Check collision with paddles
            if (ball.x - ball.radius < user.x + user.width && ball.y > user.y && ball.y < user.y + user.height) {
                ball.dx *= -1;
            } else if (ball.x + ball.radius > computer.x && ball.y > computer.y && ball.y < computer.y + computer.height) {
                ball.dx *= -1;
            }

// Update the computer paddle position based on ball's y-position
            computer.y += (ball.y - (computer.y + computer.height / 2)) * 0.05;

// Update the scores
            if (ball.x - ball.radius < 0) {
                computer.score++;
                resetBall();
            } else if (ball.x + ball.radius > canvas.width) {
                user.score++;
                resetBall();
            }
        }

// Reset the ball position and direction
        function resetBall() {
            ball.x = canvas.width / 2;
            ball.y = canvas.height / 2;
            ball.speed = 4;
            ball.dx *= -1;
            ball.dy *= -1;
        }

// Function to render the game on the canvas
        function render() {
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the paddles
            drawPaddle(user.x, user.y, user.width, user.height, user.color);
            drawPaddle(computer.x, computer.y, computer.width, computer.height, computer.color);

// Draw the ball
            drawBall(ball.x, ball.y, ball.radius, ball.color);

// Draw the scores
            drawScore(canvas.width / 4, canvas.height / 6, user.score, user.color);
            drawScore((3 * canvas.width) / 4, canvas.height / 6, computer.score, computer.color);
        }

// Function to animate the game
        function gameLoop() {
            update();
            render();
            requestAnimationFrame(gameLoop);
        }

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