Mario's game | AI game creator

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

No:37345

59

Mario
Developer User12686｜Date and time 24/1/21 2:15:22
Build time 10.469 sec｜Game capacity 2.869KB｜

Sure! Here's an example of a simple Mario game implemented as a single HTML file with JavaScript:

This example creates a simple Mario game where the player can make Mario jump by clicking on the screen. The game is rendered using HTML and CSS, and the movement is handled by JavaScript. The game window is defined by the `game` div, and Mario is represented by the `mario` div. The ground is represented by the `ground` div. The CSS styles position the elements and set their appearance. The JavaScript code adds an event listener to the document, listening for the `click` event. When the click event is triggered, the `jump()` function is called, which makes Mario jump by changing his vertical position. After reaching a certain height, Mario starts falling back down. Please note that for this example to work, you need to have an image file named "emozi_all/mario.png" in the same directory as the HTML file, which is used as the background image for Mario. This is just a simplified example to give you an idea of how a simple Mario game can be implemented. You can further expand the game logic and add more features to make it more fun and engaging.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's an example of a simple Mario game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mario Game</title>
  <style>
    #game {
      width: 480px;
      height: 320px;
      border: 1px solid black;
      position: relative;
    }
    #mario {
      width: 40px;
      height: 40px;
      background-image: url('mario.png');
      background-repeat: no-repeat;
      background-position: 0 0;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    #ground {
      width: 480px;
      height: 40px;
      background-color: brown;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="mario"></div>
    <div id="ground"></div>
  </div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
      const mario = document.getElementById('mario');
      const ground = document.getElementById('ground');

function jump() {
        let marioTop = parseInt(window.getComputedStyle(mario).getPropertyValue('top'));
        if (marioTop > 20) {
          let jumpInterval = setInterval(function() {
            mario.style.top = (marioTop -= 5) + 'px';
            if (marioTop <= 20) {
              clearInterval(jumpInterval);
              fall();
            }
          }, 10);
        }
      }

function fall() {
        let marioTop = parseInt(window.getComputedStyle(mario).getPropertyValue('top'));
        let fallInterval = setInterval(function() {
          mario.style.top = (marioTop += 5) + 'px';
          if (marioTop >= (ground.clientHeight - mario.clientHeight)) {
            clearInterval(fallInterval);
          }
        }, 10);
      }

document.addEventListener('click', jump);
    });
  </script>
</body>
</html>
```

This example creates a simple Mario game where the player can make Mario jump by clicking on the screen. The game is rendered using HTML and CSS, and the movement is handled by JavaScript.

The game window is defined by the `game` div, and Mario is represented by the `mario` div. The ground is represented by the `ground` div. The CSS styles position the elements and set their appearance.

The JavaScript code adds an event listener to the document, listening for the `click` event. When the click event is triggered, the `jump()` function is called, which makes Mario jump by changing his vertical position. After reaching a certain height, Mario starts falling back down.

Please note that for this example to work, you need to have an image file named "mario.png" in the same directory as the HTML file, which is used as the background image for Mario.

This is just a simplified example to give you an idea of how a simple Mario game can be implemented. You can further expand the game logic and add more features to make it more fun and engaging.