Make a game that you have to jump on trains and avoid robots to escape.press space to jump.'s game

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

No:35925

185

←

Prev Next

→

Make a game that you have to jump on trains and av..ALL
Developer User16642｜Date and time 24/1/16 3:47:28
Build time 12.729 sec｜Game capacity 3.024KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Train Jumper Game</title>
    <style>
      #player {
        position: absolute;
        left: 50px;
        top: 300px;
        width: 50px;
        height: 50px;
        background-color: red;
        transition: top 0.2s;
      }
      .train {
        position: absolute;
        bottom: 0;
        width: 100px;
        height: 50px;
        background-color: gray;
        transition: left 2s;
      }
      .robot {
        position: absolute;
        bottom: 50px;
        width: 50px;
        height: 50px;
        background-color: blue;
        transition: left 2s;
      }
    </style>
  </head>
  <body>
    <div id="player"></div>
    <script>
      var player = document.getElementById("player");
      var gameOver = false;
      var score = 0;

setInterval(function () {
        if (!gameOver) {
          var trains = document.getElementsByClassName("train");
          var robots = document.getElementsByClassName("robot");

// Move Trains
          for (var i = 0; i < trains.length; i++) {
            var train = trains[i];
            var trainPosition = parseInt(train.style.left);

if (trainPosition > -100) {
              train.style.left = (trainPosition - 5) + "px";
            } else {
              train.style.left = "100%";
              score++;
            }
          }

// Move Robots
          for (var i = 0; i < robots.length; i++) {
            var robot = robots[i];
            var robotPosition = parseInt(robot.style.left);

if (robotPosition > -50) {
              robot.style.left = (robotPosition - 5) + "px";
            } else {
              robot.style.left = "100%";
              score++;
            }
          }

// Check Collisions
          for (var i = 0; i < trains.length; i++) {
            var train = trains[i];
            var trainPosition = parseInt(train.style.left);
            var playerTop = parseInt(player.style.top);

if (trainPosition >= 50 && trainPosition <= 100 && playerTop === 300) {
              gameOver = true;
              alert("Game Over! Your Score: " + score);
              break;
            }
          }

for (var i = 0; i < robots.length; i++) {
            var robot = robots[i];
            var robotPosition = parseInt(robot.style.left);
            var playerTop = parseInt(player.style.top);

if (robotPosition >= 0 && robotPosition <= 50 && playerTop === 250) {
              gameOver = true;
              alert("Game Over! Your Score: " + score);
              break;
            }
          }
        }
      }, 10);

window.addEventListener("keydown", function (event) {
        var playerTop = parseInt(player.style.top);

if (event.keyCode === 32 && playerTop === 250) {
          player.style.top = "300px";
        } else if (event.keyCode === 32 && playerTop === 300) {
          player.style.top = "250px";
        }
      });
    </script>
  </body>
</html>