Drag & Drop Kepingan Puzzle

Metode

Pada tutorial sebelumnya kepingan puzzle sudah dapat diacak sedemikian rupa. Tahapan penting berikutnya adalah mengembalikan posisi masing-masing kepingan puzzle ke posisi semula. Metode yang biasanya dipakai disebut sebagai metode drag and drop, metode ini menggunakan listener MouseEvent. Listener MouseEvent dapat bekerja dengan baik dengan menggunakan piranti mouse maupun pada layar sentuh, sehingga dengan sedikit penyesuaian kode, game ini bisa anda jalankan pada platform mobile.

Untuk melakukanmetode drag and drop kepingan puzzle, klik frame 1 layer 1, dan tambahkan kode menjadi :

var game:MovieClip;
var lebar_puzzle:Number = 6;
var tinggi_puzzle:Number = 4;
var gui:gui_mc;
var puzzle_db:Array = [];
var x_puzzle:Number;
var y_puzzle:Number;
var terpilih:Boolean = false;
var drag:Boolean = false;
var mulai_permainan:Boolean = false;
var jumlah_benar:Number = 0;

var efek_bevel:BevelFilter = new BevelFilter();
    efek_bevel.type = BitmapFilterType.INNER;
    efek_bevel.distance = 2;
    efek_bevel.highlightColor = 0xFFFFFF;
    efek_bevel.shadowColor = 0x000000;
    efek_bevel.blurX = 3;
    efek_bevel.blurY = 3;

function buat_puzzle(px:Number = 0, py:Number = 0):void{
	x_puzzle = px;
	y_puzzle = py;
	puzzle_db = [];
	//gui
	gui = new gui_mc();
	gui.berhasil_mc.visible = false;
	gui.acak_btn.addEventListener(MouseEvent.CLICK, acak_puzzle);
	addChild(gui);
	//movieclip game digunakan sebagai container untuk mempermudah pengaturan
	game = new MovieClip();
	game.x = px;
	game.y = py;
	addChild(game);
	var bg_puzzle:MovieClip = new MovieClip();
	game.addChild(bg_puzzle);
	//tambahkan puzzle dengan operasi for
	for (var i:Number = 0; i < tinggi_puzzle;i++){
		for (var j:Number = 0; j < lebar_puzzle; j++){
			//membuat pola pembantu peletakan puzzle
			var pola:keping_mc = new keping_mc();
			pola.x = j*100;
			pola.y = i*100;
			atur_keping(pola, i, j);
			bg_puzzle.addChild(pola);
			//membuat container untuk mengatur bentuk kepingan dan gambar
			var puzzle:MovieClip = new MovieClip;
			puzzle.x = j*100;
			puzzle.y = i*100;
			game.addChild(puzzle);
			//menambahkan gambar ke dalam puzzle
			var gambar:gambar_mc = new gambar_mc();
			gambar.x = -j*100-50;
			gambar.y = -i*100-50;
			puzzle.addChild(gambar);
			//menambahkan bentuk kepingan
			var keping:keping_mc = new keping_mc();			
			atur_keping(keping, i, j);
			puzzle.addChild(keping);
			//membentuk gambar sesuai kepingan dengan mask
			gambar.mask = keping;
			//menambahkan efek embos dan outline
			gambar.filters = [efek_bevel];
			//menambahkan properti puzzle
			puzzle.xa = puzzle.x;
			puzzle.ya = puzzle.y;
			puzzle.aktif = false;
			puzzle.snap = false;
			puzzle.addEventListener(Event.ENTER_FRAME, drag_puzzle);
			puzzle_db.push(puzzle);
		}
	}	
}

function atur_keping(ob:Object, i:Number, j:Number):void{
	//mengatur kepingan bagian atas
	if (i == 0 && j == 0) ob.gotoAndStop(1);
	if (i == 0 && j > 0 && j < lebar_puzzle-1) ob.gotoAndStop(2);
	if (i == 0 && j == lebar_puzzle-1 ) ob.gotoAndStop(3);
	//mengatur kepingan bagian tengah
	if (i > 0 && i < tinggi_puzzle - 1 && j == 0) ob.gotoAndStop(4);
	if (i > 0 && i < tinggi_puzzle - 1 && j > 0 && j < lebar_puzzle-1) ob.gotoAndStop(5);
	if (i > 0 && i < tinggi_puzzle - 1 && j == lebar_puzzle-1 ) ob.gotoAndStop(6);
	//mengatur kepingan bagian tengah
	if (i == tinggi_puzzle - 1 && j == 0) ob.gotoAndStop(7);
	if (i == tinggi_puzzle - 1 && j > 0 && j < lebar_puzzle-1) ob.gotoAndStop(8);
	if (i == tinggi_puzzle - 1 && j == lebar_puzzle-1 ) ob.gotoAndStop(9);
}

function acak_puzzle(e:MouseEvent):void{
	mulai_permainan = true;
	gui.berhasil_mc.visible = false;
	jumlah_benar = 0;
	gui.acak_btn.visible = false;
	for (var i:Number = 0; i < puzzle_db.length; i++){
		puzzle_db[i].x = Math.random()*700+50-x_puzzle;
		puzzle_db[i].y = Math.random()*500+50-y_puzzle;
		puzzle_db[i].snap = false;
	}
}

function tekan_mouse(e:MouseEvent):void{
	drag = true;
}
function lepas_mouse(e:MouseEvent):void{
	drag = false;
	terpilih = false;
}

function drag_puzzle(e:Event):void{
	if (mulai_permainan){
		var ob:Object = e.currentTarget;
		if (drag && !terpilih && !ob.snap){
			//metode jarak untuk menentukan klik mendekati tengah kepingan
			if (ob.hitTestPoint(mouseX, mouseY, true)){
				terpilih = true;			
				ob.aktif = true;
				//letakkan kepingan di layer teratas
				game.setChildIndex( DisplayObject(ob), game.numChildren -1 );
			}
		}
		if (ob.aktif){
			ob.x = mouseX-x_puzzle;
			ob.y = mouseY-y_puzzle;
			if (!drag) {
				ob.aktif = false;
				//tentukan jarak puzzle dengan posisi yang benar
				var jarak:Number = Math.sqrt((ob.x - ob.xa)*(ob.x-ob.xa)+(ob.y - ob.ya)*(ob.y-ob.ya));
				if (jarak < 10){
					ob.x = ob.xa;
					ob.y = ob.ya;
					ob.snap = true;
					jumlah_benar++;
					if (jumlah_benar == lebar_puzzle*tinggi_puzzle){
						//menang
						gui.berhasil_mc.visible = true;
						gui.acak_btn.visible = true;
					}
				}
			}
		}
	}
}

addEventListener(MouseEvent.MOUSE_DOWN, tekan_mouse);
addEventListener(MouseEvent.MOUSE_UP, lepas_mouse);
buat_puzzle(150, 150);

Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka hasil dari tutorial ini adalah sebagai berikut

Penjelasan Kode

var terpilih:Boolean = false;
var drag:Boolean = false;
var mulai_permainan:Boolean = false;
var jumlah_benar:Number = 0;

Pada baris 8 dilakukan penambahan beberapa variabel seperti terpilih untuk menunjukkan ada tidaknya kepingan yang terseleksi. Variabel drag, variabel ini berfungsi mendeteksi tombol mouse ditekan. Variabel mulai_permainan, variabel ini berfungsi menyatakan bahwa permainan telah dimulai. Dan variabel jumlah_benar, variabel ini berfungsi mendeteksi jumlah kepingan yang telah berada pada posisi yang benar.

function tekan_mouse(e:MouseEvent):void{
	drag = true;
}
function lepas_mouse(e:MouseEvent):void{
	drag = false;
	terpilih = false;
}

addEventListener(MouseEvent.MOUSE_DOWN, tekan_mouse);
addEventListener(MouseEvent.MOUSE_UP, lepas_mouse);

Untuk mendeteksi tombol mouse, digunakan listener MouseEvent. Dengan event tersebut kita dapat mengatur variable drag bernilai true atau false.

function drag_puzzle(e:Event):void{
....
}

fungsi drag puzzle meliputi bagaimana ketika mouse ditekan, mengenai kepingan puzzle, dan dilepaskan ditempat yang tepat. Tepat tidaknya posisi puzzle dilakukan dengan metode jarak, dan ketika tepat maka variabel jumlah_benar akan bertambah, dan menampilkan movieclip berhasil_mc ketika seluruh puzzle sudah pada posisi yang tepat.

Ketika seluruh posisi sudah sesuai anda bisa menekan kembali tombol acak dan permainan akan kembali dimulai.

Kesimpulan dan File Sumber

Membuat game puzzle pada dasarnya relatif mudah, dan melibatkan kode kurang dari 150 baris. Selanjutnya anda dapat menambahkan berbagai fitur atau melakukan penyesuaian agar dapat berjalan di platform mobile

download file sumber : FILE SUMBER GAME PUZZLE

Share ( Ayo Berbagi )

Leave me a comment

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