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

←

Prev Next

→

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

Script

Sure! Here's an example of a single HTML file implementing a game resembling Atari Pong using pictograms of Mario Green Shell and Red Shell:

To run the game, save the above code in a file with the extension `.html` and make sure to have image files named `emozi_all/game.png` and `emozi_apple.png` in the same directory as the HTML file. Open the HTML file using any web browser, and you should be able to play the game using your smartphone or any other device with touch input. Note: You would need to replace the image file names and adjust the ball and paddle sizes according to your needs.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

Sure! Here's an example of a single HTML file implementing a game resembling Atari Pong using pictograms of Mario Green Shell and Red Shell:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Atari Pong with Mario Green Shell and Red Shell</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="pongCanvas" width="800" height="400"></canvas>
    <script>
        // Game variables
        var canvas, context;
        var ballX, ballY, ballSpeedX, ballSpeedY;
        var paddleX, paddleY, paddleWidth, paddleHeight;
        var marioGreenShell, redShell;

// Initialization function
        function initialize() {
            canvas = document.getElementById("pongCanvas");
            context = canvas.getContext("2d");

// Ball variables
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedX = 5;
            ballSpeedY = 5;

// Paddle variables
            paddleWidth = 20;
            paddleHeight = 100;
            paddleX = 0;
            paddleY = (canvas.height - paddleHeight) / 2;

// Load the pictograms
            marioGreenShell = new Image();
            marioGreenShell.src = "mario_green_shell.png";
            redShell = new Image();
            redShell.src = "red_shell.png";

// Set up event listeners
            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;

paddleY = mouseY - paddleHeight / 2;
            });

setInterval(move, 16);
        }

// Update function
        function move() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// Ball collision with the top or bottom walls
            if (ballY < 0 || ballY > canvas.height) {
                ballSpeedY *= -1;
            }

// Ball collision with the left paddle
            if (ballX < paddleWidth && ballY > paddleY && ballY < paddleY + paddleHeight) {
                ballSpeedX *= -1;
            }

// Ball collision with the right wall (missed paddle)
            if (ballX > canvas.width) {
                ballSpeedX *= -1;
            }

draw();
        }

// Draw function
        function draw() {
            // Clear the canvas
            context.fillStyle = "black";
            context.fillRect(0, 0, canvas.width, canvas.height);

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

// Draw the paddles
            context.drawImage(marioGreenShell, paddleX, paddleY, paddleWidth, paddleHeight);
            context.drawImage(redShell, canvas.width - paddleWidth, paddleY, paddleWidth, paddleHeight);

// Draw the middle line
            context.fillStyle = "white";
            context.fillRect(canvas.width / 2 - 2, 0, 4, canvas.height);
        }

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

To run the game, save the above code in a file with the extension `.html` and make sure to have image files named `mario_green_shell.png` and `red_shell.png` in the same directory as the HTML file. Open the HTML file using any web browser, and you should be able to play the game using your smartphone or any other device with touch input.

Note: You would need to replace the image file names and adjust the ball and paddle sizes according to your needs.