Een platformer met oneindig verhaal's game

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

No:17512

←

Prev Next

→

Een platformer met oneindig verhaal
Developer User7703｜Date and time 23/9/23 16:35:21
Build time 43.474 sec｜Game capacity 4.469KB｜

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>
    /* CSS styling for the game */
    #gameContainer {
      width: 100%;
      height: 400px;
      background: #e1e1e1;
      position: relative;
      overflow: hidden;
      border: 5px solid #333;
    }

#player {
      width: 50px;
      height: 50px;
      background: #ff3333;
      position: absolute;
      bottom: 0;
      left: 0;
    }

.platform {
      width: 100px;
      height: 20px;
      background: #333;
      position: absolute;
    }

.platform1 {
      bottom: 50px;
      left: 200px;
    }

.platform2 {
      bottom: 120px;
      left: 400px;
    }

.platform3 {
      bottom: 200px;
      left: 600px;
    }

.platform4 {
      bottom: 70px;
      left: 800px;
    }

.platform5 {
      bottom: 150px;
      left: 1000px;
    }

.platform6 {
      bottom: 220px;
      left: 1200px;
    }

.platform7 {
      bottom: 90px;
      left: 1400px;
    }

.platform8 {
      bottom: 160px;
      left: 1600px;
    }

.platform9 {
      bottom: 230px;
      left: 1800px;
    }

.platform10 {
      bottom: 10px;
      left: 2000px;
    }

.platform11 {
      bottom: 80px;
      left: 2200px;
    }

.platform12 {
      bottom: 120px;
      left: 2400px;
    }

.platform13 {
      bottom: 190px;
      left: 2600px;
    }

.platform14 {
      bottom: 260px;
      left: 2800px;
    }

.platform15 {
      bottom: 100px;
      left: 3000px;
    }

.platform16 {
      bottom: 170px;
      left: 3200px;
    }
  </style>
</head>
<body>
  <div id="gameContainer">
    <div id="player"></div>
    <div class="platform platform1"></div>
    <div class="platform platform2"></div>
    <div class="platform platform3"></div>
    <div class="platform platform4"></div>
    <div class="platform platform5"></div>
    <div class="platform platform6"></div>
    <div class="platform platform7"></div>
    <div class="platform platform8"></div>
    <div class="platform platform9"></div>
    <div class="platform platform10"></div>
    <div class="platform platform11"></div>
    <div class="platform platform12"></div>
    <div class="platform platform13"></div>
    <div class="platform platform14"></div>
    <div class="platform platform15"></div>
    <div class="platform platform16"></div>
  </div>

// Set initial player position
      var playerX = 0;
      var playerY = 0;

// Add event listener for touch controls
      container.addEventListener("touchstart", function(e) {
        e.preventDefault();
        playerJump();
      });

// Add event listener for keyboard controls
      document.addEventListener("keydown", function(e) {
        if (e.code === "Space") {
          e.preventDefault();
          playerJump();
        }
      });

// Function to make the player jump
      function playerJump() {
        if (playerY === 0) {
          playerY = 250;
          player.style.bottom = playerY + "px";
        }
      }

// Game loop to move the player
      setInterval(function() {
        // Move player horizontally
        playerX += 10;
        player.style.left = playerX + "px";

// Check collision with platforms
        for (var i = 0; i < platforms.length; i++) {
          var platform = platforms[i];

if (isColliding(player, platform)) {
            playerY = parseInt(platform.style.bottom) + parseInt(platform.style.height);
            player.style.bottom = playerY + "px";
          }
        }

// Check if player is on the ground
        if (playerY > 0) {
          playerY -= 5;
          player.style.bottom = playerY + "px";
        }
      }, 50);

// Function to check collision between two elements
      function isColliding(elem1, elem2) {
        var rect1 = elem1.getBoundingClientRect();
        var rect2 = elem2.getBoundingClientRect();

return !(rect1.bottom < rect2.top ||
                 rect1.top > rect2.bottom ||
                 rect1.right < rect2.left ||
                 rect1.left > rect2.right);
      }
    });
  </script>
</body>
</html>