Artikel ini dapat digunakan, disalin, dan disebarluaskan.
Cukup cantumkan sumber asli.
Jika isinya mengandung kebenaran, semoga memberi kebaikan bagi kita yang memanfaatkannya.
Jika ada yang salah, mohon kiranya penulis dimaafkan.
Dan sangat baik, jika kesalahan tersebut dapat diberitahukan kepada penulis.
Yanmarshus, 3 Desember 2006, yan[at]daunsalam[dot]net
Animasi Karakter Jatuh
Pernah menonton salah satu trilogi Matrix? Pasti ingat tampilan layar komputer yang ada dalam film tersebut. Karakter berwarna hijau berjatuhan di layar komputer. Animasi tersebut cukup menarik untuk dlihat. Ada banyak yang membuat animasi serupa, misalnya dalam bentuk screensaver. Ternyata dengan Javascript kita juga bisa membuat animasi seperti itu.
Berikut adalah ide yang diterapkan dengan Javascript untuk menampilkan karakter berjatuhan dalam sebuah textarea HTML.
- Karakter yang akan ditampilkan disusun dalam sebuah variabel array 2 dimensi
- Untuk contoh ini, misalnya array 80 kolom 20 baris
- Setiap elemen array diisi dengan data karakter secara random
- Semua data ini kemudian ditampilkan ke dalam textarea
- Animasi karakter jatuh diterapkan dengan cara menggeser karakter yang ada pada sebuah baris ke baris di bawahnya. Penggeseran ini terjadi dalam variabel array 2 dimensi
- Proses pengisian array secara random, menggeser karakter, dan menampilkan ke textarea diulang terus-menerus dalam sebuah loop
- Format tampilan di layar diatur dengan CSS
- Agar setiap kolom bisa memiliki sifat yang berbeda, misalnya kecepatan jatuh, panjangnya urutan karakter, diatur dengan masing-masing status yang disimpan dalam variabel untuk setiap kolom
Untuk contoh animasi tersebut silahkan lihat halaman jsmatrix-0.07 ukuran file sekitar 4 KB. Semua source code ada dalam satu file tersebut.
Animasi seperti ini juga dapat dilihat pada situs Chen Hendrawan, tentu saja dengan cara/algoritma yang mungkin berbeda dengan model yang diuraikan di sini.