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

No:35600

Sonic the hedgehog vs robots
Developer User16561｜Date and time 24/1/14 23:58:07
Build time 11.428 sec｜Game capacity 2.514KB｜

Script

Sonic the Hedgehog vs Robots

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>

<head>
  <title>Sonic the Hedgehog vs Robots</title>
  <style>
    body {
      text-align: center;
    }
    
    #game-container {
      margin: 0 auto;
      width: 400px;
      height: 400px;
      border: 2px solid black;
    }
    
    #sonic {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
    }
    
    .robot {
      position: absolute;
      width: 50px;
      height: 50px;
    }
  </style>
</head>

<body>
  <h1>Sonic the Hedgehog vs Robots</h1>

gameContainer.addEventListener("click", function(event) {
      if (gameOver) return;

var newRobot = document.createElement("img");
      newRobot.setAttribute("src", "robot.png");
      newRobot.setAttribute("alt", "Robot");
      newRobot.classList.add("robot");
      newRobot.style.top = event.clientY - 25 + "px";
      newRobot.style.left = event.clientX - 25 + "px";
      gameContainer.appendChild(newRobot);
      robots.push(newRobot);
    });

function moveRobots() {
      if (gameOver) return;

for (var i = 0; i < robots.length; i++) {
        var robot = robots[i];

if (parseInt(robot.style.top) > 350) {
          gameOver = true;
          clearInterval(robotInterval);
          displayGameOver();
        } else {
          robot.style.top = (parseInt(robot.style.top) + 10) + "px";
        }
      }
    }

function checkCollision() {
      if (gameOver) return;

for (var i = 0; i < robots.length; i++) {
        var robot = robots[i];

if (isColliding(sonic, robot)) {
          score++;
          robot.remove();
          robots.splice(i, 1);
        }
      }
    }

function isColliding(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();

return !(
        rect1.top > rect2.bottom ||
        rect1.bottom < rect2.top ||
        rect1.left > rect2.right ||
        rect1.right < rect2.left
      );
    }

function displayGameOver() {
      alert("Game Over! Your Score: " + score);
    }

var robotInterval = setInterval(function() {
      moveRobots();
      checkCollision();
    }, 500);
  </script>
</body>

</html>