Membuat Game Tangkap Telur

Baik, kali ini kita akan membuat game tangkap telur.
Skenario :

  1. Telur jatuh dari atas secara random.
  2. Keranjang digerakkan menggunakan mouse untuk menangkap telur yang jatuh.
  3. Skor akan bertambah jika mendapat telur emas ataupun telur biasa dan akan berkurang jika mendapatkan batu.
  4. Skor :
    Telur Emas : 20
    Telur : 10
    Batu : -10

Langsung aja, kita lanjut ke langkah2nya ;)

  • Seperti biasa, kita buat sebuah dokumen baru.
  • Kemudian buat sebuah gambar telur, dan seleksi telur tersebut. Lalu klik kanan dan pilih Convert to Symbol terus pilih MovieClip. Klik Advance agar tampil lebih banyak lagi, kemudian centang Export for Actionscript, dan ketikkan telur pada Identifiernya. Ingat, Name hanya sebagai penamaan, sedang actionscript mengenali dari penamaan Identifier. Sehingga akan tampil seperti ini.

    telur - convert to symbol

    telur - convert to symbol

  • Buat sebuah gambar lainnya yaitu mangkok, telur emas dan batu. Masing-masing beri identifier mangkok, telur_emas, dan batu. Cara membuatnya sama dengan langkah sebelumnya. :p
  • Jika sudah sekarang kita punya 4 objek nih. :angel:

    jadi semua :P

    jadi semua :P

  • Hapus semua gambar yang ada di stage, cukup tekan Ctrl + A dan delete.. (lho ?? :woot:  tenang aja, gpp kok, selama udah dimasukin library :wink: )
  • Kemudian tambahkan keyframe pada frame 2 dan frame 3 pada Layer 1 , seperti berikut :

    keyframe

    keyframe

  • Maksud dari 3 frame ini adalah frame 1 untuk menu, frame 2 untuk permainan, dan frame 3 untuk game over.
  • Sekarang kita buat bagian menu. Buat sebuah static text dengan tulisan “Game Tangkap Telur“. Kemudian buat sebuah button dengan cara membuat sebuah kotak yang berisi static text kemudian seleksi kotak tersebut beserta tulisannya dan klik kanan pada kotak tersebut lalu pilih Convert To Symbol dan pilih Button. Dobel klik pada area kosong di stage untuk kembali.

    halaman depan

    halaman depan

  • Sekarang kita klik pada tombol/button yang barusan kita buat, kemudian kita tekan F9 untuk menampilkan panel Actions – Button. Kemudian ketikkan script berikut :
    on(release){
    	//berpindah ke game (pada frame 2)
    	gotoAndStop(2);
    }
  • Kode diatas digunakan untuk memulai permainan / pergi ke frame 2. Sekarang kita klik pada frame 1 Layer 1 dan tekan F9. Ketik stop(); agar timeline header tidak berjalan kemana-mana saat di-test movie.

    stop

    stop

  • Kemudian buat sebuah dynamic text kemudian buka panel properties (Ctrl + F3) dan set score sebagai variablenya (var).

    frame2

    frame2

  • Sekarang kita beralih ke frame 2, caranya dengan mengklik frame 2 pada layer 1. Silakan tulis script berikut :
    //memanggil mangkok dari library dan ditaruh ke _root (stage)
    _root.attachMovie("mangkok","mangkok",0,{_x:275,_y:350});
    //secara berkala setiap 1000 milidetik memanggil fungsi panggilTelur
    var telurInterval = setInterval(panggilTelur,1000);
    //secara berkala kurangi waktu setiap 1000 milidetik / 1 detik
    var waktuInterval = setInterval(kurangiWaktu,1000);
    
    //mereset waktu
    score = 0;
    waktu = 5;
    
    //berjalan secara terus menerus
    _root.onEnterFrame=function(){
    	//posisi mangkok ditentukan oleh posisi x dari mouse
    	mangkok._x = _xmouse;
    }
    
    //fungsi panggilTelur, digunakan untuk memanggil telur dari langit
    function panggilTelur(){
    	//menciptakan angka random
    	var angkaRandom = random(10);
    	var objekYangDipanggil = "";
    
    	//melihat angka random
    	if(angkaRandom>=0 && angkaRandom<=6){
     		objekYangDipanggil = "telur";
     	}else if(angkaRandom>=7 && angkaRandom<=8){
     		objekYangDipanggil = "telur_emas";
     	}else{
     		objekYangDipanggil = "batu";
     	}
     	//depth digunakan sebagai kedalaman saat menambahkan movieclip ke stage
     	var depth = _root.getNextHighestDepth();
     	//memanggil objek movieclip ke stage
     	var objek = _root.attachMovie(objekYangDipanggil, objekYangDipanggil+"-"+depth, depth);
     	objek._x = random(500);
     	objek._y = 0;
     	//properti nama digunakan sebagai pengenal
     	objek.nama = objekYangDipanggil;
     	//agar objek dapat bergerak
    	objek.onEnterFrame=function(){
     		//menggerakkan objek ke bawah
     		this._y += 10;
     		//mengecek kondisi jika bersentuhan dengan mangkok
     		if(this.hitTest(_root.mangkok)){
     			//menambah atau mengurangi score
     			if(this.nama == "telur"){
     				score += 10;
     			}else if(this.nama == "telur_emas"){
     				score += 20;
     			}else{
     				score -= 10;
     			}
     			//kemudian menghapusnya
     			delete this.onEnterFrame;
     			this.removeMovieClip();
     		}
     		//mengecek kondisi jika objek telah melewati batas
     		if(this._y>=450){
    	                //menghapus objek tersebut
    			delete this.onEnterFrame;
    			this.removeMovieClip();
    		}
    	}
    }
    
    //fungsi kurangi waktu
    function kurangiWaktu(){
    	waktu -= 1;
    	//jika waktu habis, pergi ke game over
    	if(waktu == 0){
    		//membersihkan semua objek di stage
    		for(i=0;i<=_root.getNextHighestDepth();i++){
    			_root.getInstanceAtDepth(i).removeMovieClip();
    		}
    		//menghilangkan semua interval
    		clearInterval(telurInterval);
    		clearInterval(waktuInterval);
    		//pergi ke frame 3
    		_root.gotoAndStop(3);
    	}
    }
  • Seleksi semua yang ada di frame 2, kemudian copy-kan ke frame 3, sehingga kita hanya mengatur posisi dari dynamic text nya.

    frame3

    frame3

  • Beres deh, sekarang tinggal kita tes movie :D

Source code : SINI

VN:F [1.9.8_1114]
Rating: 7.4/10 (42 votes cast)
VN:F [1.9.8_1114]
Rating: +3 (from 7 votes)
Membuat Game Tangkap Telur, 7.4 out of 10 based on 42 ratings

Related posts:

  1. apa itu MovieClip ?
  2. Membuat Animasi Kumbang Mengikuti Mouse
  3. Collision / Tumbukan dalam Flash