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

162

←

Prev Next

→

Make a simple 2d side scrolling platformer game wh..ALL
Developer Micah｜Date and time 23/8/1 1:45:33
Build time 39.882 sec｜Game capacity 5.078KB｜

Script

Sure! Here's a simple implementation of a 2D side-scrolling platformer game using HTML and JavaScript. You can try it out and play as a finished game:

To play the game, open the HTML file in your web browser on a smartphone or a web browser with a mobile view. Use the left and right arrow buttons on the on-screen keyboard to move the player left and right. Use the up arrow button to jump. The player (red ball) starts on a blue platform, and you need to jump on all the blue platforms while avoiding falling off the screen. When colliding with a platform from below, you will go through it, but if you collide from the top or side, it becomes solid.

←

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 and JavaScript. You can try it out and play as a finished game:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Platformer Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    
    canvas {
      background-color: #f2f2f2;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  
  <script>
    // Game variables
    var canvas, context;
    var player;
    var platforms = [];
    var gravity = 0.5;
    
    // Button states
    var leftBtn = false;
    var rightBtn = false;
    var jumpBtn = false;
    
    // Platform class
    function Platform(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      
      this.draw = function() {
        context.fillStyle = "#00f";
        context.fillRect(this.x, this.y, this.width, this.height);
      }
    }
    
    // Player class
    function Player(x, y, size) {
      this.x = x;
      this.y = y;
      this.size = size;
      this.velY = 0;
      this.isJumping = false;
      
      this.draw = function() {
        context.fillStyle = "#f00";
        context.fillRect(this.x, this.y, this.size, this.size);
      }
      
      this.jump = function() {
        if (!this.isJumping) {
          this.velY = -10;
          this.isJumping = true;
        }
      }
      
      this.move = function(dir) {
        if (dir === "right") {
          this.x += 5;
        } else if (dir === "left") {
          this.x -= 5;
        }
      }
      
      this.update = function() {
        // Apply gravity
        this.velY += gravity;
        this.y += this.velY;
        
        // Collision detection with platforms
        for (var i = 0; i < platforms.length; i++) {
          var p = platforms[i];
          
          // Collision from the top or sides
          if (this.x + this.size > p.x && this.x < p.x + p.width && this.y + this.size > p.y && this.y < p.y + p.height) {
            if (this.y + this.size > p.y && this.velY > 0) {
              this.y = p.y - this.size;
              this.isJumping = false;
              this.velY = 0;
            } else if (this.x + this.size > p.x && this.x < p.x + p.width && this.y < p.y + p.height && this.x + this.size < p.x + 10) {
              this.x = p.x - this.size;
            } else if (this.x < p.x + p.width && this.x > p.x && this.y < p.y + p.height && this.x > p.x + p.width - 10) {
              this.x = p.x + p.width;
            }
          }
        }
      }
    }
    
    // Handle button events
    function buttonDown(e) {
      if (e.keyCode === 39) {
        rightBtn = true;  // Right arrow
      } else if (e.keyCode === 37) {
        leftBtn = true;  // Left arrow
      } else if (e.keyCode === 38) {
        jumpBtn = true;  // Up arrow for jump
      }
    }
    
    function buttonUp(e) {
      if (e.keyCode === 39) {
        rightBtn = false;
      } else if (e.keyCode === 37) {
        leftBtn = false;
      } else if (e.keyCode === 38) {
        jumpBtn = false;
      }
    }
    
    function setup() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
      
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      // Create player
      player = new Player(50, canvas.height - 50, 20);
      
      // Create platforms
      platforms.push(new Platform(0, canvas.height - 20, canvas.width, 20));
      platforms.push(new Platform(canvas.width / 2 - 100, canvas.height / 2, 200, 20));
      platforms.push(new Platform(canvas.width - 200, canvas.height - 220, 200, 20));
      
      // Event listeners
      document.addEventListener("keydown", buttonDown);
      document.addEventListener("keyup", buttonUp);
      
      requestAnimationFrame(update);
    }
    
    function update() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // Player movement
      if (leftBtn) {
        player.move("left");
      } else if (rightBtn) {
        player.move("right");
      }
      
      if (jumpBtn) {
        player.jump();
      }
      
      // Update player and draw
      player.update();
      player.draw();
      
      // Draw platforms
      for (var i = 0; i < platforms.length; i++) {
        platforms[i].draw();
      }
      
      requestAnimationFrame(update);
    }
    
    // Start the game
    window.onload = function() {
      setup();
    };
  </script>
</body>
</html>
```