Tutorial: Cara Membuat Efek "Persegi Meledak" dengan JavaScript

Efek "persegi meledak" adalah animasi visual yang menarik di mana sebuah persegi seolah-olah pecah menjadi banyak bagian kecil yang kemudian menyebar ke luar. Tutorial ini akan memandu Anda langkah demi langkah untuk membuat efek ini menggunakan JavaScript, HTML, dan sedikit CSS.

Langkah 1: Persiapan HTML

Buat sebuah file HTML (misalnya, index.html). Kita akan membutuhkan satu elemen div sebagai wadah persegi utama dan sebuah kanvas (canvas) tempat animasi akan ditampilkan.

<canvas id="myCanvas" width="500" height="500"></canvas>

Atur lebar dan tinggi kanvas sesuai kebutuhan Anda. Dalam contoh ini, kita menggunakan 500x500 piksel.

Langkah 2: Styling dengan CSS

Meskipun tidak wajib, menambahkan sedikit CSS dapat membuat tampilan lebih menarik. Letakkan kode CSS berikut dalam tag <style> atau dalam file CSS terpisah.

#myCanvas {
  border: 1px solid black; /* Opsional, hanya untuk melihat batas kanvas */
  background-color: #f0f0f0; /* Opsional, warna latar belakang */
}

Langkah 3: JavaScript untuk Animasi

Inilah inti dari tutorial ini. Buat sebuah file JavaScript (misalnya, script.js) dan hubungkan ke file HTML Anda sebelum tag </body>.

<script src="script.js"></script>

Dalam script.js, kita akan melakukan hal berikut:

1. Dapatkan Elemen Canvas dan Konteks 2D: Dapatkan referensi ke elemen kanvas dan konteks 2D-nya.
2. Definisikan Properti Persegi: Tentukan ukuran, posisi awal, dan warna persegi yang akan "meledak".
3. Buat Partikel: Ketika persegi "meledak," itu akan menghasilkan banyak partikel kecil. Kita akan membuat sebuah array untuk menyimpan partikel-partikel ini. Setiap partikel akan memiliki posisi, kecepatan, dan ukuran.
4. Fungsi untuk Membuat Partikel: Buat fungsi yang membuat partikel-partikel ketika tombol ditekan (atau kejadian lain yang memicu ledakan). Fungsi ini akan menentukan posisi awal partikel (berdasarkan posisi persegi) dan kecepatan acaknya.
5. Fungsi Animasi: Buat fungsi animasi yang akan membersihkan kanvas, menggambar partikel-partikel, dan memperbarui posisi partikel setiap frame.
6. Logika Ledakan: Ketika "ledakan" dipicu, atur status yang menandakan bahwa animasi ledakan sedang berjalan. Dalam fungsi animasi, periksa status ini. Jika "meledak" aktif, perbarui posisi partikel berdasarkan kecepatannya. Jika partikel mencapai batas tertentu (misalnya, jarak maksimum dari tengah), hentikan animasinya.
7. Memulai Animasi: Gunakan requestAnimationFrame untuk memulai loop animasi.

Berikut adalah contoh kode JavaScript yang lebih rinci:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const squareSize = 50;
let squareX = canvas.width / 2 - squareSize / 2;
let squareY = canvas.height / 2 - squareSize / 2;
const squareColor = 'blue';

let particles = [];
let exploding = false;

function createParticles() {
  for (let i = 0; i < 100; i++) {
    particles.push({
      x: squareX + squareSize / 2,
      y: squareY + squareSize / 2,
      size: Math.random() * 5,
      vx: (Math.random() - 0.5) * 10,
      vy: (Math.random() - 0.5) * 10,
      alpha: 1,
    });
  }
}

function drawSquare() {
  ctx.fillStyle = squareColor;
  ctx.fillRect(squareX, squareY, squareSize, squareSize);
}

function drawParticles() {
  particles.forEach(particle => {
    ctx.fillStyle = `rgba(255, 0, 0, ${particle.alpha})`;
    ctx.fillRect(particle.x, particle.y, particle.size, particle.size);
  });
}

function updateParticles() {
  particles.forEach(particle => {
    particle.x += particle.vx;
    particle.y += particle.vy;
    particle.alpha -= 0.01;
  });

  particles = particles.filter(particle => particle.alpha > 0);
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  if (exploding) {
    updateParticles();
    drawParticles();

    if (particles.length === 0) {
      exploding = false;
      particles = [];
    }
  } else {
    drawSquare();
  }

  requestAnimationFrame(animate);
}

// Memicu ledakan saat mengklik canvas
canvas.addEventListener('click', () => {
  if (!exploding) {
    exploding = true;
    createParticles();
  }
});

animate();

Penjelasan Kode

• Variabel: Mendefinisikan variabel untuk ukuran persegi, posisi, warna, dan array partikel.
• createParticles(): Membuat partikel secara acak dan memasukkannya ke dalam array particles.
• drawSquare(): Menggambar persegi di kanvas.
• drawParticles(): Menggambar semua partikel di kanvas dengan transparansi yang semakin berkurang.
• updateParticles(): Memperbarui posisi partikel berdasarkan kecepatan dan mengurangi nilai transparansi. Partikel yang transparansinya mencapai 0 akan dihapus dari array.
• animate(): Fungsi utama yang membersihkan kanvas, menggambar persegi (jika tidak meledak), atau menggambar partikel (jika meledak), dan memanggil dirinya sendiri lagi menggunakan requestAnimationFrame.
• Event Listener: Menambahkan event listener ke kanvas sehingga saat diklik, fungsi createParticles() dipanggil dan status exploding diatur ke true.

Langkah 4: Uji Coba

Buka file index.html di browser Anda. Anda akan melihat sebuah persegi biru. Klik pada kanvas, dan persegi tersebut akan "meledak" menjadi partikel-partikel merah.

Kesimpulan

Ini hanyalah contoh dasar. Anda bisa mengembangkannya lebih jauh dengan menambahkan efek suara, mengubah warna partikel, atau membuat animasi yang lebih kompleks.