| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



13.07.2020

Membuat Game Onet

Membuat game mencari gambar yang sama (onet) dengan JS/HTML5

11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML

11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas

19.05.2020

Membuat Fitur Swipe Mobile

Membuat fitur swap / drag konten untuk mobile

12.05.2020

Membuat Grafik Fungsi Kuadrat dengan Flash

Membuat kurva fungsi kuadrat dengan kode actionscript 3 Flash

11.05.2020

Membuat Kordinat Kartesius dengan Flash

Membuat sistem kordinat kartesius dengan code AS3 full

16.03.2020

Game Edukasi RPG

Buku pengembangan game RPG bermuatan edukasi

31.07.2019

Perpustakaan Baru UNNES

Mengintip perpustakaan baru UNNES

07.04.2018

Membuat Game Tebak Gambar

Tutorial membuat game tebak gambar dengan Flash

03.07.2017

Memahami konstain

Memahami penggunaan konstrain dalam membuat sistem gerak


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Game Kuis 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 :


Get Adobe Flash player

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.
    tutorial flash membuat game tebak gambar by wandah_w
  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.
    tutorial flash membuat game tebak gambar by wandah_w
  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.
    tutorial flash membuat game tebak gambar by wandah_w
  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 :
  9. //waktu persoal dalam detik 
    var waktuMaks:int = 10;
    var soalMaks:int = 10;
    // struktur soal 0. Soal  1-4  jawaban, Jawaban benar diletakkan no 1  5. frame MC gambar 
    var soal:Array = [["Hewan apakah pada gambar di samping ?", "Gajah", "Anjing Laut", "Zebra", "Berang-berang", 1],
    				  ["Sebutkan nama hewan di samping ?", "Anjing Laut", "Zebra", "Berang-berang", "Anjing", 2],	
    				  ["Hewan apakah pada gambar di samping ?", "Keledai", "Kuda", "Zebra", "Sapi", 3],
    				  ["Hewan apakah pada gambar di samping ?", "Bebek", "Ayam", "Angsa", "Platipus", 4],
    				  ...
    			];
    var nilai:int = 0;
    var nomorSoal:int = 0;
    var hasil:hasilMC;
    var tempSoal:Array;
    var tempJawaban:Array;
    var gameAktif:Boolean = true;
    var fps:int = 30; //frame per second 
    var waktuSoal:int = waktuMaks*fps;
     
    function acakSoal():void{
    	//mengacak soal
    	tempSoal = soal.slice(0, soal.length);
    	for (var i:int = 0; i < soal.length; i++){
    		var acak:int = Math.floor(Math.random()*soal.length);
    		var temp:Array = tempSoal[acak];
    		tempSoal[acak] = tempSoal[i];
    		tempSoal[i] = temp;
    	}
    }
     
    function tampilkanSoal():void{
    	//tampilkan gambar
    	gambarMC.gotoAndStop(tempSoal[nomorSoal][5]);
    	//tampilkan soal
    	soalTxt.text = tempSoal[nomorSoal][0];
    	//acak jawaban
    	tempJawaban = tempSoal[nomorSoal].slice(1, 5);
    	for (var i:int = 0; i < tempJawaban.length; i++){
    		var acak:int = Math.floor(Math.random()*tempJawaban.length);
    		var temp:String = tempJawaban[acak];
    		tempJawaban[acak] = tempJawaban[i];
    		tempJawaban[i] = temp;
    	}
    	//tampilkan jawaban
    	jawab1.jawabanTxt.text = tempJawaban[0];
    	jawab2.jawabanTxt.text = tempJawaban[1];
    	jawab3.jawabanTxt.text = tempJawaban[2];
    	jawab4.jawabanTxt.text = tempJawaban[3];
    	//netralkan
    	jawab1.gotoAndStop(1);
    	jawab2.gotoAndStop(1);
    	jawab3.gotoAndStop(1);
    	jawab4.gotoAndStop(1);
    }
     
    function setup():void{
    	acakSoal();
    	tampilkanSoal();
    	//mengatur jawaban
    	jawab1.stop();
    	jawab2.stop();
    	jawab3.stop();
    	jawab4.stop();
    	jawab1.addEventListener(MouseEvent.CLICK, cekJawaban);
    	jawab2.addEventListener(MouseEvent.CLICK, cekJawaban);
    	jawab3.addEventListener(MouseEvent.CLICK, cekJawaban);
    	jawab4.addEventListener(MouseEvent.CLICK, cekJawaban);
    	
    	//timer
    	pengaturWaktu.addEventListener(Event.ENTER_FRAME, aturWaktu);
    }
    
     
    function cekJawaban(e:MouseEvent):void{
    	e.currentTarget.gotoAndStop(3);
    	if (gameAktif){
    		var nomorJawaban:int = int(e.currentTarget.name.substr(5))-1;
    		if (tempJawaban[nomorJawaban] == tempSoal[nomorSoal][1]){
    			//jawaban benar
    			tampilkanHasil(1);
    			nilai+=10;
    		}else{
    			//jawaban salah
    			tampilkanHasil(2);
    		}
    		//tampilkan jawaban yang benar
    		if (tempJawaban[0] == tempSoal[nomorSoal][1]) jawab1.gotoAndStop(2);
    		if (tempJawaban[1] == tempSoal[nomorSoal][1]) jawab2.gotoAndStop(2);
    		if (tempJawaban[2] == tempSoal[nomorSoal][1]) jawab3.gotoAndStop(2);
    		if (tempJawaban[3] == tempSoal[nomorSoal][1]) jawab4.gotoAndStop(2);		
    	}
    }
     
    function tampilkanHasil(tp:int):void{
    	hasil = new hasilMC;
    	hasil.x = 400;
    	hasil.y = 160;
    	hasil.gotoAndStop(tp);
    	hasil.scaleX = 0.2;
    	hasil.scaleY = 0.2;
    	hasil.waktu = 0;
    	hasil.tp = tp;
    	hasil.addEventListener(Event.ENTER_FRAME, efekPopup);
    	addChild(hasil);
    	//reset timer
    	gameAktif = false;
    	waktuSoal = waktuMaks*fps;
    }
     
    function efekPopup(e:Event):void{
    	var ob:Object = e.currentTarget;
    	if (ob.scaleX < 1){
    		ob.scaleX+=0.1;
    		ob.scaleY+=0.1;
    	}
    	if (ob.waktu > -1){
    		ob.waktu++;
    		if (ob.waktu > 60){		
    			ob.waktu = -1;
    			//tambah no soal
    			nomorSoal++;
    			ob.removeEventListener(Event.ENTER_FRAME, efekPopup);
    			removeChild(DisplayObject(ob));
    			if (ob.tp < 4){
    				if (nomorSoal < soalMaks){	
    					gameAktif = true;
    					tampilkanSoal();
    				}else{
    					//soal habis
    					gameAktif = false;
    					tampilkanHasil(4);
    				}
    			}else{
    				//pindah ke halaman score setelah soal habis
    				pengaturWaktu.removeEventListener(Event.ENTER_FRAME, aturWaktu);
    				gotoAndStop(5);
    			}			
    		}		
    	}
    }
    
    function aturWaktu(e:Event):void{
    	if (gameAktif){
    		waktuSoal--;
    		if (waktuSoal < 0){
    			waktuSoal = waktuMaks*fps;
    			gameAktif = false;
    			tampilkanHasil(3);
    		}
    	}
    	//tampilkan dalam movieclip pengaturWaktu
    	pengaturWaktu.barMC.scaleX = waktuSoal/(waktuMaks*fps);
    }
    
    setup();
    

  10. Jalankan aplikasi dengan menekan tombol Ctrl+Enter

Penjelasan Kode

	// struktur soal 0. Soal  1-4  jawaban, Jawaban benar diletakkan no 1  5. frame MC gambar 
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.


function tampilkanSoal():void{
	//tampilkan gambar
	gambarMC.gotoAndStop(tempSoal[nomorSoal][5]);
	//tampilkan soal
	soalTxt.text = tempSoal[nomorSoal][0];
	//acak jawaban
	.....

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.

Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon