A platforming game, where you have to dodge flying bullets that come at you from the sky That you can use Aero keys and also works on mobile's game | AI game creator

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

No:49349

37

A platforming game, where you have to dodge flying..ALL
Developer User21041｜Date and time 24/3/5 0:03:06
Build time 9.52 sec｜Game capacity 1.969KB｜

→ 　

0　

0　

　
　

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

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

(C)2023 HisashiApp

<script>
  const player = document.querySelector('#player');
  const bullets = document.querySelectorAll('.bullet');
  
  document.addEventListener('keydown', (event) => {
    const key = event.key;
    let playerPosition = parseInt(player.style.left);
    
    if (key === 'ArrowLeft') {
      if (playerPosition > 0) {
        player.style.left = `${playerPosition - 10}px`;
      }
    } else if (key === 'ArrowRight') {
      if (playerPosition < window.innerWidth - player.offsetWidth) {
        player.style.left = `${playerPosition + 10}px`;
      }
    }
  });
  
  setInterval(() => {
    bullets.forEach((bullet) => {
      let bulletPosition = parseInt(bullet.style.top);
      
      if (bulletPosition > window.innerHeight) {
        bullet.style.top = '0px';
        bullet.style.left = `${Math.random() * (window.innerWidth - bullet.offsetWidth)}px`;
      } else {
        bullet.style.top = `${bulletPosition + 5}px`;
        
        if (checkCollision(player, bullet)) {
          alert('Game Over! You were hit by a bullet.');
          location.reload();
        }
      }   
    });
  }, 50);
  
  function checkCollision(player, bullet) {
    const playerRect = player.getBoundingClientRect();
    const bulletRect = bullet.getBoundingClientRect();
    
    return !(
      playerRect.top > bulletRect.bottom ||
      playerRect.bottom < bulletRect.top ||
      playerRect.right < bulletRect.left ||
      playerRect.left > bulletRect.right
    );
  }
</script>

<style>
  #player {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    width: 50px;
    height: 50px;
    background-color: blue;
  }
  
  .bullet {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
  }
</style>

<div id="player"></div>
<div class="bullet" style="top: 0px; left: 50%;"></div>
<div class="bullet" style="top: 0px; left: 30%;"></div>
<div class="bullet" style="top: 0px; left: 70%;"></div>