fly box for game animation

1,131 kevekıbhack

Open In Editor Publish Your Code

fly box for game animation

Recommended

31 October 2023

Simple Snake Game

5 September 2025

HTML Image Object Animation Container

15 August 2024

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Uçan Kutu Animasyonu</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      height: 100vh;
      background: linear-gradient(to top, #aee1f9, #f0f8ff);
      overflow: hidden;
      font-family: Arial, sans-serif;
    }

.game-area {
      position: relative;
      width: 100%;
      height: 100%;
    }

.flying-box {
      position: absolute;
      bottom: 0;
      width: 50px;
      height: 50px;
      background-color: #ff6347;
      border-radius: 10px;
      animation: flyUp 5s linear forwards;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

@keyframes flyUp {
      0% {
        transform: translateY(0);
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        transform: translateY(-110vh);
        opacity: 0;
      }
    }
  </style>
</head>
<body>

<div class="game-area" id="gameArea">
  
</div>

<script>
  const gameArea = document.getElementById('gameArea');

// Uçan kutu oluştur
  function createFlyingBox() {
    const box = document.createElement('div');
    box.classList.add('flying-box');

// Rastgele yatay konum (ekran genişliği içinde)
    const randomLeft = Math.random() * (window.innerWidth - 60);
    box.style.left = `${randomLeft}px`;

gameArea.appendChild(box);

// 5 saniye sonra kutuyu kaldır
    setTimeout(() => {
      box.remove();
    }, 5000);
  }

// Belirli aralıklarla kutu oluştur (oyun içinde rastgele kutular gibi)
  setInterval(() => {
    createFlyingBox();
  }, 1500); // Her 1.5 saniyede bir kutu

// Başlangıçta birkaç kutu hemen oluştur
  for (let i = 0; i < 3; i++) {
    setTimeout(createFlyingBox, i * 1000);
  }
</script>

</body>
</html>

CSS

JS