Platformer with gravity and physics and collisions and levels and a title screen's game

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

No:42943

←

Prev Next

→

Platformer with gravity and physics and collisions..ALL
Developer User19028｜Date and time 24/2/13 15:12:24
Build time 17.117 sec｜Game capacity 4.323KB｜

Script

Sure, here's an example of a simple platformer game implemented as a single HTML file using JavaScript. This game includes gravity, basic physics, collisions, multiple levels, and a title screen.

To play the game, simply copy the above code into a new HTML file and open it in a web browser. The game will start with a title screen, and you can use the arrow keys to control the player character. The objective is to navigate through the platforms and reach the end of each level without falling off the screen. The game includes multiple levels, which can be added to the `levels` array in the code.

←

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 platformer game implemented as a single HTML file using JavaScript. This game includes gravity, basic physics, collisions, multiple levels, and a title screen.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Platformer Game</title>
  <style>
    /* Styling for game canvas */
    canvas {
      border: 1px solid black;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  
  <canvas id="gameCanvas" width="400" height="300"></canvas>

<script>
    // Game variables
    var canvas, ctx;
    var player, platforms;
    var gravity = 0.5;
    var jumpForce = -10;
    var levelIndex = 0;
    var levels = [
      { platforms: [ { x: 50, y: 270, width: 100, height: 20 } ] },
      { platforms: [ { x: 50, y: 240, width: 80, height: 20 }, { x: 150, y: 220, width: 80, height: 20 } ] }
      // Add more levels as needed
    ];

// Initialization function
    function init() {
      canvas = document.getElementById('gameCanvas');
      ctx = canvas.getContext('2d');

// Create player
      player = {
        x: 50,
        y: 200,
        width: 20,
        height: 20,
        velocityX: 0,
        velocityY: 0,
        isJumping: true,
        jumpCount: 0
      };

// Set up keyboard listeners
      document.addEventListener('keydown', handleKeyDown);
      document.addEventListener('keyup', handleKeyUp);

// Load and start first level
      loadLevel();
    }

// Load current level
    function loadLevel() {
      platforms = levels[levelIndex].platforms;
      player.x = 50;
      player.y = 200;
      player.velocityX = 0;
      player.velocityY = 0;
      player.isJumping = true;

// Start game loop
      setInterval(update, 16); // 60 FPS
    }

// Game update function
    function update() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update player
      player.velocityY += gravity;
      player.x += player.velocityX;
      player.y += player.velocityY;

if (player.y > canvas.height) {
        // Player fell out of the screen, restart level
        loadLevel();
      }

// Check collisions with platforms
      platforms.forEach(function(platform) {
        if (
          player.x < platform.x + platform.width &&
          player.x + player.width > platform.x &&
          player.y + player.height > platform.y &&
          player.y < platform.y + platform.height
        ) {
          // Player collided with a platform, stop falling
          player.velocityY = 0;
          player.isJumping = false;
          player.jumpCount = 0;
          player.y = platform.y - player.height;
        }
      });

// Draw platforms
      platforms.forEach(function(platform) {
        ctx.fillStyle = 'gray';
        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
      });

// Draw player
      ctx.fillStyle = 'red';
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

// Keyboard event handlers
    function handleKeyDown(event) {
      if (event.keyCode === 32 && !player.isJumping && player.jumpCount < 2) {
        // Spacebar was pressed, jump if not already jumping and not more than 2 jumps
        player.velocityY = jumpForce;
        player.isJumping = true;
        player.jumpCount++;
      } else if (event.keyCode === 37) {
        // Left arrow key was pressed, move left
        player.velocityX = -2;
      } else if (event.keyCode === 39) {
        // Right arrow key was pressed, move right
        player.velocityX = 2;
      }
    }

function handleKeyUp(event) {
      if (event.keyCode === 37 || event.keyCode === 39) {
        // Left or right arrow key was released, stop horizontal movement
        player.velocityX = 0;
      }
    }

// Start game
    window.onload = init;
  </script>
</body>
</html>
```