Make a simple 2d side scrolling platformer game where I am trying to jump on all the blue platforms. Make there be three buttons: forward arrow(move forward. Backwar arrow. Move back. And jump. When I collide with a platform from below i go thru it, but if I collide from the top or side it is solid.'s game

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

No:10543

121

←

Prev Next

→

Make a simple 2d side scrolling platformer game wh..ALL
Developer Micah｜Date and time 23/8/1 1:41:03
Build time 34.684 sec｜Game capacity 3.83KB｜

Script

Sure! Here's a simplified version of a 2D side-scrolling platformer game implemented as a single HTML file using JavaScript. It includes three buttons for moving forward, moving backward, and jumping. The player character can jump on blue platforms but will pass through them if colliding from below. If colliding from the top or side, the platforms act as solid obstacles. Pictograms are not used, but you can customize the graphical assets as needed.

You can copy and paste this code into a new HTML file and open it in a web browser. Use the forward arrow key to move forward, the backward arrow key to move backward, and the upward arrow key to jump. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>2D Platformer Game</title>
  <style>
    #game {
      position: relative;
      width: 400px;
      height: 300px;
      border: 1px solid black;
      overflow: hidden;
      margin: 0 auto;
    }

#player {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: red;
      left: 0;
      bottom: 0;
    }

.platform {
      position: absolute;
      width: 80px;
      height: 20px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player"></div>
    <div class="platform" style="left: 150px; bottom: 70px;"></div>
    <div class="platform" style="left: 250px; bottom: 140px;"></div>
    <div class="platform" style="left: 350px; bottom: 210px;"></div>
  </div>

// Game initialization
    function init() {
      player = document.getElementById('player');
      platforms = document.getElementsByClassName('platform');
      jumpForce = 10;

document.addEventListener('keydown', handleKeyDown);
    }

// Move player left
    function moveLeft() {
      var leftPos = parseInt(player.style.left);
      player.style.left = leftPos - 10 + 'px';
    }

// Move player right
    function moveRight() {
      var leftPos = parseInt(player.style.left);
      player.style.left = leftPos + 10 + 'px';
    }

// Handle keydown event for button controls
    function handleKeyDown(event) {
      if (event.key === 'ArrowLeft') {
        moveLeft();
      } else if (event.key === 'ArrowRight') {
        moveRight();
      } else if (event.key === 'ArrowUp') {
        jump();
      }
    }

// Handle collision detection
    function collisionDetection() {
      for (var i = 0; i < platforms.length; i++) {
        var p = platforms[i];
        var playerRect = player.getBoundingClientRect();
        var platformRect = p.getBoundingClientRect();

if (
          playerRect.top < platformRect.bottom &&
          playerRect.bottom > platformRect.top &&
          playerRect.right > platformRect.left &&
          playerRect.left < platformRect.right
        ) {
          if (playerRect.top < platformRect.top) {
            // Collided from below, pass through platform
            player.style.bottom = parseInt(player.style.bottom) - 10 + 'px';
          } else {
            // Collided from the top or side, solid platform
            resetPosition();
          }
        }
      }
    }

// Player jumping
    function jump() {
      var bottomPos = parseInt(player.style.bottom);
      player.style.bottom = bottomPos + jumpForce + 'px';
      setTimeout(function() {
        var newY = parseInt(player.style.bottom) - jumpForce;
        player.style.bottom = newY + 'px';
      }, 500);
    }

// Reset player position
    function resetPosition() {
      player.style.bottom = 0;
    }

// Game loop
    function gameLoop() {
      collisionDetection();
      requestAnimationFrame(gameLoop);
    }

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