Anda di halaman 1dari 6

Game Quiz Tebak Gambar

Pendahuluan
Salah satu bentuk pengembangan game kuis adalah dengan menambahkan soal berupa
gambar. Contoh pengembangan game kuis dalam bentuk game tebak gambar antara lain
game menebak gambar hewan, menebak nama bendera, menebak rambu lalu lintas dan
sebagainya. Hasil yang diharapkan pada tutorial ini adalah sebagai berikut :

Untuk membuatnya perhatikan langkah berikut :

1. Buatlah sebuah project game kuis teks seperti pada tutorial berikut .
2. Save as, menjadi file game-tebak-gambar.fla, karena akan kita modifikasi dengan
menambahkan gambar pada soal.
3. Siapkan beberapa gambar yang akan dijadikan soal. Dalam hal ini dibuat game "tebak
nama binatang", sehingga digunakan beberapa file dengan nama yang berurutan untuk
mempermudah proses, yaitu "hewan_1.jpg", "hewan_2.jpg" dan seterusnya.

4. Setelah gambar siap, lanjutkan file game-tebak-gambar.fla.


buatlah sebuah Movieclip baru dengan menekan menu Insert > New Symbol
(Ctrl+F8) kemudian ketikan nama gambarMC dan type Movieclip lalu tekan OK.
Selanjutnya import file gambar hewan (dengan nama file yang telah diurutkan secara
numerik) dengan memilih menu File > Import > Import to Stage (Ctrl+R). Pilih file
hewan_1.png, maka secara otomatis seluruh file gambar hewan akan terimport dan
tersusun frame by frame.

5. Keluar dari mode edit symbol dengan menekan Ctrl+E.


6. Klik layer objek kemudian drag Movieclip hewanMC dari Library ke Stage.
Letakkan hewanMC di samping dynamic text soalTxt seperti pada gambar.
Selanjutnya tambahkan instance name “hewanMC” agar dapat diakses kode.

7. Tahapan selanjutnya adalah pengeditan kode untuk menyesuaikan soal dengan


penambahan gambar. Klik frame 1 layer action, selanjutnya buka panel Action (F9)
dan ubah sedikit kode yang ada untuk memfasilitasi soal bertipe gambar.
8. Ketikkan kode berikut :

1. //waktu persoal dalam detik


2. var waktuMaks:int = 10;
3. var soalMaks:int = 10;
4. // struktur soal 0. Soal 1-4 jawaban, Jawaban benar
diletakkan no 1 5. frame MC gambar
5. var soal:Array = [["Hewan apakah pada gambar di samping ?",
"Gajah", "Anjing Laut", "Zebra", "Berang-berang", 1],
6. ["Sebutkan nama hewan di samping
?", "Anjing Laut", "Zebra", "Berang-berang", "Anjing", 2],
7. ["Hewan apakah pada gambar di
samping ?", "Keledai", "Kuda", "Zebra", "Sapi", 3],
8. ["Hewan apakah pada gambar di
samping ?", "Bebek", "Ayam", "Angsa", "Platipus", 4],
9. ...
10. ];
11. var nilai:int = 0;
12. var nomorSoal:int = 0;
13. var hasil:hasilMC;
14. var tempSoal:Array;
15. var tempJawaban:Array;
16. var gameAktif:Boolean = true;
17. var fps:int = 30; //frame per second
18. var waktuSoal:int = waktuMaks*fps;
19.
20. function acakSoal():void{
21. //mengacak soal
22. tempSoal = soal.slice(0, soal.length);
23. for (var i:int = 0; i < soal.length; i++){
24. var acak:int =
Math.floor(Math.random()*soal.length);
25. var temp:Array = tempSoal[acak];
26. tempSoal[acak] = tempSoal[i];
27. tempSoal[i] = temp;
28. }
29. }
30.
31. function tampilkanSoal():void{
32. //tampilkan gambar
33. gambarMC.gotoAndStop(tempSoal[nomorSoal][5]);
34. //tampilkan soal
35. soalTxt.text = tempSoal[nomorSoal][0];
36. //acak jawaban
37. tempJawaban = tempSoal[nomorSoal].slice(1, 5);
38. for (var i:int = 0; i < tempJawaban.length; i++){
39. var acak:int =
Math.floor(Math.random()*tempJawaban.length);
40. var temp:String = tempJawaban[acak];
41. tempJawaban[acak] = tempJawaban[i];
42. tempJawaban[i] = temp;
43. }
44. //tampilkan jawaban
45. jawab1.jawabanTxt.text = tempJawaban[0];
46. jawab2.jawabanTxt.text = tempJawaban[1];
47. jawab3.jawabanTxt.text = tempJawaban[2];
48. jawab4.jawabanTxt.text = tempJawaban[3];
49. //netralkan
50. jawab1.gotoAndStop(1);
51. jawab2.gotoAndStop(1);
52. jawab3.gotoAndStop(1);
53. jawab4.gotoAndStop(1);
54. }
55.
56. function setup():void{
57. acakSoal();
58. tampilkanSoal();
59. //mengatur jawaban
60. jawab1.stop();
61. jawab2.stop();
62. jawab3.stop();
63. jawab4.stop();
64. jawab1.addEventListener(MouseEvent.CLICK,
cekJawaban);
65. jawab2.addEventListener(MouseEvent.CLICK,
cekJawaban);
66. jawab3.addEventListener(MouseEvent.CLICK,
cekJawaban);
67. jawab4.addEventListener(MouseEvent.CLICK,
cekJawaban);
68.
69. //timer
70. pengaturWaktu.addEventListener(Event.ENTER_FRAME,
aturWaktu);
71. }
72.
73.
74. function cekJawaban(e:MouseEvent):void{
75. e.currentTarget.gotoAndStop(3);
76. if (gameAktif){
77. var nomorJawaban:int =
int(e.currentTarget.name.substr(5))-1;
78. if (tempJawaban[nomorJawaban] ==
tempSoal[nomorSoal][1]){
79. //jawaban benar
80. tampilkanHasil(1);
81. nilai+=10;
82. }else{
83. //jawaban salah
84. tampilkanHasil(2);
85. }
86. //tampilkan jawaban yang benar
87. if (tempJawaban[0] ==
tempSoal[nomorSoal][1]) jawab1.gotoAndStop(2);
88. if (tempJawaban[1] ==
tempSoal[nomorSoal][1]) jawab2.gotoAndStop(2);
89. if (tempJawaban[2] ==
tempSoal[nomorSoal][1]) jawab3.gotoAndStop(2);
90. if (tempJawaban[3] ==
tempSoal[nomorSoal][1]) jawab4.gotoAndStop(2);
91. }
92. }
93.
94. function tampilkanHasil(tp:int):void{
95. hasil = new hasilMC;
96. hasil.x = 400;
97. hasil.y = 160;
98. hasil.gotoAndStop(tp);
99. hasil.scaleX = 0.2;
100. hasil.scaleY = 0.2;
101. hasil.waktu = 0;
102. hasil.tp = tp;
103. hasil.addEventListener(Event.ENTER_FRAME,
efekPopup);
104. addChild(hasil);
105. //reset timer
106. gameAktif = false;
107. waktuSoal = waktuMaks*fps;
108. }
109.
110. function efekPopup(e:Event):void{
111. var ob:Object = e.currentTarget;
112. if (ob.scaleX < 1){
113. ob.scaleX+=0.1;
114. ob.scaleY+=0.1;
115. }
116. if (ob.waktu > -1){
117. ob.waktu++;
118. if (ob.waktu > 60){
119. ob.waktu = -1;
120. //tambah no soal
121. nomorSoal++;
122.
ob.removeEventListener(Event.ENTER_FRAME, efekPopup);
123. removeChild(DisplayObject(ob));
124. if (ob.tp < 4){
125. if (nomorSoal < soalMaks){
126. gameAktif = true;
127. tampilkanSoal();
128. }else{
129. //soal habis
130. gameAktif = false;
131. tampilkanHasil(4);
132. }
133. }else{
134. //pindah ke halaman score
setelah soal habis
135.
pengaturWaktu.removeEventListener(Event.ENTER_FRAME,
aturWaktu);
136. gotoAndStop(5);
137. }
138. }
139. }
140. }
141.
142. function aturWaktu(e:Event):void{
143. if (gameAktif){
144. waktuSoal--;
145. if (waktuSoal < 0){
146. waktuSoal = waktuMaks*fps;
147. gameAktif = false;
148. tampilkanHasil(3);
149. }
150. }
151. //tampilkan dalam movieclip pengaturWaktu
152. pengaturWaktu.barMC.scaleX =
waktuSoal/(waktuMaks*fps);
153. }
154.
155. setup();

9. Jalankan aplikasi dengan menekan tombol Ctrl+Enter


Penjelasan
Kode
4. // struktur soal 0. Soal 1-4 jawaban, Jawaban benar diletakkan no
1 5. frame MC gambar
5. var soal:Array = [["Hewan apakah pada gambar di samping ?", "Gajah",
"Anjing Laut", "Zebra", "Berang-berang", 1], .....

Modifikasi data soal dilakukan dengan menambahkan nilai baru, yaitu nilai frame jawaban
yang mengacu pada movieclip hewanMC.

31. function tampilkanSoal():void{


32. //tampilkan gambar
33. gambarMC.gotoAndStop(tempSoal[nomorSoal][5]);
34. //tampilkan soal
35. soalTxt.text = tempSoal[nomorSoal][0];
36. //acak jawaban
37. .....

Baris 32 pada fungsi tampilkanSoal, movieclip gambarMC diatur sesuai dengan variabel
soal, sehingga akan menampilkan gambar yang diinginkan.

Selanjutnya anda dapat menambahkan elemen lain seperti timer, halaman opsi, halaman
cover dan suara