boîte à mouches pour l'animation de jeu

Ouvrir dans l'éditeur Publiez votre code

Recommandé

3 July 2025

Un code de M. Duck

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>

boîte à mouches pour l'animation de jeu

Recommandé

La symphonie de la syntaxe

Bonne fête des mères

Un code de M. Duck

HTML

CSS

JS

Recommandé

La symphonie de la syntaxe

Bonne fête des mères

Un code de M. Duck

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS