AI game creator

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

No:25285

←

Prev Next

→

Platformer
Developer User12304｜Date and time 23/11/20 5:27:37
Build time 67.268 sec｜Game capacity 3.263KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Platformer Game</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    canvas {
      background-color: #f0f0f0;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  
  <script>
    // Initialize the game canvas
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    // Define the player object
    const player = {
      x: 50,
      y: 50,
      width: 40,
      height: 40,
      speed: 5,
      jumping: false
    };
    
    // Define the platforms
    const platforms = [
      { x: 0, y: canvas.height - 20, width: canvas.width, height: 20 },
      { x: canvas.width / 2 - 50, y: canvas.height / 2, width: 100, height: 20 },
      { x: canvas.width - 150, y: canvas.height / 3, width: 100, height: 20 }
    ];
    
    // Define the game loop
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      drawPlayer();
      drawPlatforms();
      
      movePlayer();
      
      requestAnimationFrame(gameLoop);
    }
    
    // Draw player on the canvas
    function drawPlayer() {
      context.fillStyle = "#000000";
      context.fillRect(player.x, player.y, player.width, player.height);
    }
    
    // Draw platforms on the canvas
    function drawPlatforms() {
      context.fillStyle = "#ff0000";
      platforms.forEach(platform => {
        context.fillRect(platform.x, platform.y, platform.width, platform.height);
      });
    }
    
    // Move the player based on key events
    function movePlayer() {
      if (keys.ArrowLeft && player.x > 0) {
        player.x -= player.speed;
      }
      if (keys.ArrowRight && player.x + player.width < canvas.width) {
        player.x += player.speed;
      }
      if (keys.ArrowUp && !player.jumping) {
        player.jumping = true;
        player.y -= 10;
        player.speed = -10;
      }
      
      applyGravity();
      checkCollisions();
    }
    
    // Apply gravity to the player
    function applyGravity() {
      player.y += player.speed;
      player.speed += 1;
      
      if (player.y + player.height > canvas.height) {
        player.jumping = false;
        player.y = canvas.height - player.height;
        player.speed = 0;
      }
    }
    
    // Check collisions between the player and platforms
    function checkCollisions() {
      platforms.forEach(platform => {
        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) {
            player.jumping = false;
            player.speed = 0;
            player.y = platform.y - player.height;
        }
      });
    }
    
    // Key event listeners for player movement
    const keys = {};
    document.addEventListener("keydown", event => {
      keys[event.key] = true;
    });
    document.addEventListener("keyup", event => {
      keys[event.key] = false;
    });
    
    // Start the game loop
    gameLoop();
  </script>
</body>
</html>