Bikin Game Langsung di Browser — #DreamBigStartSmall

Selamat datang di seri #DreamBigStartSmall dan kenalin aku Bagus Seno dari bagian ILMY! Rencananya, di seri ini, aku mau kasih tutorial-tutorial pemrograman digital dengan tingkat kesulitan dari mudah sampai sulit secara berkala. Sesuai namanya, yang penting kita bermimpi setinggi langit terlebih dahulu, lalu mulai melangkah walau perlahan.

Nah di tutorial kali ini, aku mau ngajak kamu bikin game kuis di browser, langsung di browser! Tanpa perlu tambahan apa-apa, sehingga ga ada alasan buat kamu untuk tidak memulai hehehe. Terus buat kamu yang merasa terlalu mudah, tenang, karena rencananya aku mau kasih tutorial sampai ke UNITY3D, Phaser, bahkan menggunakan Socket.IO untuk online multiplayer!

Persiapan

Sebelum memulai, pastikan browser kamu memiliki fitur Inspect element dengan console-nya. Kalau aku saat ini menggunakan browser Chrome.

Memulai membuat game kuis di browser

1— Buka browser kalian. Jika kalian sudah membuka halaman artikel Medium ini, berarti kalian telah melakukan langkah pertama.

2 — Buka Inspect Element dengan cara klik kanan mouse kalian di manapun di area browser dan pilih pilihan “Inspect” atau semacamnya.

3 — Setelah muncul tampilan Inspect element, buka tab “Console”. Nah, tab Console ini merupakan Interpreter JavaScript di mana kalian bisa menjalankan bahasa JavaScript. Di sinilah kita akan memulai mengoding.

4 — Pada bagian field yang kosong di tab Console, ketikkan kodingan berikut:

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

Kalian bisa copas atau mengetik ulang. Tapi ingat jika mengetik ulang, jika kalian ingin meng-enter (pindah ke baris selanjutnya) kalian harus menekan Shift + Enter. Karena jika hanya menekan Enter saja, kalian seperti mensubmit kodingan kalian ke Console untuk dijalankan.

Jika kalian sudah selesai mengetik ulang atau copas, bisa tekan Enter untuk mensubmit kodingan ke Console. Nah, kalian belum bisa melihat hasilnya karena fungsi (function) tersebut belum dijalankan, hanya disimpan saja. Untuk menjalankannya, panggil fungsi dengan mengetik di Console dan Enter:

kuis() 

Maka game kuis akan dimulai dengan mula-mula menginput nama kamu terlebih dahulu. Game hanya akan berisi satu soal karena memang kita hanya memberi satu soal saja. Nah nanti kita akan coba tambah soalnya, ya! Tapi sebelumnya, mari aku jelaskan dulu kodingannya.

Penjelasan

function kuis() // Merupakan fungsi, di mana isi dari fungsi dapat dijalankan tanpa perlu diketik ulang, cukup dipanggil saja
{
    var nilai = 0; // Variabel nilai dengan nilai awal 0
    var nama = prompt("Tulis nama kamu..."); // Meminta inputan nama beserta menyimpannya dalam variable nama
    
    var jawabandariuser = prompt("Siapa presiden pertama Indonesia?"); // Menanyakan pertanyaan dan meminta jawaban, jawaban dari user juga disimpan dalam variabel jawabandariuser
    if(jawaban1 == "Soekarno") // Mengecek apakah jawabandariuser sama dengan jawaban seharusnya (Soekarno)
    {
        nilai += 10; // Jika jawaban benar, maka nilai ditambah 10
    }
alert("Hey " + nama + " Nilai kamu " + nilai); // Jika sudah tidak ada soal lagi yang ditanyakan, menampilkan nama yang telah diinput sebelumnya dan nilai
}

Nah lalu bagaimana jika kamu ingin menambah soal? Caranya cukup dengan menambahkan kodingan pertanyaan beserta pengecekan jawabannya. Contoh, aku mau jadiin tiga soal. Maka aku ubah kodingannya jadi:

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("Tahun berapa Indonesia merdeka?");
    if(jawabandariuser == "1945")
    {
        nilai += 10;
    }
    var jawabandariuser = prompt("Bulan apa Indonesia merdeka?");
    if(jawabandariuser == "Agustus")
    {
        nilai += 10;
    }
alert("Hey " + nama + " Nilai kamu " + nilai);
}

Penutup

Nah, kalian telah membuat game kuis sederhana di browser kalian sendiri. Akan tetapi, mungkin kalian menotice kekurangan dari game ini, yaitu jika kalian menjawab soal pertama dengan “soekarno” di mana “s”-nya berhuruf tidak kapital, maka akan dinilai salah. Hal ini karena “soekarno” dan “Soekarno” dinilai berbeda oleh interpreter JavaScript. Nah di artikel depan, mungkin kita akan coba perbaiki ini, dan kita buat kodingannya jadi lebih efisien dan efektif. Mungkin juga aku akan jelaskan berbagai hal yang tidak terjelaskan di sini, seperti apa sih Interpreter itu? Apa bedanya dengan Compiler?

Sekian dan terimakasih, semoga artikel ini menjadi langkah awal ILMY dalam berbagai ilmu pemrograman ya!