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

No:37632

A game where you run away
Developer User17076｜Date and time 24/1/21 6:59:02
Build time 10.693 sec｜Game capacity 3.824KB｜

Script

Sure! Here's a simple game where you control a character running away from obstacles. The game will be implemented as a single HTML file and will use JavaScript for the game logic.

Runaway Game

In this game, you control a player (represented by a pictogram) at the bottom of the game container, and you need to avoid colliding with the obstacles (div elements moving towards the player from the left side of the screen). To play the game on a smartphone, you can tap on the screen to make the player jump and avoid the obstacles. Please note that you will need to have a player_icon.png file in the same directory as the HTML file to use as the player's icon. Adjust the width and height attributes of the player image tag accordingly to match the dimensions of your image.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's a simple game where you control a character running away from obstacles. The game will be implemented as a single HTML file and will use JavaScript for the game logic.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Runaway Game</title>
  <style>
    #game-container {
      position: relative;
      width: 400px;
      height: 400px;
      border: 2px solid black;
      margin: 0 auto;
    }
    #player {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
</head>
<body>
  <h1>Runaway Game</h1>
  <div id="game-container">
    <img id="player" src="player_icon.png" width="50" height="50">
  </div>

// Function to start the game
    function startGame() {
      gameContainer = document.getElementById("game-container");
      player = document.getElementById("player");
      player.style.bottom = 0; // Reset player position

gameContainer.addEventListener("click", jump);

generateObstacles();

// Move the obstacles every 50 milliseconds
      setInterval(moveObstacles, 50);
    }

// Function to make the player jump
    function jump() {
      player.style.bottom = parseInt(player.style.bottom) + 50 + "px";
    }

// Function to generate obstacles at random heights
    function generateObstacles() {
      setInterval(function() {
        var obstacle = document.createElement("div");
        obstacle.className = "obstacle";
        obstacles.push(obstacle);

var topPosition = Math.random() * (gameContainer.clientHeight - 50);
        obstacle.style.top = topPosition + "px";

gameContainer.appendChild(obstacle);
      }, 2000);
    }

// Function to move the obstacles towards the left and check for collisions
    function moveObstacles() {
      for (var i = 0; i < obstacles.length; i++) {
        var obstacle = obstacles[i];

// Move the obstacle towards left
        obstacle.style.left = parseInt(obstacle.style.left) - 5 + "px";

// Check for collision with player
        if (isColliding(obstacle, player)) {
          endGame();
          return;
        }

// Remove obstacle if it goes off the screen
        if (parseInt(obstacle.style.left) + obstacle.clientWidth < 0) {
          obstacles.splice(i, 1);
          gameContainer.removeChild(obstacle);
          i--;
        }
      }
    }

// Function to check collision between two elements
    function isColliding(element1, element2) {
      var element1Rect = element1.getBoundingClientRect();
      var element2Rect = element2.getBoundingClientRect();

return !(
        element1Rect.top > element2Rect.bottom ||
        element1Rect.bottom < element2Rect.top ||
        element1Rect.right < element2Rect.left ||
        element1Rect.left > element2Rect.right
      );
    }

// Function to end the game and show a game over message
    function endGame() {
      gameContainer.removeEventListener("click", jump);
      alert("Game Over!");
    }

// Start the game when the page finishes loading
    window.onload = function() {
      startGame();
    };
  </script>
</body>
</html>
```

Please note that you will need to have a player_icon.png file in the same directory as the HTML file to use as the player's icon. Adjust the width and height attributes of the player image tag accordingly to match the dimensions of your image.