Menciptakan Hiburan Kecil di Blog: Eksperimen Membuat Mini Game “Collect the Logo”

EKSPERIMEN DIGITAL • ADIPRAA.COM

Eksperimen Membuat Collect the Logo

Dari sebuah ide sederhana, halaman blog berubah menjadi arena mini game yang bisa dimainkan langsung.

adipraa.com - Biasanya sebuah blog digunakan untuk menulis artikel, berbagi pengalaman, atau sekadar menyimpan berbagai cerita. Namun kali ini saya mencoba sesuatu yang sedikit berbeda.

Saya mencoba membuat sebuah mini game sederhana bernama Collect the Logo yang bisa dimainkan langsung di dalam halaman blog.

Collect The Logo

01 / IDE

Dari Blog Menjadi Mini Game

Konsep permainannya sebenarnya cukup sederhana. Pemain mengendalikan sebuah karakter di dalam arena dan harus mencari logo Adipraa yang muncul di berbagai lokasi.

Setiap logo yang berhasil disentuh akan menambah skor. Tantangannya adalah pemain hanya memiliki waktu 30 detik untuk mengumpulkan logo sebanyak mungkin.

Gerakkan karakter. Cari logo. Hindari rintangan. Kejar skor setinggi mungkin.

02 / ARENA

Membuat Arena Permainan

Agar permainan terasa lebih menarik, saya menggunakan background bergaya area petualangan dengan rumput sebagai arena utama.

Di dalamnya terdapat beberapa objek seperti batu, box kayu, dan pohon. Awalnya objek tersebut hanya menjadi bagian dari gambar background.

Namun kemudian saya membuatnya menjadi rintangan sehingga karakter tidak bisa berjalan menembus objek tersebut.

03 / PLAYER

Memasukkan Karakter

Bagian berikutnya adalah karakter utama. Saya menggunakan karakter bergaya kartun yang dibuat berdasarkan foto saya sendiri.

Karakter tersebut ditempatkan sebagai player yang dapat digerakkan ke empat arah di dalam arena.

Kontrol:
↑ ↓ ← → atau tombol W A S D

Untuk pengguna smartphone tersedia tombol sentuh sehingga game tetap bisa dimainkan melalui perangkat mobile.

04 / COLLISION

Bagian yang Paling Menantang

Salah satu bagian yang cukup menarik dalam pembuatan game ini adalah membuat sistem collision atau tabrakan.

Karakter tidak boleh hanya terlihat seolah-olah menabrak objek. Sistem permainan juga harus mengetahui ketika karakter benar-benar bertemu dengan rintangan.

Karena itu area collision dibuat mengikuti masing-masing objek. Batu memiliki area tabrakan yang berbeda dengan box kayu, sedangkan pohon menggunakan area pada bagian bawahnya.

Hasilnya, karakter tidak bisa lagi menembus batu, box kayu, maupun pohon.

05 / TARGET

Tujuan Utamanya: Kumpulkan Logo

Setelah karakter dan rintangan selesai, bagian berikutnya adalah target permainan.

Logo Adipraa ditempatkan secara acak di dalam arena. Pemain harus mencari dan mendekati logo tersebut.

Ketika karakter menyentuh logo, skor bertambah dan logo berikutnya muncul di lokasi lain.

+10 poin untuk setiap logo yang berhasil dikumpulkan.

Waktu permainan: 30 detik.

🎮 Sekarang, Coba Gamenya!

Setelah membaca proses pembuatannya, tentu kurang lengkap kalau belum mencoba langsung.

Tekan tombol MULAI GAME, kemudian gerakkan karakter menggunakan tombol panah atau WASD.

COLLECT
THE LOGO

0 SCORE

30 TIME

0 HIGH

🎯

Collect the Logo

Kumpulkan logo sebanyak mungkin sebelum waktu habis.

Gunakan ↑ ↓ ← → atau W A S D untuk bergerak.

⏰

Waktu Habis!

Skor kamu

0

Tekan MULAI GAME

Jika menggunakan smartphone, gunakan tombol sentuh yang tersedia di bawah arena.

Cari logo Adipraa, hindari batu, box kayu, dan pohon, lalu kumpulkan logo sebanyak mungkin sebelum waktu 30 detik berakhir.

Game Kecil, Eksperimen Menarik

Collect the Logo memang bukan game dengan mekanisme yang kompleks. Namun proses membuatnya menjadi eksperimen yang cukup menyenangkan.

Dari sebuah halaman blog, saya mencoba menggabungkan HTML, CSS, dan JavaScript untuk membuat sesuatu yang tidak hanya dibaca, tetapi juga bisa dimainkan.

Mulai dari karakter, pergerakan, logo, rintangan, collision, skor, hingga batas waktu, semuanya menjadi bagian dari eksperimen kecil ini.

Dan mungkin, dari game sederhana seperti inilah muncul ide untuk membuat permainan lain yang lebih menarik di kemudian hari.

adipraa.com
Eksperimen Membuat Mini Game Collect the Logo