Description
Tugas lama dari The Odin Project yang aku ubah ke full svelte yg pake konsep reactivty
Approach
Pertama-tama, kami punya 'gridSideLength'. Inilah yang memutuskan berapa banyak kotak-kotak kecil, atau "sel", di setiap sisi grid kami. Mulai dari 10, layaknya kanvas kosong yang menunggu untuk diwarnai.
Tapi, siapalah kami untuk membatasi kreativitas orang? Jadi, kami kasih mereka kebebasan buat pilih ukuran kanvas mereka sendiri dengan input. Tapi kami tetap punya fungsi clampGridSideLength untuk memastikan semuanya dalam batas yang wajar.
Setelah ukuran grid tepat, kami mulai mengisi grid dengan sel. Setiap sel itu kosong, kayak kanvas mini yang menunggu untuk diwarnai.
Nah, kami kasih kejutan kecil ke setiap sel. Setiap kali mouse mampir, sel akan berubah warna dengan bantuan dari fungsi handleMouseEnter. Warnanya random, dihasilkan oleh fungsi randomHexColorString. Tapi, warna itu cuma bertahan 500 milidetik, lalu sel kembali ke warna aslinya.
Kejutan kami belum berakhir, dalam 'Jurus Perubahan Warna' itu kami sematkan nada acak yang akan berbunyi setiap kali Puzzle Kecil berubah. Kolaborasi antara warna dan nada unik menciptakan sinestesia interaktif. Sungguh sebuah pengalaman yang menarik!
Pemain juga dapat menciptakan 'Angka Ajaib' yang bisa dimasukkan di kotak input teks, yang dapat menghasilkan variasi suara yang berbeda-beda. Keunikan ini memberikan dimensi tambahan pada permainan kami, membuat setiap pengalaman menjadi unik dan penuh kejutan.
Technology
- Svelte
- Vanilla JS
- Sound Web API
- Uno Css
- Astro JS