AI game creator

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

No:6334

1427

←

Prev Next

→

A platformer game
Developer User3883｜Date and time 23/7/2 2:59:18
Build time 29.436 sec｜Game capacity 2.972KB｜

Script

Below is a simple platformer game implemented as a single HTML file using JavaScript. It uses arrow keys for controlling the player on a smartphone. Please note that the game mechanics and visuals are extremely basic for the sake of simplicity.

To play the game on a smartphone, open the HTML file in a browser that supports HTML5 canvas and use the on-screen arrow keys (if available) or the physical arrow keys of your keyboard (if connected) to control the player. The objective of the game is to navigate the player across the platform by jumping and moving left or right. The player's character is represented by a blue rectangle.

←

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: #ddd;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

// Player properties
    const player = {
      x: 50,
      y: 220,
      width: 30,
      height: 30,
      dx: 0,
      dy: 0,
      speed: 5,
      jumping: false
    };

// Controls
    const controls = {
      ArrowUp: 'jump'
    };

// Key states
    const keyState = {};

// Event listeners for key presses and releases
    window.addEventListener('keydown', (event) => {
      keyState[event.key] = true;
    });

window.addEventListener('keyup', (event) => {
      keyState[event.key] = false;
    });

// Update player position based on key states
    function updatePlayer() {
      if (keyState['ArrowLeft']) {
        player.dx = -player.speed;
      } else if (keyState['ArrowRight']) {
        player.dx = player.speed;
      } else {
        player.dx = 0;
      }

if (keyState[controls.ArrowUp]) {
        if (!player.jumping) {
          player.jumping = true;
          player.dy = -player.speed * 2;
        }
      }

player.x += player.dx;
      player.y += player.dy;

player.dy += 0.5; // Gravity

if (player.y + player.height >= canvas.height) {
        player.y = canvas.height - player.height;
        player.jumping = false;
      }

if (player.x < 0) {
        player.x = 0;
      } else if (player.x + player.width > canvas.width) {
        player.x = canvas.width - player.width;
      }
    }

// Render player on canvas
    function drawPlayer() {
      context.fillStyle = 'blue';
      context.fillRect(player.x, player.y, player.width, player.height);
    }

// Game loop
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);

updatePlayer();
      drawPlayer();

requestAnimationFrame(gameLoop);
    }

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