Rollercoaster platformer's game

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

No:39368

←

Prev Next

→

Rollercoaster platformer
Developer User17632｜Date and time 24/1/28 7:24:23
Build time 14.604 sec｜Game capacity 3.874KB｜

Script

Below is an example of a simple rollercoaster platformer game implemented in a single HTML file using JavaScript and enclosed in script tags:

You can run the code by saving it to an HTML file and opening it in a web browser. The game is playable on a smartphone or desktop browser, and it utilizes touch-based controls for jumping. The player moves horizontally continuously and can jump to avoid falling off the platform. Adjust the provided constants (e.g., speed, gravity, jump height) to tweak the game behavior to your liking.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Below is an example of a simple rollercoaster platformer game implemented in a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Rollercoaster Platformer</title>
  <style>
    #game {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      color: #fff;
      overflow: hidden;
    }
    
    #player {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 30px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player"></div>
  </div>

// Game initialization
    function init() {
      game = document.getElementById('game');
      player = document.getElementById('player');
      
      // Start the game loop
      requestAnimationFrame(gameLoop);

// Event listeners for touch-based controls
      game.addEventListener('click', handleJump);
      game.addEventListener('touchstart', handleJump);
    }

// Game loop
    function gameLoop() {
      var gameWidth = game.clientWidth;
      var playerX = player.offsetLeft;

// Move the player horizontally
      if (playerX < gameWidth - player.offsetWidth) {
        player.style.left = playerX + 2 + 'px'; // Change 2 to adjust player speed
      }
      
      // Check if the player is on a platform
      var onPlatform = checkCollision();

// Apply gravity when not on a platform
      if (!onPlatform) {
        player.style.top = player.offsetTop + 3 + 'px'; // Change 3 to adjust gravity strength
      }

// Repeat the game loop
      requestAnimationFrame(gameLoop);
    }

// Handle jump event
    function handleJump() {
      if (!isJumping) {
        isJumping = true;
        player.style.top = player.offsetTop - 70 + 'px'; // Change 70 to adjust jump height
        jumpTimeout = setTimeout(function () {
          isJumping = false;
        }, 1000); // Change 1000 to adjust jump duration
      }
    }

// Check collision with platforms
    function checkCollision() {
      var platforms = game.getElementsByClassName('platform');

for (var i = 0; i < platforms.length; i++) {
        var platform = platforms[i];
        var playerRect = player.getBoundingClientRect();
        var platformRect = platform.getBoundingClientRect();

var collisionBottom = playerRect.top <= platformRect.bottom && playerRect.bottom >= platformRect.bottom;
        var collisionTop = playerRect.bottom >= platformRect.top && playerRect.top <= platformRect.top;
        var collisionLeft = playerRect.right >= platformRect.left && playerRect.left <= platformRect.left;
        var collisionRight = playerRect.left <= platformRect.right && playerRect.right >= platformRect.right;

if (collisionBottom && collisionLeft && collisionRight && !isJumping) {
          clearTimeout(jumpTimeout);
          isJumping = false;
          player.style.top = platform.offsetTop - player.offsetHeight + 'px';
          return true;
        } else if (collisionTop && collisionLeft && collisionRight) {
          player.style.top = platform.offsetTop + platform.offsetHeight + 'px';
          return false;
        }
      }

return false;
    }

// Start the game
    init();
  </script>
</body>
</html>
```