Make a plataform game for mobile's game | AI game creator

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

No:47144

68

Make a plataform game for mobile
Developer User20393｜Date and time 24/2/27 10:07:19
Build time 8.004 sec｜Game capacity 2.008KB｜

→ 　

0　

0　

　
　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Plataform Game</title>
  <style>
    #player {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      background-color: black;
    }
    
    #platform {
      position: absolute;
      bottom: 50px;
      left: 0;
      width: 100%;
      height: 20px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="player"></div>
  <div id="platform"></div>

<script>
    const player = document.getElementById('player');
    const platform = document.getElementById('platform');
    
    let isJumping = false;
    let gravity = 0.9;
    let jumpStrength = 15;
    let playerBottom = 0;
    let playerLeft = 50;
    
    function jump() {
      if (!isJumping) {
        isJumping = true;
        let interval = setInterval(() => {
          if (playerBottom < 250) {
            playerBottom += gravity;
            player.style.bottom = playerBottom + 'px';
          } else {
            clearInterval(interval);
            let downInterval = setInterval(() => {
              if (playerBottom > 0) {
                playerBottom -= gravity;
                player.style.bottom = playerBottom + 'px';
              } else {
                isJumping = false;
                clearInterval(downInterval);
              }
            }, 10);
          }
        }, 10);
      }
    }
    
    function moveLeft() {
      if (playerLeft > 0) {
        playerLeft -= 10;
        player.style.left = playerLeft + '%';
      }
    }
    
    function moveRight() {
      if (playerLeft < 100) {
        playerLeft += 10;
        player.style.left = playerLeft + '%';
      }
    }
    
    document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowUp') {
        jump();
      } else if (event.key === 'ArrowLeft') {
        moveLeft();
      } else if (event.key === 'ArrowRight') {
        moveRight();
      }
    });
  </script>
</body>
</html>