Membuat Game Sederhana

Menggunakan App Inventor

Game sederhana yang akan kita buat yaitu game tebak gambar.

Tahap pembuatan nya adalah sebagai berikut :

Akses halaman ai2.appinventor.mit.edu. Kita diharuskan login

menggunakan account google terlebih dahulu. Setelah login maka akan muncul tampilan
seperti berikut ini :

Lalu buat project baru dengan cara klik Start New Project

Kemudian isi kan Project Name

-- Tahapan Design --

1. Drag horizontalarrangement dari palette layout sebanyak tiga buah. Lakukan pengaturan
letak horizontalarrangement dengan cara : pada kolom components klik Screen1 lalu ubah
Align Horizontal menjadi center
2. Drag image dari palette user interface ke horizontalarrengement yang pertama.
Lakukan upload gambar dengan cara : klik image1 pada kolom components lalu pada
kolom properties klik text field picturelalu klik upload file. Pilih file yang akan digunakan.
Kita juga dapat mengatur ukuran width dan height dari gambar tersebut, dengan mengatur nya
pada kolom properties.

3. Drag label dari palette user interface ke bagian screen antara horizontalarrangement1 dengan
horizontalarrangement2. Pada kolomproperties hapus text label tersebut.

4. Drag textbox dan button dari palette user interface ke horizontalarrangement2. Textbox
digunakan untuk input jawaban dan button digunakan untuk submit jawaban. Pada
kolom properties ubah text button menjadi Submit.
5. Drag button dari palette user interface ke horizontalarrangement2. Button ini berfungsi
untuk pindah ke pertanyaan berikutnya apabila di klik. Pada kolom properties ubah text button
menjadi Next.

6. Drag sebuah label ke bawah horizontalarrangement3. Label tersebut berfungsi sebagai notif
apakah jawaban yang diinput benar atau salah.

Tahapan design telah selesai. Screen shoot design dari game tebak gambar lebih kurang seperti
berikut ini :

-- Tahapan Pembuatan Blocks --

1. Klik Blocks pada bagian atas sebelah kanan

2. Inisiasi list pertanyaan dan jawaban nya.
Cara nya :
a.Klik pada Variables, pilih initialize global. Ubah namanya dengan QuestionsList
untuk daftar pertanyaan dan AnswersList untuk daftar jawabannya.
b. Klik pada Lists, pilih make a list.
c. Klik Text, pilih yang memiliki string quotes.
Satukan puzzle seperti gambar dibawah ini :

3. Inisiasi Index Question

Caranya :
a. Klik Variabels, pilih initialize global. Ubah nama nya menjadi CurrentQuestionIndex.
b. Klik Math, pilih yang pertama dan isi kan value nya 1.
 Satukan puzzle seperti gambar dibawah ini :

4. Mengatur ketika screen awal ditampilkan maka pertanyaan pertama muncul.

Caranya :
a. Klik screen1, pilih when screen.initialize.
b. Klik label1, pilih set label.text.
c. Klik Lists, pilih select list item list index.
d. Klik Variabels, pilih get, lalu pilih global CurrentQuestionIndex.
e. Klik Math, lalu isikan value nya 1.
Satukan puzzle seperti gambar dibawah ini :

5. Pengaturan button next untuk pindah pertanyaan.

Caranya :
a. klik button2, pilih when button.click do.
b. klik Variables, pilih set dan pilih global CurrentQuestionIndex. Lalu
pilih get dan pilih global CurrentQuestionIndex.
c. klik Math, pilih yang pertambahan dan report the number shown set value nya 1.
d. klik Control, pilih if then.
e. klik Math, pilih > dan report the number shown set value nya 2.
f. klik Variables, pilih get, pilih global CurrentQuestionIndex. pilih juga set, pilih global
CurrentQuestionIndex.
g. klik Math, pilih report the number shown set value nya 1.
h. klik label1, pilih set label.text.
i. klik Lists, pilih select list item list index.
j. klik Variables, pilih get lalu pilih global QuestionsList. Pilih get satu lagi dan pilih
global CurrentQuestionIndex.
Satukan puzzle seperti gambar dibawah ini :

6. Pengaturan submit jawaban. Kondisi pertama yaitu ketika jawaban benar maka pada
label2 maka muncul "Benar" dan ketika jawaban salah maka muncul "Salah". Kondisi
kedua, ketika jawaban benar, maka langsung berpindah ke jawaban selanjutnya tanpa klik
tombol next.
Caranya :
a. klik button1, pilih when button.click do.
 b. klik Control, pilih if then.
c. klik Math, pilih equal.
d. klik textbox1, pilih textBox1.text.
e. klik Lists, pilih select list item list index.
f. klik Variables, pilih get 2 buah. dan set masing-masing global AnswersList dan
global CurrentQuestionIndex.
g. klik label2, pilih set label2.text.
h. klik Text, pilih text string dan isikan value Benar.
i. klik Variables, pilih set dan pilih global CurrentQuestionIndex.
j. klik Math, pilih yang pertambahan dan report the number shown set value nya 1.
k. klik Variables, pilih get dan pilih global CurrentQuestionIndex.
l. klik label1, pilih set label.text.
m. klik Lists, pilih select list item list index.
n. klik Variables, pilih 2 buah get. atur masing-masing value nya global QuestionsList
dan global CurrebtQuestionIndex.
o. klik label2, pilih set label.text sebanyak 2 kali.
p. klik Text, pilih text string sebanyak 2 buah. Set masing- masing value nya null dan
"Salah".
Satukan puzzle seperti gambar dibawah ini :

Tahapan Blocks telah selesai.

Klik Connect --> Emulator

Tampilannya akan seperti gambar dibawah ini :