Make a 2d platformer's game

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

No:23184

←

Prev Next

→

Make a 2d platformer
Developer User10720｜Date and time 23/10/28 20:18:09
Build time 68.066 sec｜Game capacity 3.467KB｜

Script

Sure! Here's an example of a simple 2D platformer game implemented as a single HTML file using JavaScript. You can copy the code into an HTML file and run it in a web browser:

This code will create a canvas element where you can control a blue square (representing the player) using the arrow keys. The player can jump on the green platforms. If the player falls off the screen, a "Game Over" message will appear, and you can start the game again by clicking OK in the alert box. Note: This is a basic example to get you started with a 2D platformer game. You can enhance and extend the game logic and visuals as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's an example of a simple 2D platformer game implemented as a single HTML file using JavaScript. You can copy the code into an HTML file and run it in a web browser:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Simple Platformer Game</title>
  <style>
    canvas {
      border: 1px solid black;
      margin: auto;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

// Keyboard event listeners
    window.addEventListener("keydown", function(e) {
      keys[e.keyCode] = true;
    });

window.addEventListener("keyup", function(e) {
      keys[e.keyCode] = false;
    });

// Game loop
    function update() {
      // Update player position
      if (keys[38] && !player.isJumping) { // Up arrow key
        player.velocityY -= 12;
        player.isJumping = true;
      }

if (keys[37]) { // Left arrow key
        player.x -= 5;
      }

if (keys[39]) { // Right arrow key
        player.x += 5;
      }

player.velocityY += gravity;
      player.y += player.velocityY;
      player.isJumping = true;

// Collision detection with platforms
      for (var i = 0; i < platforms.length; i++) {
        var platform = platforms[i];

if (player.y + player.height > platform.y &&
            player.y < platform.y + platform.height &&
            player.x + player.width > platform.x &&
            player.x < platform.x + platform.width &&
            player.velocityY >= 0) {
          player.y = platform.y - player.height;
          player.velocityY = 0;
          player.isJumping = false;
        }
      }

// Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player and platforms
      ctx.fillStyle = "blue";
      ctx.fillRect(player.x, player.y, player.width, player.height);

ctx.fillStyle = "green";
      for (var i = 0; i < platforms.length; i++) {
        var platform = platforms[i];
        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
      }

// Game over condition
      if (player.y > canvas.height) {
        alert("Game Over! You fell off the screen.");
        resetGame();
      }

// Repeat game loop
      requestAnimationFrame(update);
    }

// Reset game to initial state
    function resetGame() {
      player.x = 50;
      player.y = 250;
      player.velocityY = 0;
      player.isJumping = false;
    }

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

Note: This is a basic example to get you started with a 2D platformer game. You can enhance and extend the game logic and visuals as per your requirements.