A simple platformer with checkpoints and different levels's game

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

No:34673

←

Prev Next

→

A simple platformer with checkpoints and different..ALL
Developer User16298｜Date and time 24/1/11 8:12:58
Build time 18.987 sec｜Game capacity 5.149KB｜

Script

Sure! Here's a simple platformer game with checkpoints and different levels, implemented as a single HTML file using JavaScript. Note that for simplicity, I've used basic shapes instead of pictograms. You can copy the code below and save it as an HTML file to play the game:

To play the game, open the saved HTML file in a web browser. The player character is represented as a blue square, and the platforms are represented as green rectangles. Use the spacebar to jump, and the arrow keys (left/right) to move the character. Your goal is to reach the platforms, and you'll earn a score of 100 each time you reach a new platform for the first time. Enjoy the game!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Platformer Game</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

canvas {
        background: #f0f0f0;
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>

// Game variables
      let canvas, ctx;
      let player;
      let platforms;
      let score;
      let currentLevel;
      let checkpoints;

// Initialize the game
      function init() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");
        player = {
          x: 50,
          y: 200,
          width: 40,
          height: 40,
          isJumping: false,
          velocityY: 0
        };
        platforms = [
          { x: 0, y: canvas.height - 20, width: canvas.width, height: 20 }, // Ground platform
          { x: 200, y: 300, width: 100, height: 20 }, // Level 1 platform
          { x: 500, y: 200, width: 100, height: 20 } // Level 2 platform
        ];
        score = 0;
        currentLevel = 0;
        checkpoints = [false, false];

document.addEventListener("keydown", handleKeyDown);
        document.addEventListener("keyup", handleKeyUp);

gameLoop();
      }

// Game loop
      function gameLoop() {
        update();
        render();

requestAnimationFrame(gameLoop);
      }

// Update game logic
      function update() {
        movePlayer();
        checkCollision();
      }

// Move the player
      function movePlayer() {
        if (player.isJumping) {
          player.y -= player.velocityY;
          player.velocityY -= GRAVITY;
          if (player.y >= canvas.height - player.height) {
            player.y = canvas.height - player.height;
            player.isJumping = false;
            player.velocityY = 0;
          }
        }
      }

// Check collision between player and platforms
      function checkCollision() {
        for (let i = 0; i < platforms.length; i++) {
          let platform = platforms[i];
          if (
            player.x < platform.x + platform.width &&
            player.x + player.width > platform.x &&
            player.y < platform.y + platform.height &&
            player.y + player.height > platform.y
          ) {
            if (player.velocityY > 0) {
              // Player is falling down and collided with a platform
              player.y = platform.y - player.height;
              player.isJumping = false;
              player.velocityY = 0;

if (!checkpoints[currentLevel]) {
                score += CHECKPOINT_SCORE;
                checkpoints[currentLevel] = true;
              }
            } else if (player.velocityY < 0) {
              // Player is jumping and collided with a platform
              player.y = platform.y + platform.height;
              player.velocityY = 0;
            }
          }
        }
      }

// Render the game
      function render() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

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

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

// Draw score
        ctx.fillStyle = "black";
        ctx.font = "20px Arial";
        ctx.fillText("Score: " + score, 10, 30);
      }

// Handle key down events
      function handleKeyDown(event) {
        if (event.code === "Space" && !player.isJumping) {
          player.velocityY = JUMP_FORCE;
          player.isJumping = true;
        } else if (event.code === "ArrowRight") {
          player.x += MOVE_SPEED;
        } else if (event.code === "ArrowLeft") {
          player.x -= MOVE_SPEED;
        }
      }

// Handle key up events
      function handleKeyUp(event) {
        if (event.code === "ArrowRight" || event.code === "ArrowLeft") {
          player.x = player.x; // Stop player movement
        }
      }

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