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

No:52700

180

←

Prev Next

→

super Mario forest Explore the forest as Mario Do ..ALL
Developer User22062｜Date and time 24/3/24 6:18:37
Build time 14.826 sec｜Game capacity 2.499KB｜

Script

Super Mario Forest

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Super Mario Forest</title>
<style>
  body {
    text-align: center;
  }
  #game {
    display: inline-block;
    background-image: url('forest.jpg');
    width: 800px;
    height: 600px;
    background-size: cover;
    position: relative;
  }
  #mario {
    position: absolute;
    top: 300px;
    left: 400px;
    width: 50px;
    height: 50px;
    background-image: url('mario.png');
    background-size: cover;
  }
  .goblin {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('goblin.png');
    background-size: cover;
  }
  .giant-goblin {
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url('giant-goblin.png');
    background-size: cover;
  }
</style>
</head>
<body>
<h1>Super Mario Forest</h1>
<div id="game">
  <div id="mario"></div>
</div>
<script>
  const game = document.getElementById('game');
  const mario = document.getElementById('mario');
  let score = 0;
  
  function moveMario(event) {
    const key = event.key;
    
    switch (key) {
      case 'ArrowUp':
        mario.style.top = parseInt(mario.style.top) - 10 + 'px';
        break;
      case 'ArrowDown':
        mario.style.top = parseInt(mario.style.top) + 10 + 'px';
        break;
      case 'ArrowLeft':
        mario.style.left = parseInt(mario.style.left) - 10 + 'px';
        break;
      case 'ArrowRight':
        mario.style.left = parseInt(mario.style.left) + 10 + 'px';
        break;
    }
    
    checkCollisions();
  }
  
  function checkCollisions() {
    const marioRect = mario.getBoundingClientRect();
    const goblins = document.querySelectorAll('.goblin');
    const giantGoblins = document.querySelectorAll('.giant-goblin');
    
    goblins.forEach(goblin => {
      const goblinRect = goblin.getBoundingClientRect();
      if (isColliding(marioRect, goblinRect)) {
        gameOver();
      }
    });
    
    giantGoblins.forEach(goblin => {
      const goblinRect = goblin.getBoundingClientRect();
      if (isColliding(marioRect, goblinRect)) {
        gameOver();
      }
    });
  }
  
  function isColliding(rect1, rect2) {
    return !(rect1.right < rect2.left || 
             rect1.left > rect2.right || 
             rect1.bottom < rect2.top || 
             rect1.top > rect2.bottom);
  }
  
  function gameOver() {
    alert('Game Over! Your score: ' + score);
    window.location.reload();
  }
  
  document.addEventListener('keydown', moveMario);
</script>
</body>
</html>