गेम एनीमेशन के लिए फ्लाई बॉक्स

अनुशंसित

19 May 2025

टिकटोक सिक्के फर्जी पेज भेजें

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>

// 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>

गेम एनीमेशन के लिए फ्लाई बॉक्स

अनुशंसित

पैक मैन गेम

क्रॉसी रोड three.js के साथ

टिकटोक सिक्के फर्जी पेज भेजें

HTML

CSS

JS

अनुशंसित

पैक मैन गेम

क्रॉसी रोड three.js के साथ

टिकटोक सिक्के फर्जी पेज भेजें

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS