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

No:25207

Mario run try to get a high score and jump over zo..ALL
Developer User10969｜Date and time 23/11/19 4:42:15
Build time 100.788 sec｜Game capacity 3.367KB｜

Script

Sure! Here's a simple implementation of the game "Mario Run" in a single HTML file using JavaScript:

Score: 0

This HTML file creates a basic game where a player (represented by a red square) needs to jump over a zombie (represented by a green square) and collect items (represented by a yellow square) to increase their score. The player can jump using the up arrow key. If the player collides with the zombie, the game is over and the score is reset. Please note that this is just a basic implementation to illustrate the game concept. You can further enhance it by adding more mechanics, graphics, levels, and challenges.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's a simple implementation of the game "Mario Run" in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #player {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background-color: red;
    }
    
    #zombie {
      position: absolute;
      top: 0;
      left: 200px;
      width: 50px;
      height: 50px;
      background-color: green;
    }
    
    #item {
      position: absolute;
      top: 0;
      left: 400px;
      width: 50px;
      height: 50px;
      background-color: yellow;
    }
    
    #score {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1 id="score">Score: 0</h1>
  <script>
    var player = document.getElementById("player");
    var zombie = document.getElementById("zombie");
    var item = document.getElementById("item");
    var score = document.getElementById("score");
    
    var playerJumping = false;
    var gameScore = 0;
    
    window.addEventListener("keydown", jump);
    
    function jump(event) {
      if (event.key === "ArrowUp" && !playerJumping) {
        playerJumping = true;
        player.style.bottom = "200px";
        setTimeout(function() {
          player.style.bottom = "0";
          playerJumping = false;
        }, 500);
      }
    }
    
    setInterval(moveZombieAndItem, 10);
    
    function moveZombieAndItem() {
      var zombieLeft = parseInt(window.getComputedStyle(zombie).getPropertyValue("left"));
      var itemLeft = parseInt(window.getComputedStyle(item).getPropertyValue("left"));
      
      if (zombieLeft <= -50) {
        zombie.style.left = "450px";
        gameScore++;
        score.textContent = "Score: " + gameScore;
      } else {
        zombie.style.left = zombieLeft - 5 + "px";
      }
      
      if (itemLeft <= -50) {
        item.style.left = "450px";
      } else {
        item.style.left = itemLeft - 5 + "px";
      }
      
      if (isColliding(player, zombie)) {
        gameOver();
      }
      
      if (isColliding(player, item)) {
        gameScore += 10;
        score.textContent = "Score: " + gameScore;
        item.style.left = "-50px";
      }
    }
    
    function isColliding(elem1, elem2) {
      var rect1 = elem1.getBoundingClientRect();
      var rect2 = elem2.getBoundingClientRect();
      
      return !(
        rect1.top > rect2.bottom ||
        rect1.bottom < rect2.top ||
        rect1.right < rect2.left ||
        rect1.left > rect2.right
      );
    }
    
    function gameOver() {
      alert("Game Over! Your score: " + gameScore);
      gameScore = 0;
      score.textContent = "Score: " + gameScore;
      zombie.style.left = "200px";
      item.style.left = "400px";
    }
  </script>
  
  <div id="player"></div>
  <div id="zombie"></div>
  <div id="item"></div>
</body>
</html>
```

Please note that this is just a basic implementation to illustrate the game concept. You can further enhance it by adding more mechanics, graphics, levels, and challenges.