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

No:45325

←

Prev Next

→

0>Sonic story
Developer WinnerWiener1332｜Date and time 24/2/20 11:56:41
Build time 6.389 sec｜Game capacity 1.428KB｜

Script

Sonic Story Game

Welcome to the Sonic Story Game! Help Sonic the Hedgehog through various obstacles and collect rings to win.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Sonic Story Game</title>
</head>
<body>
  <div id="game">
    <h1>Sonic Story Game</h1>
    <p>Welcome to the Sonic Story Game! Help Sonic the Hedgehog through various obstacles and collect rings to win.</p>
    <img src="sonic_start.png" id="sonic" onclick="moveSonic()">
    <img src="ring.png" id="ring">
  </div>
  
  <script>
    let sonic = document.getElementById("sonic");
    let ring = document.getElementById("ring");
    
    sonic.style.position = "absolute";
    sonic.style.left = "20px";
    sonic.style.top = "20px";
    
    ring.style.position = "absolute";
    ring.style.left = "200px";
    ring.style.top = "200px";
    
    function moveSonic() {
      let randomX = Math.floor(Math.random() * window.innerWidth);
      let randomY = Math.floor(Math.random() * window.innerHeight);
      
      sonic.style.left = randomX + "px";
      sonic.style.top = randomY + "px";
      
      checkCollision();
    }
    
    function checkCollision() {
      let sonicRect = sonic.getBoundingClientRect();
      let ringRect = ring.getBoundingClientRect();
      
      if (sonicRect.left < ringRect.right &&
          sonicRect.right > ringRect.left &&
          sonicRect.top < ringRect.bottom &&
          sonicRect.bottom > ringRect.top) {
        alert("You collected the ring! Great job!");
        ring.style.display = "none";
      }
    }
  </script>
</body>
</html>