Faça um jogo de plataforma que pula andas para os lados tem plataformas que voam e que tem colisão's game | AI game creator

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

No:50229

97

Faça um jogo de plataforma que pula andas para os ..ALL
Developer User21256｜Date and time 24/3/8 5:30:56
Build time 19.291 sec｜Game capacity 3.881KB｜

→ 　

0　

0　

　

　

[PR]現在の売れ筋アプリランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<title>Plataforma Jump Game</title>
<style>
#player {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 0;
}

.platform {
  width: 100px;
  height: 20px;
  background-color: blue;
  position: absolute;
}

.flying-platform {
  width: 100px;
  height: 20px;
  background-color: green;
  position: absolute;
}

</style>
</head>
<body>

<div id="player"></div>

<div id="gameArea">
  <div class="platform" style="bottom: 0; left: 200px;"></div>
  <div class="platform" style="bottom: 0; left: 400px;"></div>
  <div class="platform" style="bottom: 0; left: 600px;"></div>
  <div class="platform" style="bottom: 0; left: 800px;"></div>
  
  <div class="flying-platform" style="bottom: 200px; left: 300px;"></div>
</div>

<script>
  const player = document.getElementById('player');
  const gameArea = document.getElementById('gameArea');
  let isJumping = false;
  let isMovingLeft = false;
  let isMovingRight = false;
  let gravity = 0.9;
  let speed = 0;
  
  function jump() {
    if (isJumping) return;
    isJumping = true;
    speed = 15;
  }
  
  function moveLeft() {
    isMovingLeft = true;
  }
  
  function moveRight() {
    isMovingRight = true;
  }
  
  function stopMoving() {
    isMovingLeft = false;
    isMovingRight = false;
  }
  
  function movePlayer() {
    let bottomPosition = parseInt(window.getComputedStyle(player).getPropertyValue('bottom'));
    
    // Jumping
    if (isJumping) {
      speed -= gravity;
      bottomPosition += speed;
    }
    
    // Moving left
    if (isMovingLeft) {
      let leftPosition = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
      player.style.left = (leftPosition - 5) + 'px';
    }
    
    // Moving right
    if (isMovingRight) {
      let leftPosition = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
      player.style.left = (leftPosition + 5) + 'px';
    }
    
    // Collision detection
    let platforms = document.querySelectorAll('.platform');
    platforms.forEach((platform) => {
      let bottom = parseInt(window.getComputedStyle(platform).getPropertyValue('bottom'));
      let left = parseInt(window.getComputedStyle(platform).getPropertyValue('left'));
      
      if (bottom <= (bottomPosition + 50) && 
          bottom >= (bottomPosition - 20) &&
          left <= (parseInt(window.getComputedStyle(player).getPropertyValue('left')) + 50) &&
          (left + 100) >= parseInt(window.getComputedStyle(player).getPropertyValue('left'))) {
          
          isJumping = false;
          speed = 0;
          player.style.bottom = (bottom + 50) + 'px';
      }
    });
    
    // Flying platform
    let flyingPlatform = document.querySelector('.flying-platform');
    let flyingBottom = parseInt(window.getComputedStyle(flyingPlatform).getPropertyValue('bottom'));
    let flyingLeft = parseInt(window.getComputedStyle(flyingPlatform).getPropertyValue('left'));
    
    if (bottomPosition <= (flyingBottom + 20) && 
        bottomPosition >= (flyingBottom - 20) &&
        flyingLeft <= (parseInt(window.getComputedStyle(player).getPropertyValue('left')) + 50) &&
        (flyingLeft + 100) >= parseInt(window.getComputedStyle(player).getPropertyValue('left'))) {
          
        isJumping = false;
        speed = 0;
        player.style.bottom = (flyingBottom + 50) + 'px';
    }
    
    // Gravity
    player.style.bottom = (bottomPosition - speed) + 'px';
  }
  
  setInterval(movePlayer, 50);
  
  document.addEventListener('keydown', (event) => {
    if (event.code === 'Space') jump();
    if (event.code === 'ArrowLeft') moveLeft();
    if (event.code === 'ArrowRight') moveRight();
  });
  
  document.addEventListener('keyup', (event) => {
    if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') stopMoving();
  });
</script>

</body>
</html>