Rastgele Patlayan Konfeti

Uygulama Nedir?

Bu uygulama bir HTML sayfasında bir canvas (çizim alanı) oluşturur ve kullanıcı sayfaya tıkladıkça ekranda rastgele oluşturulan renkli kareler hareket eder. JavaScript’in Math.random() fonksiyonu ile:

rastgele renkler,
rastgele hız ve yönler,
rastgele boyutlar

oluşturulup her tıklamada yeni confetti parçacıkları ortaya çıkıyor.

Bu yöntemle kodda etkileşim, animasyon, canvas API ve rastgelelik öğelerini bir arada kullanmış olacağız.

Uygulamada Kullanılan Kavramlar

Bu uygulamada aşağıdaki temel JavaScript kavramları kullanılmıştır:

Canvas API – Grafik çizim alanı.
Olay Dinleyiciler (Event Listeners) – Kullanıcının tıklama etkileşimi.
Math.random() – Rastgele sayı üretimi.
requestAnimationFrame() – Hareketli animasyonlar.
Döngüler ve nesne dizisi yönetimi – Hareket eden confettilerin takibi.

PROJEDE KULLANILAN KODLAR

Projede kullanılan HTML, CSS ve JS kodları aşağıdaki gibidir!

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Rastgele Patlayan Confetti</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1> Rastgele Patlayan Confetti!</h1>
    <canvas id="canvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    margin: 0;
    overflow: hidden;
    background-color: #FFF;
    cursor: pointer;
}

canvas {
    display: block;
}

h1 {
    position: absolute;
    top: 20px;
    width: 100%;
    text-align: center;
    color: white;
    font-family: Arial, sans-serif;
    z-index: 10;
    pointer-events: none;
}

JS

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const confettis = [];

function randomColor() {
    return `hsl(${Math.random() * 360}, 80%, 60%)`;
}

function createConfetti(x, y) {
    return {
        x: x,
        y: y,
        size: Math.random() * 10 + 5,
        speedX: (Math.random() - 0.5) * 8,
        speedY: (Math.random() - 2) * 5,
        color: randomColor(),
        rotation: Math.random() * 360,
        rotationSpeed: (Math.random() - 0.5) * 10
    };
}

function drawConfetti(c) {
    ctx.save();
    ctx.translate(c.x, c.y);
    ctx.rotate(c.rotation * Math.PI / 180);
    ctx.fillStyle = c.color;
    ctx.fillRect(-c.size/2, -c.size/2, c.size, c.size);
    ctx.restore();
}

function updateConfetti(c) {
    c.x += c.speedX;
    c.y += c.speedY;
    c.speedY += 0.1; // yerçekimi
    c.rotation += c.rotationSpeed;
}

function animate() {
    ctx.fillStyle = 'rgba(17,17,17,0.3)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < confettis.length; i++) {
        drawConfetti(confettis[i]);
        updateConfetti(confettis[i]);
    }

    // Ekrandan çıkan confettileri temizle
    for (let i = confettis.length - 1; i >= 0; i--) {
        if (confettis[i].y > canvas.height + 20 || confettis[i].x < -20 || confettis[i].x > canvas.width + 20) {
            confettis.splice(i, 1);
        }
    }

    requestAnimationFrame(animate);
}

// Tıklama ile confetti oluştur
canvas.addEventListener('click', (e) => {
    const count = Math.floor(Math.random() * 30 + 20);
    for (let i = 0; i < count; i++) {
        confettis.push(createConfetti(e.clientX, e.clientY));
    }
});

// Ekran boyutu değişirse canvas boyutunu güncelle
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

animate();

JSKod Açıklamaları

Canvas Ayarları

canvas.width ve canvas.height ile ekranın tamamını çizim alanı olarak kullandık. Her tıklamada bu alanın içinde yeni confetti parçacıkları üretiyoruz.

Rastgele Renkler

randomColor() fonksiyonu ile HSL renk uzayında rastgele renkler üretiyoruz. Böylece her patlama farklı tonlarda görüntü sağlıyor.

Confetti Nesneleri

Her confetti için:

x, y: Başlangıç konumu
speedX, speedY: Rastgele hareket hızları
rotation ve rotationSpeed: Dönüş efekti parametrelerini Math.random() ile belirliyoruz.