Bikin Game Langsung di Browser Part 2 — #DreamBigStartSmall

Di artikel sebelumnya kita telah membuat game kuis langsung di browser. Di artikel kali ini kita akan membahas bagaimana menutup kekurangan di versi sebelumnya.

Masalah di versi sebelumnya

Game di artikel sebelumnya masih terlalu sederhana dan memiliki kekurangan: sistem membedakan jawaban dengan perbedaan huruf besar kecil. Misalnya, ada pertanyaan: “Siapa presiden pertama Indonesia?”, lalu pertanyaan tersebut diset dengan jawaban, “Soekarno”, maka ketika player menjawab dengan tulisan “SOEKARNO” atau (maaf) “soekarno” maka sistem akan mengganggap dua jawaban tersebut salah. Lalu bagaimana cara menyamakannya?

Nah sebenarnya ini merupakan salah satu masalah yang tentunya membutuhkan pemikiran problem-solving. Sebelum aku kasih tahu gimana caranya menyamakan antara jawaban “Soekarno” dan “SOEKARNO”, aku mau tantang kamu dulu kira-kira gimana caranya menyamakannya? Yuk coba berpikir kreatif!

Solusi: dengan menyamakan kondisi jawaban dari user dan jawaban yang di-set

Aduh maksudnya gimana tuh? Jadi ada dua jawaban, yaitu jawaban dari inputan user dan jawaban yang memang sudah kita set sebagai jawaban yang benar, yang mana nanti jawaban dari inputan user kita bandingkan dengan jawaban yang sudah diset, apakah sama atau tidak? Jika memang sama artinya jawaban benar, jika tidak maka jawaban salah. Nah maka kedua jawaban tersebut yang akan dibandingkan (jawaban dari user dan jawaban yang memang sudah di-set) kita buat kondisinya sama: yaitu sama-sama dalam huruf besar semua atau huruf kecil semua.

Untuk lebih mudahnya mari perhatikan algoritma dari versi sebelumnya:

1. Munculkan pertanyaan (Misal: Siapa presiden pertama Indonesia?)
2. Input jawaban dari user: (Misal: SOEKARNO)
3. Bandingkan jawaban dari user (SOEKARNO) dengan jawaban yang sudah di-set (Soekarno). Karena SOEKARNO dan Soekarno bagi komputer itu berbeda, maka jawaban dari user akan disalahkan.

Nah kita ubah algoritma di atas menjadi:

1. Munculkan pertanyaan (Misal: Siapa presiden pertama Indonesia?)
2. Input jawaban dari user: (Misal: SOEKARNO)
3. Jadikan jawaban dari user menjadi huruf kecil semua (SOEKARNO → soekarno) dan jadikan jawaban yang diset menjadi huruf kecil semua juga (Soekarno → soekarno).
4. Bandingkan keduanya: soekarno dan seokarno. Apakah sama? Karena sama maka hasilnya benar.

Kurang lebih seperti itu algoritmanya. Maka mari kita coba implementasi ke kodingan!

Kodingan terkahir dari artikel sebelumnya kurang lebih berbentuk seperti ini:

function kuis()
{
    var nilai = 0;
    var nama = prompt("Tulis nama kamu...");
    
    var jawabandariuser = prompt("Siapa presiden pertama Indonesia?");
    if(jawabandariuser == "Soekarno")
    {
        nilai += 10;
    }  
  
    var jawabandariuser = prompt("Bulan apa Indonesia merdeka?");
    
    if(jawabandariuser == "Agustus")
    {
        nilai += 10;
    }
    alert("Hey " + nama + " Nilai kamu " + nilai);
}

Kita tambahkan fungsi toLowerCase sehingga menjadi seperti ini:

function kuis()
{
    var nilai = 0;
    var nama = prompt("Tulis nama kamu...");
    
    var jawabandariuser = prompt("Siapa presiden pertama Indonesia?");
    if(jawabandariuser.toLowerCase() == "Soekarno".toLowerCase())
    {
        nilai += 10;
    } 
   
    var jawabandariuser = prompt("Bulan apa Indonesia merdeka?");
    
    if(jawabandariuser.toLowerCase() == "Agustus".toLowerCase())
    {
        nilai += 10;
    }
    alert("Hey " + nama + " Nilai kamu " + nilai);
}

Fungsi dari toLowerCase adalah untuk mengecilkan semua huruf dari string. String yang kita kecilkan di contoh di atas adalah string yang terdapat pada variabel jawabandariuser dan juga string langsung (string tanpa disimpan dalam variabel) yaitu “Soekarno” dan “Agustus”.

Penampakan menjalankan kodigan di console Chrome.

Mari coba jalankan!

Copy-paste kodingan di atas ke console di Chrome (cara membukanya dengan Inspect element → tab Console atau dengan shortcut Command + Option + J (Mac) atau Control + Shift + J (Windows)) dan enter. Lalu ketik lagi:

kuis()

Dan enter untuk memanggil fungsi yang telah kita masukkan sebelumnya.

Karena benar semua nilaiku dapat 20 (setiap soal +10 nilai)

(InsyaaAllah) Next: Menambah Pilihan Ganda

Nah di artikel selanjutnya insyaaAllah aku akan membahas bagaimana menambah pilihan ganda ke game kita ini.

Untuk temen-temen yang masih merasa artikel ini terlalu mudah, sabar ya hehe. Mudah-mudahan seri ini akan terus berlanjut sampai ke level sulit! Aku punya rencana ke depan game ini akan dibuat versi online-nya, di mana kamu dan teman-mu bisa saling memberi pertanyaan dan saling menjawab, secara online, realtime. Mohon doakan :)