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:17166

←

Prev Next

→

Atari Pong with a Mario Green Shell and a Red shel..ALL
Developer User7570｜Date and time 23/9/22 9:31:30
Build time 32.098 sec｜Game capacity 4.194KB｜

Script

Sure! Here's a simple implementation of Atari Pong using JavaScript, HTML, and pictograms for the Mario Green Shell and Red Shell. The game can be played on all devices, including smartphones.

Note that you'll need two image files, "emozi_rabbit.png" and "emozi_apple.png", which are the pictograms representing the Mario Green Shell and Red Shell respectively. Make sure to replace the filenames above with the actual image filenames.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's a simple implementation of Atari Pong using JavaScript, HTML, and pictograms for the Mario Green Shell and Red Shell. The game can be played on all devices, including smartphones.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atari Pong with Mario Shells</title>
</head>

// Set initial positions for paddles and ball
        var paddleWidth = 10, paddleHeight = 80;
        var paddleLeftY = (canvas.height - paddleHeight) / 2;
        var paddleRightY = paddleLeftY;
        var ballX = canvas.width / 2, ballY = canvas.height / 2;
        var ballSpeedX = 3, ballSpeedY = 3;
        var scoreLeft = 0, scoreRight = 0;

// Define the paddles (Mario Shells)
        var paddleLeftShell = new Image();
        paddleLeftShell.src = "mario_green_shell.png";
        var paddleRightShell = new Image();
        paddleRightShell.src = "mario_red_shell.png";

// Move paddles based on mouse/touch position
        canvas.addEventListener("mousemove", function (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;
            paddleLeftY = mouseY - paddleHeight / 2;
        });

// Update the game state
        function update() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// Bounce off top/bottom walls
            if (ballY < 0 || ballY > canvas.height) {
                ballSpeedY *= -1;
            }

// Bounce off paddles
            if (
                (ballX < paddleWidth && ballY > paddleLeftY && ballY < paddleLeftY + paddleHeight) ||
                (ballX > canvas.width - paddleWidth && ballY > paddleRightY && ballY < paddleRightY + paddleHeight)
            ) {
                ballSpeedX *= -1;
            }

// Score points if the ball goes past paddles
            if (ballX < 0) {
                scoreRight++;
                resetBall();
            } else if (ballX > canvas.width) {
                scoreLeft++;
                resetBall();
            }
        }

// Reset the ball position
        function resetBall() {
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedX *= -1;
            ballSpeedY = Math.random() * 2 + 1; // Randomize ball's vertical speed
        }

// Render the game state
        function render() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw paddles (Mario Shells)
            context.drawImage(paddleLeftShell, 0, paddleLeftY, paddleWidth, paddleHeight);
            context.drawImage(paddleRightShell, canvas.width - paddleWidth, paddleRightY, paddleWidth, paddleHeight);

// Draw the ball
            context.fillStyle = "white";
            context.beginPath();
            context.arc(ballX, ballY, 10, 0, Math.PI * 2, false);
            context.closePath();
            context.fill();

// Draw the scores
            context.font = "20px Arial";
            context.fillText("Player 1: " + scoreLeft, 20, 30);
            context.fillText("Player 2: " + scoreRight, canvas.width - 140, 30);
        }

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

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

</html>
```

Note that you'll need two image files, "mario_green_shell.png" and "mario_red_shell.png", which are the pictograms representing the Mario Green Shell and Red Shell respectively. Make sure to replace the filenames above with the actual image filenames.