A game where you have jump at the right time to land on platforms and not get pushed into the water. everything has collisions and the game is endless, always scrolling with the water's game

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

No:31451

←

Prev Next

→

A game where you have jump at the right time to la..ALL
Developer User15139｜Date and time 23/12/27 0:14:13
Build time 36.301 sec｜Game capacity 4.172KB｜

Script

Sure! Here's an example of a simple game where you jump to land on platforms and avoid falling into the water. The platforms and player's character are represented using pictograms. The game is endless and the water constantly scrolls upward. You can play the game by opening the HTML file in a web browser on your smartphone.

To play the game, all you need to do is click/press on the screen to make the player character jump. The goal is to land on the platforms and avoid falling into the water. If the player falls into the water, the game will end and a "Game Over" message will be displayed. Note: This is a basic implementation of the game using JavaScript and HTML. You can customize and enhance it further according to your preferences and requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jumping Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

#gameContainer {
      position: relative;
      width: 100%;
      height: 100vh;
      background-color: #e6f7ff; /* Light blue background for water */
    }

.platform {
      position: absolute;
      width: 100px;
      height: 20px;
      background-color: #0052cc; /* Blue color for platforms */
      z-index: 1;
    }

#player {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 40px;
      height: 40px;
      background-color: #ffb3b3; /* Light red color for player */
      z-index: 2;
    }
  </style>
</head>
<body>
  <div id="gameContainer">
    <div id="player"></div>
  </div>

// Jumping control variable
    let isJumping = false;

// Gravity and jump power variables
    const gravity = 0.5;
    const jumpPower = 12;

// Interval variable for platform and game updates
    let gameInterval;

// Function to start the game
    function startGame() {
      gameInterval = setInterval(updateGame, 20); // Update game every 20 milliseconds
    }

// Function to update the game
    function updateGame() {
      // Move platforms upwards (scrolling effect)
      const platforms = document.querySelectorAll('.platform');
      platforms.forEach((platform) => {
        platform.style.bottom = `${platformPosition}px`;
      });
      platformPosition++;

// Move the player with gravity and jumping
      const player = document.getElementById('player');
      if (isJumping) {
        playerPosition += jumpPower;
        jumpPower -= gravity; // Apply gravity to jump power
      }
      player.style.bottom = `${playerPosition}px`;

// Check for collisions between player and platforms
      platforms.forEach((platform) => {
        if (isColliding(player, platform)) {
          // Collision detected, stop jumping and reset jump power
          isJumping = false;
          jumpPower = 12;

// Player lands on the platform
          playerPosition = platformPosition;
        }
      });

// Check if player falls into the water
      const gameContainer = document.getElementById('gameContainer');
      if (playerPosition < 0) {
        clearInterval(gameInterval); // Stop the game
        alert('Game Over! You fell into the water.');
        window.location.reload(); // Restart the game
      }
    }

// Function to check for collisions between two elements
    function isColliding(element1, element2) {
      const rect1 = element1.getBoundingClientRect();
      const rect2 = element2.getBoundingClientRect();
      return (
        rect1.bottom >= rect2.top &&
        rect1.top <= rect2.bottom &&
        rect1.right >= rect2.left &&
        rect1.left <= rect2.right
      );
    }

// Function to handle touch events (jumping)
    function handleTouchStart() {
      if (!isJumping) {
        isJumping = true;
      }
    }

// Start the game when the webpage finishes loading
    window.onload = function() {
      startGame();
    };

// Event listener for touch start event (jumping)
    document.addEventListener('touchstart', handleTouchStart);
  </script>
</body>
</html>
```

Note: This is a basic implementation of the game using JavaScript and HTML. You can customize and enhance it further according to your preferences and requirements.