Make a short 2d platformer level's game

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

No:41794

←

Prev Next

→

Make a short 2d platformer level
Developer User18748｜Date and time 24/2/10 0:14:17
Build time 13.257 sec｜Game capacity 3.004KB｜

Script

Sure! Here's a basic example of a short 2D platformer level implemented in a single HTML file, using JavaScript and enclosed in script tags:

This basic game includes a player controlled by arrow keys on a single platform. The player can move left and right, and jump onto the platform. Whenever the player collides with the platform, they stop falling and stand on it.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure! Here's a basic example of a short 2D platformer level implemented in a single HTML file, using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Platformer Game</title>
  <style>
    #player {
      position: absolute;
      top: 300px;
      left: 50px;
      width: 50px;
      height: 50px;
      background-color: blue;
    }
    
    #platform {
      position: absolute;
      top: 350px;
      left: 200px;
      width: 200px;
      height: 20px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="player"></div>
  <div id="platform"></div>
  
  <script>
    // Player properties
    const player = document.getElementById('player');
    let playerX = 50;
    let playerY = 300;
    const playerWidth = 50;
    const playerHeight = 50;
    const playerSpeed = 5;
    let isJumping = false;
    
    // Platform properties
    const platform = document.getElementById('platform');
    const platformWidth = 200;
    const platformHeight = 20;
  
    // Key listeners
    window.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowRight') {
        playerX += playerSpeed;
      } else if (event.key === 'ArrowLeft') {
        playerX -= playerSpeed;
      } else if (event.key === 'ArrowUp' && !isJumping) {
        isJumping = true;
        jump();
      }
    });
    
    // Update player position
    function update() {
      player.style.left = playerX + 'px';
      player.style.top = playerY + 'px';
    }
    
    // Jumping functionality
    function jump() {
      let jumpCount = 0;
      const jumpInterval = setInterval(function() {
        playerY -= 10;
        jumpCount++;
        
        if (jumpCount > 10) {
          clearInterval(jumpInterval);
          fall();
        }
      }, 20);
    }
    
    // Falling functionality
    function fall() {
      let fallCount = 0;
      const fallInterval = setInterval(function() {
        playerY += 10;
        fallCount++;
        
        if (fallCount > 10) {
          clearInterval(fallInterval);
          isJumping = false;
        }
      }, 20);
    }
    
    // Collision detection
    setInterval(function() {
      const playerRect = player.getBoundingClientRect();
      const platformRect = platform.getBoundingClientRect();
      
      if (
        playerRect.bottom >= platformRect.top &&
        playerRect.top <= platformRect.bottom &&
        playerRect.right >= platformRect.left &&
        playerRect.left <= platformRect.right
      ) {
        // Player and platform collide
        playerY = platformRect.top - playerHeight;
        isJumping = false;
      }
    }, 10);
    
    // Game loop
    setInterval(function() {
      update();
    }, 10);
  </script>
</body>
</html>
```