Pong paddles as bosses in super Mario Bros's game

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

No:17056

←

Prev Next

→

Pong paddles as bosses in super Mario Bros
Developer User7570｜Date and time 23/9/22 7:21:12
Build time 31.865 sec｜Game capacity 3.919KB｜

Script

Sure! Here's a simplified implementation of a game similar to Super Mario Bros, where the enemies are replaced with Pong paddles as bosses. The game can be played on a smartphone, and it utilizes JavaScript and pictograms.

To play the game: 1. Save the code in a file named `pong_bros.html`. 2. Open the file on a smartphone using a web browser. 3. Control the paddle's movement by tapping or swiping on the left and right sides of the screen. 4. Deflect the ball using the paddle while avoiding letting it fall past the paddle. 5. If the ball falls past the paddle, a game over alert will be shown, and you can reload the page to restart the game.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pong Bros</title>
  <style>
    #gameCanvas {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      background-color: #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Event listeners for paddle movement
    document.addEventListener('keydown', keyDownHandler, false);
    document.addEventListener('keyup', keyUpHandler, false);

function keyDownHandler(e) {
      if (e.key === 'ArrowLeft' || e.key === 'Left') {
        leftPressed = true;
      } else if (e.key === 'ArrowRight' || e.key === 'Right') {
        rightPressed = true;
      }
    }

function keyUpHandler(e) {
      if (e.key === 'ArrowLeft' || e.key === 'Left') {
        leftPressed = false;
      } else if (e.key === 'ArrowRight' || e.key === 'Right') {
        rightPressed = false;
      }
    }

// Function to draw the paddle
    function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
      ctx.fillStyle = '#FFF'; // Paddle color
      ctx.fill();
      ctx.closePath();
    }

// Function to update the paddle position based on input
    function movePaddle() {
      if (leftPressed && paddleX > 0) {
        paddleX -= paddleSpeed;
      } else if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += paddleSpeed;
      }
    }

// Function to draw the ball
    function drawBall() {
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = '#FFF'; // Ball color
      ctx.fill();
      ctx.closePath();
    }

// Function to update the ball position
    function moveBall() {
      ballX += ballDX;
      ballY += ballDY;

// Ball collision detection with walls and paddle
      if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
        ballDX = -ballDX;
      }
      if (ballY + ballDY < ballRadius) {
        ballDY = -ballDY;
      } else if (ballY + ballDY > canvas.height - ballRadius) {
        if (ballX > paddleX && ballX < paddleX + paddleWidth) {
          ballDY = -ballDY;
        } else {
          // Game over condition
          alert('Game Over');
          document.location.reload();
        }
      }
    }

// Function to render the game screen
    function render() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawPaddle();
      drawBall();
      movePaddle();
      moveBall();

// Call the render function again to create game loop
      requestAnimationFrame(render);
    }

// Start the game by calling the render function
    render();
  </script>
</body>
</html>
```

To play the game:
1. Save the code in a file named `pong_bros.html`.
2. Open the file on a smartphone using a web browser.
3. Control the paddle's movement by tapping or swiping on the left and right sides of the screen.
4. Deflect the ball using the paddle while avoiding letting it fall past the paddle.
5. If the ball falls past the paddle, a game over alert will be shown, and you can reload the page to restart the game.