Super Mario Bros X Atari Pong's game

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

No:17052

←

Prev Next

→

Super Mario Bros X Atari Pong
Developer User7570｜Date and time 23/9/22 7:14:03
Build time 27.708 sec｜Game capacity 3.298KB｜

Script

Sure! Here's an example implementation of a game combining elements of Super Mario Bros and Atari Pong using HTML, JavaScript, and pictograms:

In this game, you control Mario using the left and right arrow keys on your smartphone. It's a simple demo where you can move Mario horizontally across the screen, and there's a paddle at the top which could represent the Atari Pong element. Note: This code assumes you have an image file named "emozi_all/mario.png" in the same directory as the HTML file for displaying Mario. Please replace it with an appropriate image file of your choice. This implementation is just a basic starting point, and you can expand upon it to incorporate additional game mechanics, scoring, collision detection, and more, as per your requirements and preferences.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example implementation of a game combining elements of Super Mario Bros and Atari Pong using HTML, JavaScript, and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Super Mario Bros X Atari Pong</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

// Game canvas
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");

// Mario character
    const mario = {
      x: 380,
      y: 550,
      width: 40,
      height: 40,
      speed: 5,
      dx: 0
    };

// Paddle
    const paddle = {
      x: canvas.width / 2 - 40,
      y: 10,
      width: 80,
      height: 20,
      speed: 5,
      dx: 0
    };

// Draw Mario
    function drawMario() {
      const marioImg = new Image();
      marioImg.src = "mario.png";
      context.drawImage(marioImg, mario.x, mario.y, mario.width, mario.height);
    }

// Draw paddle
    function drawPaddle() {
      context.beginPath();
      context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
    }

// Update game objects
    function update() {
      moveMario();
      movePaddle();
      drawMario();
      drawPaddle();
    }

// Move Mario
    function moveMario() {
      mario.x += mario.dx;
      if (mario.x < 0) {
        mario.x = 0;
      } else if (mario.x + mario.width > canvas.width) {
        mario.x = canvas.width - mario.width;
      }
    }

// Move paddle
    function movePaddle() {
      paddle.x += paddle.dx;
      if (paddle.x < 0) {
        paddle.x = 0;
      } else if (paddle.x + paddle.width > canvas.width) {
        paddle.x = canvas.width - paddle.width;
      }
    }

// Keyboard controls
    document.addEventListener("keydown", function(event) {
      if (event.key === "ArrowLeft") {
        mario.dx = -mario.speed;
        paddle.dx = -paddle.speed;
      } else if (event.key === "ArrowRight") {
        mario.dx = mario.speed;
        paddle.dx = paddle.speed;
      }
    });

document.addEventListener("keyup", function(event) {
      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
        mario.dx = 0;
        paddle.dx = 0;
      }
    });

// Game loop
    function loop() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      update();
      requestAnimationFrame(loop);
    }

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

Note: This code assumes you have an image file named "mario.png" in the same directory as the HTML file for displaying Mario. Please replace it with an appropriate image file of your choice.

This implementation is just a basic starting point, and you can expand upon it to incorporate additional game mechanics, scoring, collision detection, and more, as per your requirements and preferences.