Atari Pong with a Mario Green Shell and a Red shell for all devices's game

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

No:17168

←

Prev Next

→

Atari Pong with a Mario Green Shell and a Red shel..ALL
Developer User7570｜Date and time 23/9/22 9:33:19
Build time 32.737 sec｜Game capacity 4.817KB｜

Script

Sure, here's an implementation of Atari Pong with a Mario Green Shell and a Red Shell, designed for smartphone operation. The game is enclosed within script tags in a single HTML file and written in JavaScript. You can play it as a finished game.

To play the game on your smartphone, copy the code above and save it as a .html file. Open the file using a browser on your smartphone, and you'll be able to control the left paddle (Mario Green Shell) with touch input. The right paddle (Red Shell) is controlled by the computer. The ball will bounce off the paddles, and the objective is to prevent the ball from hitting the top or bottom walls. Have fun playing Atari Pong with Mario Shells!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Atari Pong with Mario Shells</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="pong" width="800" height="400"></canvas>

// Paddle and ball properties
            const paddleWidth = 10;
            const paddleHeight = 80;
            const ballRadius = 10;
            const borderWidth = 5;
            const paddleSpeed = 8;
            const ballSpeed = {
                x: 4,
                y: 4
            };

// Initial positions of paddles and ball
            let leftPaddle = canvas.height / 2 - paddleHeight / 2;
            let rightPaddle = canvas.height / 2 - paddleHeight / 2;
            let ball = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                dx: ballSpeed.x,
                dy: ballSpeed.y
            };

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

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

// Move the paddles
            function movePaddles() {
                document.addEventListener("touchmove", function (event) {
                    let touchY = event.touches[0].clientY;
                    if (touchY < leftPaddle + (paddleHeight / 2) && leftPaddle > 0) {
                        leftPaddle -= paddleSpeed;
                    } else if (touchY > leftPaddle + (paddleHeight / 2) && leftPaddle + paddleHeight < canvas.height) {
                        leftPaddle += paddleSpeed;
                    }
                });
            }

// Collision detection
            function collisionDetection() {
                // Ball and right paddle collision
                if (ball.x + ballRadius > canvas.width - borderWidth - paddleWidth &&
                    ball.y > rightPaddle &&
                    ball.y < rightPaddle + paddleHeight) {
                    ball.dx *= -1;
                }

// Ball and left paddle collision
                if (ball.x - ballRadius < borderWidth + paddleWidth &&
                    ball.y > leftPaddle &&
                    ball.y < leftPaddle + paddleHeight) {
                    ball.dx *= -1;
                }

// Ball and top/bottom wall collision
                if (ball.y + ballRadius > canvas.height - borderWidth || ball.y - ballRadius < borderWidth) {
                    ball.dy *= -1;
                }
            }

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

// Move the paddles
                movePaddles();

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

// Draw the paddles
                drawPaddle(0, leftPaddle, paddleWidth, paddleHeight, "green"); // Mario Green Shell
                drawPaddle(canvas.width - paddleWidth, rightPaddle, paddleWidth, paddleHeight, "red"); // Red Shell

// Draw the ball
                drawBall(ball.x, ball.y, ballRadius, "black");

// Collision detection
                collisionDetection();

// Request animation frame to continuously update the game state
                requestAnimationFrame(update);
            }

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