Make a version of Mario were you can jump ,go left and right,jump on gommbas ;and hit bricks's game

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

No:11124

107

←

Prev Next

→

Make a version of Mario were you can jump ,go left..ALL
Developer unknown｜Date and time 23/8/8 0:28:52
Build time 37.993 sec｜Game capacity 4.182KB｜

Script

Sure! Here's a basic implementation of a simplified version of Mario using only HTML, CSS, and JavaScript:

Please note that this is a very basic implementation and does not include advanced features or complete levels. You can customize and add more functionalities based on your requirements. Good luck with your game!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a basic implementation of a simplified version of Mario using only HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mario Game</title>
  <style>
    #game {
      position: absolute;
      top: 0;
      left: 0;
      width: 400px;
      height: 300px;
      border: 1px solid black;
    }
    #player {
      position: absolute;
      width: 40px;
      height: 40px;
      background-color: red;
      bottom: 0;
      left: 0;
    }
    .goomba {
      position: absolute;
      width: 40px;
      height: 40px;
      background-color: brown;
      bottom: 0;
    }
    .brick {
      position: absolute;
      width: 40px;
      height: 40px;
      background-color: gray;
      bottom: 40px;
    }
  </style>
</head>
<body>
  <script>
    // Function to handle player movements and collisions
    function handlePlayer() {
      var player = document.getElementById('player');
      var playerX = parseInt(player.style.left);
      var playerY = parseInt(player.style.bottom);

var goombas = document.getElementsByClassName('goomba');
      var bricks = document.getElementsByClassName('brick');

// Checking for collisions with goombas
      for (var i = 0; i < goombas.length; i++) {
        var goombaX = parseInt(goombas[i].style.left);
        var goombaY = parseInt(goombas[i].style.bottom);

if (playerX >= goombaX - 40 && playerX <= goombaX + 40 && playerY === goombaY) {
          alert("Game Over!");
          location.reload();
          return;
        }
      }

// Checking for collisions with bricks
      for (var j = 0; j < bricks.length; j++) {
        var brickX = parseInt(bricks[j].style.left);
        var brickY = parseInt(bricks[j].style.bottom);

if (playerX >= brickX - 40 && playerX <= brickX + 40 && playerY === brickY + 40) {
          player.style.bottom = (brickY + 40) + 'px'; // Restricts player from falling through bricks
          return;
        }
      }

// Moving player left
      document.addEventListener('keydown', function(event) {
        if (event.keyCode === 37) {
          if (playerX > 0) {
            player.style.left = (playerX - 40) + 'px';
          }
        }
      });

// Moving player right
      document.addEventListener('keydown', function(event) {
        if (event.keyCode === 39) {
          if (playerX < 360) {
            player.style.left = (playerX + 40) + 'px';
          }
        }
      });

// Making player jump
      document.addEventListener('keydown', function(event) {
        if (event.keyCode === 38) {
          if (playerY < 200) {
            player.style.bottom = (playerY + 80) + 'px';
            setTimeout(function() {
              player.style.bottom = playerY + 'px';
            }, 500);
          }
        }
      });
    }

// Function to generate goombas and bricks
    function generateObstacles() {
      var game = document.getElementById('game');

setInterval(function() {
        var goomba = document.createElement('div');
        goomba.classList.add('goomba');
        goomba.style.left = '400px';
        game.appendChild(goomba);

setTimeout(function() {
          goomba.style.left = '-40px';
          setTimeout(function() {
            game.removeChild(goomba);
          }, 2000);
        }, Math.random() * 4000);
      }, 3000);

setInterval(function() {
        var brick = document.createElement('div');
        brick.classList.add('brick');
        brick.style.left = '400px';
        game.appendChild(brick);

setTimeout(function() {
          brick.style.left = '-40px';
          setTimeout(function() {
            game.removeChild(brick);
          }, 2000);
        }, Math.random() * 4000);
      }, 5000);
    }

// Start the game
    window.onload = function() {
      handlePlayer();
      generateObstacles();
    }
  </script>

<div id="game">
    <div id="player"></div>
  </div>
</body>
</html>
```