Creste me game with mario but flappy Bird's game

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

No:29723

←

Prev Next

→

Creste me game with mario but flappy Bird
Developer User14568｜Date and time 23/12/18 8:06:07
Build time 32.482 sec｜Game capacity 3.872KB｜

Script

Sure! Here's an example of a simple game combining elements of Mario and Flappy Bird using JavaScript and HTML:

Note: You will need to provide your own `emozi_all/mario.png` image file and adjust the width and height of the canvas as needed.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a simple game combining elements of Mario and Flappy Bird using JavaScript and HTML:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mario Flappy Bird</title>
    <style>
      canvas {
        border: 1px solid black;
        margin: 0 auto;
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Load images
      const marioImg = new Image();
      marioImg.src = 'mario.png';

// Create the Mario object
      class Mario {
        constructor() {
          this.x = 50;
          this.y = canvas.height / 2;
          this.width = 50;
          this.height = 50;
          this.frameX = 0;
          this.frameY = 0;
          this.speed = 3;
          this.gravity = 0.1;
          this.jump = 4;
        }

draw() {
          ctx.drawImage(
            marioImg,
            this.frameX * this.width,
            this.frameY * this.height,
            this.width,
            this.height,
            this.x,
            this.y,
            this.width,
            this.height
          );
        }

update() {
          this.draw();
          this.y += this.gravity;
        }

jumpMario() {
          this.y -= this.jump;
        }

animate() {
          this.frameX = 1;
          this.frameY = 0;
        }

}

// Create the Pipe object
      class Pipe {
        constructor(xPos) {
          this.x = xPos;
          this.y = 0;
          this.width = 50;
          this.height = Math.floor(Math.random() * 200) + 100;
          this.speed = 3;
        }

draw() {
          ctx.fillStyle = 'green';
          ctx.fillRect(this.x, this.y, this.width, this.height);
        }

update() {
          this.draw();
          this.x -= this.speed;
        }
      }

// Key listener function
      function keyListener(event) {
        if (event.keyCode === 32) {
          mario.jumpMario();
        }
      }

// Start the game
      function startGame() {
        canvas = document.getElementById('gameCanvas');
        ctx = canvas.getContext('2d');

mario = new Mario();
        pipes = [];
        score = 0;
        gravity = 0.1;

document.addEventListener('keydown', keyListener);

// Game loop
        const gameLoop = setInterval(() => {
          ctx.clearRect(0, 0, canvas.width, canvas.height);

mario.update();
          pipes.forEach((pipe) => {
            pipe.update();

if (
              mario.x < pipe.x + pipe.width &&
              mario.x + mario.width > pipe.x &&
              mario.y < pipe.y + pipe.height &&
              mario.y + mario.height > pipe.y
            ) {
              clearInterval(gameLoop);
              alert(`Game over! Score: ${score}`);
              startGame();
            }

if (pipe.x === 10) {
              score++;
            }

if (pipe.x + pipe.width < 0) {
              pipes.shift();
            }
          });

if (mario.y + mario.height > canvas.height || mario.y < 0) {
            clearInterval(gameLoop);
            alert(`Game over! Score: ${score}`);
            startGame();
          }

if (frame % 100 === 0) {
            const pipe = new Pipe(canvas.width);
            pipes.push(pipe);
          }

frame++;

}, 20); // 50 frames per second
      }

startGame();
    </script>
  </body>
</html>
```

Note: You will need to provide your own `mario.png` image file and adjust the width and height of the canvas as needed.