AI game creator

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

No:2377

974

←

Prev Next

→

Platformer
Developer User3550｜Date and time 23/6/21 3:32:55
Build time 39.888 sec｜Game capacity 4.065KB｜

Script

Game Here is a sample program for a platformer game implemented as a single HTML file with JavaScript. The game can be played on a smartphone and makes use of emojis for graphics.

In this game, you play as a smiley face that can jump and move left and right. Your goal is to reach the end of the level, which is made up of randomly generated platforms. You can jump onto and off of platforms, but if you fall off the bottom of the screen, you lose and the game restarts. Good luck!

←

Prev　Next

→ 　

Back　

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

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

Game

Here is a sample program for a platformer game implemented as a single HTML file with JavaScript. The game can be played on a smartphone and makes use of emojis for graphics.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Platformer Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="game-canvas"></canvas>

// State variables
    let playerX = 0;
    let playerY = 0;
    let playerYSpeed = 0;
    let platforms = [];

// Key bindings
    const KEY_LEFT = "ArrowLeft";
    const KEY_RIGHT = "ArrowRight";
    const KEY_JUMP = " ";

// Set up the canvas
    const canvas = document.getElementById("game-canvas");
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;
    const ctx = canvas.getContext("2d");

// Update the game state
    function update() {
      // Update the player's y position and speed due to gravity
      playerYSpeed += GRAVITY;
      playerY += playerYSpeed;

// Check for collisions with platforms
      platforms.forEach(platform => {
        if (playerX + PLAYER_SIZE >= platform.x
            && playerX <= platform.x + PLATFORM_SIZE
            && playerY + PLAYER_SIZE >= platform.y
            && playerY + PLAYER_SIZE <= platform.y + platform.height
            && playerYSpeed > 0) {
          playerYSpeed = 0;
          playerY = platform.y - PLAYER_SIZE;
        }
      });

// Move the player left or right
      if (isKeyDown(KEY_LEFT)) {
        playerX -= PLAYER_SPEED;
      } else if (isKeyDown(KEY_RIGHT)) {
        playerX += PLAYER_SPEED;
      }

// Jump if the player presses space and is on a platform
      if (isKeyDown(KEY_JUMP)) {
        platforms.forEach(platform => {
          if (playerX + PLAYER_SIZE >= platform.x
              && playerX <= platform.x + PLATFORM_SIZE
              && playerY + PLAYER_SIZE === platform.y
              && playerYSpeed === 0) {
            playerYSpeed = JUMP_SPEED;
          }
        });
      }
    }

// Draw the game screen
    function draw() {
      // Clear the canvas
      ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

// Draw the player
      ctx.fillStyle = "😀";
      ctx.fillRect(playerX, playerY, PLAYER_SIZE, PLAYER_SIZE);

// Draw the platforms
      ctx.fillStyle = "🟩";
      platforms.forEach(platform => {
        ctx.fillRect(platform.x, platform.y, PLATFORM_SIZE, platform.height);
      });
    }

// Main game loop
    let lastUpdateTime = Date.now();
    function loop() {
      // Calculate the time since the last update
      const now = Date.now();
      const dt = now - lastUpdateTime;
      lastUpdateTime = now;

// Update the game state and redraw the screen
      update();
      draw();

// Schedule the next frame
      setTimeout(loop, 20);
    }

// Utility functions for handling key events
    const keyStates = {};
    function isKeyDown(key) {
      return keyStates[key] === true;
    }
    document.addEventListener("keydown", e => {
      keyStates[e.key] = true;
    });
    document.addEventListener("keyup", e => {
      keyStates[e.key] = false;
    });

// Generate some random platforms
    for (let i = 0; i < 5; i++) {
      platforms.push({
        x: i * PLATFORM_SPACING,
        y: Math.random() * (CANVAS_HEIGHT - 32) + 32,
        height: Math.random() * 40 + 10
      });
    }

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