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.. I ( he red ball) start on a blue platform's game

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

No:10546

←

Prev Next

→

Make a simple 2d side scrolling platformer game wh..ALL
Developer Micah｜Date and time 23/8/1 1:44:30
Build time 27.933 sec｜Game capacity 3.409KB｜

Script

Sure! Here's a simple implementation of a 2D side-scrolling platformer game using HTML, CSS, and JavaScript:

This HTML file includes the implementation for a simple side-scrolling platformer game. It uses a red ball as the player character and blue rectangles as the platforms. You can control the player by pressing the left and right arrow keys to move and the spacebar to jump. Note: You can copy and paste this code into an HTML file (e.g., game.html) and open it in your browser to play the game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of a 2D side-scrolling platformer game using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Side-Scrolling Platformer Game</title>
  <style>
    #game {
      width: 600px;
      height: 400px;
      border: 2px solid black;
      position: relative;
      overflow: hidden;
    }
    #player {
      width: 20px;
      height: 20px;
      background: red;
      position: absolute;
      top: 380px; /* starting on a blue platform */
      left: 0;
    }
    .platform {
      width: 100px;
      height: 10px;
      background: blue;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player"></div>
    <div class="platform" style="top: 380px; left: 200px;"></div>
    <div class="platform" style="top: 350px; left: 400px;"></div>
    <div class="platform" style="top: 320px; left: 600px;"></div>
    
  </div>

// Set up initial variables
      var playerX = 0;
      var playerY = 380;
      var speed = 5;
      var jumping = false;

// Function to handle player movement
      function movePlayer() {
        // Move player left
        function moveLeft() {
          playerX -= speed;
          // Limit player movement to the game container
          if (playerX < 0) {
            playerX = 0;
          }
          player.style.left = playerX + "px";
        }

// Move player right
        function moveRight() {
          playerX += speed;
          // Limit player movement to the game container
          var containerWidth = gameContainer.offsetWidth;
          if (playerX > containerWidth - player.offsetWidth) {
            playerX = containerWidth - player.offsetWidth;
          }
          player.style.left = playerX + "px";
        }

// Jumping logic
        function jump() {
          if (!jumping) {
            playerY -= 80; // Adjust jump height as desired
            player.style.top = playerY + "px";
            setTimeout(function() {
              playerY += 80; // Adjust jump height as desired
              player.style.top = playerY + "px";
              jumping = false;
            }, 500); // Adjust jump duration as desired
            jumping = true;
          }
        }

// Event listeners for button clicks
        document.addEventListener("keydown", function(event) {
          if (event.keyCode === 37) { // Left arrow key
            moveLeft();
          } else if (event.keyCode === 39) { // Right arrow key
            moveRight();
          } else if (event.keyCode === 32) { // Spacebar (jump)
            jump();
          }
        });
      }

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

Note: You can copy and paste this code into an HTML file (e.g., game.html) and open it in your browser to play the game.