AI game creator

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

No:40864

←

Prev Next

→

Pong game
Developer User18279｜Date and time 24/2/4 11:27:22
Build time 13.279 sec｜Game capacity 3.972KB｜

Script

Sure! Here's an example of a simple Pong game implemented in a single HTML file using JavaScript, enclosed in script tags. The game can be played on a smartphone and utilizes pictograms for the visual elements.

This code sets up a simple game of Pong where the user paddle can be controlled by dragging on a smartphone screen. The ball bounces off the paddles and the walls, and the computer-controlled paddle tries to follow the ball's position. The game loop is initiated by calling the `startGame()` function, and the game updates are handled by the `update()` function. The necessary drawing functions and collision detection logic are included as well.

←

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 {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="pong" width="400" height="200"></canvas>

// Paddles
        const paddleWidth = 10, paddleHeight = 50;
        const user = { x: 0, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "#ffcd03", dy: 10 };
        const computer = { x: canvas.width - paddleWidth, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: "#ffcd03", dy: 4 };

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

// Draw paddle
        function drawPaddle(x, y, width, height, color) {
            context.fillStyle = color;
            context.fillRect(x, y, width, height);
        }

// Draw 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();
        }

// Move paddles
        function movePaddle(event) {
            // User paddle movement
            let rect = canvas.getBoundingClientRect();
            user.y = event.touches[0].clientY - rect.top - user.height / 2;
        }

// Update canvas
        function update() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

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

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

// Move ball
            ball.x += ball.dx;
            ball.y += ball.dy;

// Collision detection with paddles
            if (ball.x + ball.radius > canvas.width - paddleWidth || ball.x - ball.radius < paddleWidth) {
                ball.dx *= -1;
            }

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

// Move computer paddle automatically
            computer.y += (ball.y - (computer.y + computer.height / 2)) * 0.1;

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

// Request animation frame
            requestAnimationFrame(update);
        }

// Start game
        function startGame() {
            requestAnimationFrame(update);
            canvas.addEventListener("touchmove", movePaddle);
        }

// Initiate game
        startGame();
    </script>
</body>
</html>
```