Mario beta test with control buttons's game

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

No:43312

←

Prev Next

→

Mario beta test with control buttons
Developer User19162｜Date and time 24/2/15 6:15:25
Build time 10.204 sec｜Game capacity 2.705KB｜

Script

Sure! Here's a simple implementation of a Mario game in a single HTML file using JavaScript and including control buttons for smartphone operation:

Left

Right

Jump

In this simple Mario game implementation, you can control Mario's movement using the left and right buttons. Mario will move left or right by 10 pixels each time you press the corresponding button. You can also make Mario jump by clicking or touching the jump button. Mario will jump up to a height of 100 pixels and then come back down after a delay of 500 milliseconds.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of a Mario game in a single HTML file using JavaScript and including control buttons for smartphone operation:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mario Game</title>
  <style>
    #game-area {
      width: 300px;
      height: 200px;
      border: 1px solid black;
      position: relative;
    }
    #mario {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    #button-area {
      display: flex;
      justify-content: center;
    }
    .button {
      margin: 10px;
      padding: 10px;
      background-color: #f1f1f1;
      border: 1px solid black;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="game-area">
    <div id="mario"></div>
  </div>
  
  <div id="button-area">
    <div class="button" id="left-button">Left</div>
    <div class="button" id="right-button">Right</div>
    <div class="button" id="jump-button">Jump</div>
  </div>

// Function to move Mario left
    function moveLeft() {
      positionX -= 10;
      marioElement.style.left = positionX + 'px';
    }

// Function to move Mario right
    function moveRight() {
      positionX += 10;
      marioElement.style.left = positionX + 'px';
    }

// Event listeners for buttons
    leftButton.addEventListener('click', moveLeft);
    rightButton.addEventListener('click', moveRight);

// For smartphone operation touch events
    leftButton.addEventListener('touchstart', moveLeft);
    rightButton.addEventListener('touchstart', moveRight);

// Function to handle Mario's jump
    function jump() {
      marioElement.style.bottom = '100px';
      setTimeout(() => {
        marioElement.style.bottom = '0';
      }, 500);
    }

// Event listener for jump button
    jumpButton.addEventListener('click', jump);

// For smartphone operation touch event
    jumpButton.addEventListener('touchstart', jump);
  </script>
</body>
</html>
```