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

No:17051

95

Super Mario Bros
Developer User7570｜Date and time 23/9/22 7:12:58
Build time 31.517 sec｜Game capacity 4.508KB｜

Super Mario Bros Game

Instructions: Tap the screen to make Mario jump and collect coins.

→ 　

0　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
  <head>
    <title>Super Mario Bros</title>
    <style>
      /* CSS styling for the game screen */
      #game-screen {
        width: 320px;
        height: 480px;
        border: 2px solid black;
        background-color: #87CEEB;
        position: relative;
      }
      .player {
        width: 40px;
        height: 40px;
        position: absolute;
        bottom: 0;
        background: url('player.png') no-repeat;
        background-size: cover;
      }
      .obstacle {
        width: 50px;
        height: 50px;
        position: absolute;
        background: url('obstacle.png') no-repeat;
        background-size: cover;
      }
      .coin {
        width: 30px;
        height: 30px;
        position: absolute;
        background: url('coin.png') no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Super Mario Bros Game</h1>
      <p>Instructions: Tap the screen to make Mario jump and collect coins.</p>
    </div>

<div id="game-screen">
      <div class="player"></div>
    </div>

<script>
      // Game variables
      var gameScreen = document.getElementById("game-screen");
      var player = document.querySelector(".player");
      var score = 0;
      var jumpHeight = 120;
      var jumpDuration = 800;
      var obstacleInterval = 2000;
      
      // Function to handle player jumps
      function jump() {
        player.style.bottom = jumpHeight + "px";
        setTimeout(function() {
          player.style.bottom = "0px";
        }, jumpDuration);
      }
      
      // Function to handle player coin collection
      function collectCoin(coin) {
        coin.remove();
        score++;
      }
      
      // Function to check collision between player and coins/obstacles
      function checkCollision() {
        var playerRect = player.getBoundingClientRect();
        var coins = document.getElementsByClassName("coin");
        var obstacles = document.getElementsByClassName("obstacle");
        
        for (var i = 0; i < coins.length; i++) {
          var coinRect = coins[i].getBoundingClientRect();
          if (
            playerRect.left < coinRect.left + coinRect.width &&
            playerRect.left + playerRect.width > coinRect.left &&
            playerRect.top < coinRect.top + coinRect.height &&
            playerRect.top + playerRect.height > coinRect.top
          ) {
            collectCoin(coins[i]);
          }
        }
        
        for (var j = 0; j < obstacles.length; j++) {
          var obstacleRect = obstacles[j].getBoundingClientRect();
          if (
            playerRect.left < obstacleRect.left + obstacleRect.width &&
            playerRect.left + playerRect.width > obstacleRect.left &&
            playerRect.top < obstacleRect.top + obstacleRect.height &&
            playerRect.top + playerRect.height > obstacleRect.top
          ) {
            gameOver();
          }
        }
      }
      
      // Function to generate coins randomly on the game screen
      function generateCoin() {
        var coin = document.createElement("div");
        coin.className = "coin";
        coin.style.left = Math.random() * (gameScreen.offsetWidth - 30) + "px";
        gameScreen.appendChild(coin);
      }
      
      // Function to generate obstacles randomly on the game screen
      function generateObstacle() {
        var obstacle = document.createElement("div");
        obstacle.className = "obstacle";
        obstacle.style.left = Math.random() * (gameScreen.offsetWidth - 50) + "px";
        gameScreen.appendChild(obstacle);
        setTimeout(function() {
          obstacle.remove();
        }, obstacleInterval + 1000);
      }
      
      // Function to start the game
      function startGame() {
        currentPlayer = setInterval(checkCollision, 10);
        coinInterval = setInterval(generateCoin, obstacleInterval / 1.5);
        obstacleInterval = setInterval(generateObstacle, obstacleInterval);
      }
      
      // Function to end the game
      function gameOver() {
        clearInterval(currentPlayer);
        clearInterval(coinInterval);
        clearInterval(obstacleInterval);
        alert("Game Over!\nYour score: " + score);
        score = 0;
        startGame();
      }
      
      // Event listener for touch/click to jump
      gameScreen.addEventListener("click", function() {
        jump();
      });
      
      // Start the game
      startGame();
    </script>
  </body>
</html>