Pemrograman Permainan Puzzle-8

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2004 IlmuKomputer.Com

Taufik Fuadi Abidin
taufik.abidin@ndsu.nodak.edu
http://www.cs.ndsu.nodak.edu/~abidin
Lisensi Dokumen:
Copyright © 2004 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan
disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat
tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang
disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,
kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.
Puzzle-8
Puzzle-8 adalah permainan yang terdiri dari 3 baris dan 3 kolom (9 kotak) dengan delapan kotak
memiliki identitas misalnya berupa huruf a,b,c,d,e,f,g,h dan satu kotak kosong. Pergeseran dilakukan
ke arah kotak kosong secara vertikal atau horizontal namun tidak secara diagonal. Hanya satu kotak
yang dapat digeser setiap kali perpindahan. Tujuan akhir dari permainan puzzle-8 adalah mengatur
kondisi awal (initial state) yang diperoleh secara acak menjadi dalam bentuk konfigurasi akhir (goal
state). Konfigurasi akhir dalam program yang akan kita bahas ini adalah:
a
d
g
b
e
h
c
f
Gambar 1. Konfigurasi akhir.
Tulisan ini membahas bagaimana membuat applet permainan puzzle-8 (Lihat contohnya di
http://ww.cs.ndsu.nodak.edu/~abidin) menggunakan bahasa pemrograman Java. Sebagaimana kita
ketahui Java merupakan bahasa pemograman berorientasi objek yang dikembangkan oleh Sun
Microsystems. Satu hal yang sangat menarik dari bahasa pemrograman ini adalah aplikasi applet,
yaitu suatu aplikasi yang dapat dijalankan melalui browser. Applet bersifat machine-independent
karena kode programnya oleh compiler Java hanya diubah menjadi java bytecode yang
berekstensi .class. Kemudian pada saat dieksekusi, java bytecode tersebut oleh interpreter Java (telah
tersedia dalam browser ternama seperti Netscape dan Internet Explorer) diubah menjadi bahasa
mesin sesuai konfigurasi perangkat keras dimana program tersebut dijalankan. Keunikan inilah yang
membuat applet semakin digemari.
Selain itu, Java yang merupakan bahasa pemrograman berorientasi objek mengizinkan pemrogram
menggunakan class yang telah ada dan mewarisi sifatnya kepada class dibawahnya. Sehingga sifat
dan kemampuan yang telah ada pada class sebelumnya tidak perlu diimplementasi ulang, namun
dapat secara langsung dipakai. Konsep ini dikenal dengan sebutan inheritance. Karena tujuan kita
adalah membuat permainan puzzle-8 yang dapat dijalankan melalui web (aplikasi applet), maka
mutlak program yang kita buat tersebut menurunkan sifat class Applet yang sudah secara build-in
disediakan oleh Java. Diagram berikut menggambarkan keterkaitan class-class dalam puzzle-8.
1

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2004 IlmuKomputer.Com
Applet
is-a
Puzzle-8
has
Puzzle
has
PuzzleItem
Diagram di atas dapat kita terjemahkan sebagai berikut: Puzzle-8 merupakan Applet berupa puzzle
yang terdiri dari beberapa item berupa kotak a, b, c, d dan seterusnya. Dalam implementasi, kita
membutuhkan 2 file suara (click.au dan finish.au). Click.au akan dimainkan pada saat pergeseran
puzzle dilakukan dan finish.au dimainkan bila kondisi akhir dicapai. Selain itu, 9 file gambar dalam
format jpeg juga diperlukan. Bentuk dan penamaan kesembilan file gambar tersebut adalah sebagai
berikut:
nama file: item0.jpeg
nama file: item1.jpeg
nama file: item2.jpeg
nama file: item3.jpeg
nama file: item4.jpeg
nama file: item5.jpeg
nama file: item6.jpeg
nama file: item7.jpeg
Kode Program
/*******************************
* File: Puzzle8.java
* Author: Taufik Fuadi Abidin
*******************************/
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
2

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2004 IlmuKomputer.Com
public class Puzzle8 extends Applet
{
private Image image[];
private String imageFile, imageType;
private String clickSound, finishSound;
private int row, col, imageNum;
private Label title, score;
private Panel puzzle, bottom;
private AudioClip clickClip, finishClip;
public String getAppletInfo()
{
return "Copyright by Taufik Fuadi Abidin";
}
public String[][] getParameterInfo()
{
String[][] info = {
{"imageFile", "string", "Image file name"},
{"clickSound", "string", "Sound if clicked"},
{"finishSound", "string", "Sound if puzzle complete"},
{"imageNum", "int", "Total number of image to be randomed"},
{"row", "int", "Number of row of the puzzle"},
{"col", "int", "Number of col of the puzzle"},
{"imageType", "string", "Type of image file"}
};
return info;
}
public void init()
{
imageFile = getParameter("imageFile");
clickSound = getParameter("clickSound");
finishSound = getParameter("finishSound");
imageType = getParameter("imageType");
imageNum= Integer.parseInt(getParameter("imageNum"));
row= Integer.parseInt(getParameter("row"));
col= Integer.parseInt(getParameter("col"));
image= new Image[imageNum];
//Load image
for (int i = 0; i < imageNum; i++)
{
image[i] = getImage(getDocumentBase(),
imageFile + i + "." + imageType);
}
showStatus(imageFile + " loaded...");
repaint();
clickClip = getAudioClip(getDocumentBase(), clickSound);
finishClip = getAudioClip(getDocumentBase(), finishSound);
setLayout(new BorderLayout());
setBackground(Color.white);
setForeground(Color.black);
puzzle
= new Puzzle(image, imageNum, row, col,clickClip, finishClip,
3

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2004 IlmuKomputer.Com
this);
bottom = new Panel();
bottom.setLayout(new BorderLayout());
bottom.setBackground(Color.gray);
setFont(new Font("Helvetica", Font.PLAIN, 14));
score = new Label();
score.setForeground(Color.white);
title = new Label("(c) 2003 Taufik Fuadi Abidin");
title.setForeground(Color.white);
bottom.add("North", score);
bottom.add("Center", title);
add("Center",puzzle);
add("South", bottom);
}
public void start()
{
repaint();
}
public void stop()
{
repaint();
}
public void setScore(String s)
{
score.setText(s);
repaint();
}
}
/*******************************
* File: Puzzle.java
* Author: Taufik Fuadi Abidin
*******************************/
import java.awt.*;
import java.awt.*;
import java.awt.event.*;
import java.lang.Number.*;
import java.applet.*;
public class Puzzle extends Panel implements MouseListener
{
private PuzzleItem item[];
private int num[];//menyimpan no acak untuk image
private int elemen;//jumlah elemen puzzle
private int numOfMove=0;
private int opened1Pos, opened2Pos, openedImageID;
private AudioClip clickClip, finishClip;
private Puzzle8 ep;
//Constructor Puzzle
public Puzzle(Image image[], int seed, int row, int col,
AudioClip clickClip, AudioClip finishClip, Puzzle8 ep)
4

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2004 IlmuKomputer.Com
{
elemen = row * col;
this.ep = ep;
this.clickClip = clickClip;
this.finishClip = finishClip;
scramble(seed, elemen);
item = new PuzzleItem[elemen];
setLayout(new GridLayout(row, col));
//Acak elemen puzzle
int ipos=0, jpos=0;
for (int i = 0; i < elemen; i++)
{
if((i!=0) && (i % col == 0))
{
ipos++;
jpos=0;
}
item[i] = new PuzzleItem(image[num[i]], num[i], ipos, jpos);
item[i].addMouseListener(this);
add(item[i]);
jpos++;
}
}
private void scramble(int seed, int elemen)
{
num = new int[elemen];
//set nilai awal array num
for (int i = 0; i{
num[i]=-1;
}
int slot=0;
while (slot < num.length)
{
int rand = (int)(seed * Math.random());
boolean duplicate = false;
for(int i=0; i{
if(num[i] == rand)
{
duplicate = true;
}
}
if(!duplicate)
{
num[slot] = rand;
slot++;
}
}
}
public void mousePressed(MouseEvent e)
{
5

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2004 IlmuKomputer.Com
int zeroPos = 0;
PuzzleItem it = (PuzzleItem) e.getSource();
//check posisi item yang diklik
for(int i=0; i < elemen; i++)
{
if(it == item[i])
{
// identifikasi image yang diklik dan ambil ID-nya
int clickedID = item[i].getImageID();
Image clickedImage = item[i].getImage();
if(clickedID != 0)
{
//cari posisi dari image kosong
for(int t=0; t < elemen; t++)
{
if(item[t].getImageID() == 0)
{
zeroPos = t;
break;
}
}
//baca ipos dan jpos dari image yang diklik
int ipos = item[i].getRow();
int jpos = item[i].getCol();
//baca ipos dan jpos dari image kosong
int zipos = item[zeroPos].getRow();
int zjpos = item[zeroPos].getCol();
Image zeroImage = item[zeroPos].getImage();
boolean validMove = false;
if((ipos == zipos) || (jpos == zjpos)) //posisi berdekatan
{
if((Math.abs(zipos - ipos) == 1) ||
(Math.abs(zjpos - jpos) == 1))
{
validMove = true;
}
}
if(validMove)
{
numOfMove++;
//tukar posisi dan gambar
//update jumlah pergeseran
item[i].setImageID(0);
item[i].setImage(zeroImage);
item[i].setRow(ipos);
item[i].setCol(jpos);
item[i].update();
item[zeroPos].setImageID(clickedID);
item[zeroPos].setImage(clickedImage);
item[zeroPos].setRow(zipos);
item[zeroPos].setCol(zjpos);
item[zeroPos].update();
6

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2004 IlmuKomputer.Com
boolean goal = true;
//check apakah kondisi akhir (goal state)?
for(int t=0; t < (elemen-1); t++)
{
if(item[t].getImageID() != (t+1))
{
goal = false;
break;
}
}
if(!goal)
{
clickClip.play();
}
else
{
finishClip.play();
ep.setScore("Total Move = " + numOfMove);
for(int t=0; t < elemen; t++) //nonaktifkan mouseListener
{
item[t].removeMouseListener(this);
}
}
}
}
break;
}
}
}
public
public
public
public
}
void
void
void
void
mouseClicked(MouseEvent e)
mouseEntered(MouseEvent e)
mouseExited(MouseEvent e)
mouseReleased(MouseEvent e)
{}
{}
{}
{}
/*******************************
* File: PuzzleItem.java
* Author: Taufik Fuadi Abidin
*******************************/
import java.awt.*;
import java.awt.image.*;
public class PuzzleItem extends Panel
{
private Image image;
private int ipos, jpos;
private int imageID;
private String status;
//Constructor PuzzleItem
public PuzzleItem(Image image, int imageID, int ipos, int jpos)
{
this.image = image;
this.imageID = imageID;
this.ipos = ipos;
this.jpos = jpos;
7

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2004 IlmuKomputer.Com
}
public void paint(Graphics g)
{
Rectangle r = getBounds();
g.drawImage(image,0,0,this);
g.setColor(Color.cyan);
g.drawRect(0,0,r.width-1,r.height-1);
}
public int getRow()
{
return ipos;
}
public int getCol()
{
return jpos;
}
public int getImageID()
{
return imageID;
}
public Image getImage()
{
return image;
}
public void setRow(int ipos)
{
this.ipos = ipos;
}
public void setCol(int jpos)
{
this.jpos = jpos;
}
public void setImageID(int id)
{
this.imageID = id;
}
public void setImage(Image image)
{
this.image = image;
}
public void update()
{
repaint();
}
}
8

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2004 IlmuKomputer.Com
File HTML (asumsi disimpan dengan nama puzzle.html)





Permainan Puzzle-8

---

---

Copyright © 2003 Taufik Fuadi Abidin



Penutup
Compile ketiga file Java di atas dan jalankan file HTML puzzle.html pada browser anda. Klik pada
kotak yang ingin anda geser dan selesaikan puzzle-8 sampai konfigurasi akhir tercapai. Untuk
mengacak ulang, klik tombol refresh pada browser anda. Have fun!
9

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2004 IlmuKomputer.Com
Taufik Fuadi Abidin
Biografi dan Profil
Taufik Fuadi Abidin. Lahir di Banda Aceh, 8 Oktober 1970.
Menyelesaikan S1 dibidang matematika di Jurusan Matematika FMIPA
ITS Surabaya pada tahun 1993 dan S2 dibidang ilmu komputer di
Computer Science Department, RMIT University, Melbourne, Australia
pada tahun 2000. Saat ini sedang melanjutkan program S3 di Computer
Science Department, North Dakota State University (NDSU), USA. Di
Indonesia berstatus sebagai tenaga pengajar Jurusan Matematika
FMIPA Universitas Syiah Kuala, Banda Aceh. Meminati dan mendalami
bidang database, data dan teks mining serta information retrieval.
Informasi lebih lanjut tentang penulis ini bisa didapat melalui:
URL: http://www.cs.ndsu.nodak.edu/~abidin
Email: taufik.abidin@ndsu.nodak.edu