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:10548

←

Prev Next

→

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

Script

Sure! Here's a simplified implementation of a 2D side scrolling platformer game using JavaScript and HTML:

To play the game, you can open the HTML file in a web browser on your smartphone, or you can copy the code into an HTML file on your smartphone and open it locally. You can control the player's movement using the arrow buttons on the keyboard. In this game, you control a red ball (player) and need to jump on the blue platforms. The player can move left and right using arrow buttons and jump by pressing the up arrow. The platforms are solid from the top and sides, but you can go through them if you collide from below. The game loops continuously, updating the player's position and checking for collisions.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simplified implementation of a 2D side scrolling platformer game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    canvas {
      background: #eee;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  
  <script>
    window.onload = function() {
      // Get the canvas
      var canvas = document.getElementById("gameCanvas");
      var ctx = canvas.getContext("2d");
      
      // Set canvas dimensions
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      // Player properties
      var player = {
        x: 100,
        y: canvas.height / 2,
        width: 20,
        height: 20,
        speed: 5,
        velX: 0,
        velY: 0,
        jumping: false,
        grounded: false
      };
      
      // Platform properties
      var platforms = [
        { x: 100, y: canvas.height / 2, width: 200, height: 20, color: "#4286f4" },
        { x: 500, y: canvas.height / 2 - 50, width: 150, height: 20, color: "#4286f4" },
        { x: 800, y: canvas.height / 2, width: 100, height: 20, color: "#4286f4" }
      ];
      
      // Control buttons
      var buttons = {
        left: false,
        right: false,
        jump: false
      };
      
      // Event listeners for buttons
      document.addEventListener("keydown", function(e) {
        if (e.key === "ArrowLeft") buttons.left = true;
        if (e.key === "ArrowRight") buttons.right = true;
        if (e.key === "ArrowUp") buttons.jump = true;
      });
      
      document.addEventListener("keyup", function(e) {
        if (e.key === "ArrowLeft") buttons.left = false;
        if (e.key === "ArrowRight") buttons.right = false;
        if (e.key === "ArrowUp") buttons.jump = false;
      });
      
      // Game loop
      function update() {
        // Move the player horizontally
        if (buttons.left) player.velX = -player.speed;
        if (buttons.right) player.velX = player.speed;
        if (!buttons.left && !buttons.right) player.velX = 0;
        
        // Player jumping
        if (buttons.jump && player.grounded) {
          player.velY = -player.speed * 2;
          player.grounded = false;
        }
        
        // Gravity
        player.velY += 1;
        player.y += player.velY;
        
        // Collision detection
        player.grounded = false;
        for (var i = 0; i < platforms.length; i++) {
          var p = platforms[i];
          
          // Check if player collides horizontally
          if (
            player.x + player.width > p.x &&
            player.x < p.x + p.width &&
            player.y + player.height > p.y &&
            player.y < p.y + p.height
          ) {
            if (player.velX > 0) {
              player.x = p.x - player.width;
            } else if (player.velX < 0) {
              player.x = p.x + p.width;
            }
          }
          
          // Check if player collides vertically
          if (
            player.x + player.width > p.x &&
            player.x < p.x + p.width &&
            player.y + player.height > p.y &&
            player.y < p.y + p.height
          ) {
            if (player.velY > 0) {
              player.y = p.y - player.height;
              player.grounded = true;
              player.velY = 0;
            } else if (player.velY < 0) {
              player.y = p.y + p.height;
              player.velY = 0;
            }
          }
        }
        
        // Update player position
        player.x += player.velX;
        
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Render platforms
        for (var i = 0; i < platforms.length; i++) {
          var p = platforms[i];
          ctx.fillStyle = p.color;
          ctx.fillRect(p.x, p.y, p.width, p.height);
        }
        
        // Render player
        ctx.fillStyle = "#ff0000";
        ctx.fillRect(player.x, player.y, player.width, player.height);
        
        // Call update function again
        requestAnimationFrame(update);
      }
      
      // Start the game loop
      update();
    };
  </script>
</body>
</html>
```

In this game, you control a red ball (player) and need to jump on the blue platforms. The player can move left and right using arrow buttons and jump by pressing the up arrow. The platforms are solid from the top and sides, but you can go through them if you collide from below. The game loops continuously, updating the player's position and checking for collisions.