tutorial android - 8-puzzle game

7/25/2019 Tutorial Android - 8-Puzzle Game

1/24

Android Tutorial

2014


2/24

2

Defnisi 8-Puzzle GamePada dasarnya, 8-puzzle merupakan sebuah game yangdimainkan pada sebuah petak berukuran 3x3 dengan 8buah kotak yang bertuliskan angka dari 1 sampai 8 dansebuah kotak kosong. otak-kotak tersebut tersusunse!ara a!ak, dan kita sebagai player diminta untukmenyusun kembali kotak-kotak tersebut sehingga angka-angkanya berurutan.

Pada tutorial ini, kita akan membuat 8-puzzle game pada android denganmenggunakan potongan-potongan gambar sebagai pengganti angkanya.

8-Puzzle "ame # $ndroid %utorial


3/24

2

Step 1: Membuat Project Android

Baru&alam membuat aplikasi ini, kita membutuhkan beberapa activity classbeserta layout -nya. 'erikut ini da(tar class dan layout yang akan kita buat)

Activity class Activity Layout *ain"ame+elp

maingamehelppi! spinner

&etailnya akan di elaskan pada step-step berikut.

Step : Menamba!"an Gambar&alam aplikasi ini, kita akan membutuhkan banyak gambar. 'erikut inigambar-gambar utama yang nantinya digunakan sebagai gambar puzzle )

panda.png

pre ie/ panda.png

panda1.png panda2.png

panda4.png panda .png

panda .png panda8.png



4/24

2

o/l.png

pre ie/ o/l.png

o/l1.png

o/l4.png

o/l .png

"ambar-gambar berikut digunakan untuk memper!antik interface dariaplikasi)

go.png about.png exit.png lamp.png re(resh.png

small tiles.png

n puzzle.png

i!on panda.png

i!on o/l.png

bg.png



5/24

2

Step #: Membuat Desain $alaman

A%al+asil akhir dari halaman a/al main.xml nanti akan tampak sebagaiberikut.

'erikut ini langkah-langkahnya)

Pada blank activity , gunakan inear ayout dan atur property -nya sebagaiberikut)

&idalam inear ayout tersebut, tambahkan sebuah %ext5ie/ sebagai udulbertuliskan 6 n-Puzzle 7 dengan property sebagai berikut)



6/24

2

&'T( ) %eks yang akan ditampilkan diambil dari le strings.xml yangterdapat dalam (older values .

'erikutnya, tambahkan sebuah inear ayout lagi yang ber(ungsi sebagaipenampung content -nya. $tur property -nya sebagai berikut)

&idalamnya, tambahkan sebuah %ext5ie/ yang ber(ungsi sebagai labelbertuliskan 6 Select image 7.

&iba/ahnya, tambahkan sebuah 9pinner yang ber(ungsi untukmemberikan pilihan gambar apa sa a yang tersedia.

9etelah itu, tambahkan 'utton bertuliskan 6 PLAY 7 dengan icon dari legambar go.png disisi kanan. $ku yakin kamu pasti sudah tahukegunaannya.

&iluar inear ayout diatas, tambahkan sebuah inear ayout lagi sebagai



7/24

2

penampung 'utton.

&idalamnya, tambahkan sebuah 'utton yang ber(ungsi untukmenampilkan data diri. :ntuk yang satu ini tidak terlalu penting, adikamu bisa le/ati code yang satu ini.

%ambahkan lagi sebuah 'utton yang ber(ungsi untuk keluar aplikasi.

Step ): Membuat Desain *tem

untu" Spinner$gar lebih menarik, kita akan membuat sebuah 9pinner yangmenampilkan icon ke!il dari gambar puzzle yang dipilih oleh player . :ntukitu, kita akan menggunakan le layout dengan nama pi! spinner.xml yangsebelumnya sudah kita buat. 'erikut ini code yang dituliskan didalamnya)

"unakan inear ayout sebagai layout utamanya.

%ambahkan sebuah %ext5ie/ kosong dengan pengaturan property sebagaiberikut.



8/24

2

+asil dari penulisan code diatas memang kosong, karena kita baru akanmenambahkan isinya pada pembahasan berikutnya.



9/24

2

Step +: Membuat Desain $alaman

Game+asil akhir dari halaman game game.xml nanti akan tampak sebagaiberikut.



%ambahkan sebuah ;rame ayout sebagai gamespace -nya.

&idalamnya, tambahkan sebuah $bsolute ayout yang ber(ungsi sebagaipenampung puzzle -nya. &alam tutorial ini memang digunakan



10/24

2

$bsolute ayout yang statusnya sudah deprecated usang .

&idalam $bsolute ayout, tambahkan sebuah 'utton sebagai kepingan puzzle pertama.

%ambahkan lagi 'utton sebagai kepingan puzzle kedua.

%ambahkan lagi 'utton sebagai kepingan puzzle ketiga.

%ambahkan lagi 'utton sebagai kepingan puzzle keempat.



11/24

2

%ambahkan lagi 'utton sebagai kepingan puzzle kelima.

%ambahkan lagi 'utton sebagai kepingan puzzle keenam.

%ambahkan lagi 'utton sebagai kepingan puzzle ketu uh.

%ambahkan lagi 'utton sebagai kepingan puzzle kedelapan.



12/24

2

'erikutnya, diluar $bsolute ayout namun masih dalam ;rame ayout,tambahkan


13/24

2

&iluar inear ayout diatas, tambahkan %ext5ie/ untuk menampilkanpesan selama game berlangsung.

'erikutnya, tambahkan lagi sebuah inear ayout untuk menampung'utton.

%ambahkan 'utton yang ber(ungsi untuk menampilkan bantuan.

%ambahkan sebuah 'utton lagi yang ber(ungsi sebagai tombol restart .

Step ,: Membuat Desain $alamanBantuan+asil akhir dari halaman bantuan help.xml nanti akan tampak sebagaiberikut.



14/24

2



%ambahkan sebuah %ext5ie/ sebagai udulnya dengan icon dari legambar lamp.png diletakkan disisi kiri.

%ambahkan sebuah ;rame ayout yang didalamnya berisi


15/24

2

&iluar ;rame ayout diatas, tambahkan sebuah 'utton yang ber(ungsiuntuk kembali ke halaman sebelumnya.



16/24

2

Step : Menulis"an .ode pada

.lass A%al9etelah semua desain sudah siap, kita bisa mulai menuliskan code untukmasing-masing activity layout tersebut. 'erikut ini code yang dituliskanpada *ain. a a)

%uliskan code berikut pada bagian a/al class yang berisi ariabel- ariabelyang umum digunakan dalam class tersebut.

ita perlu membuat sebuah sub!lass bernama Pi!ture$dapter yangber(ungsi sebagai adapter yang menga!u ke le pi! spinner.xml yangsebelumnya sudah kita buat.

&idalam method on=reate , tuliskan code berikut yang ber(ungsi sebagaipengaturan a/al 9pinner, dimana item -nya diambil dari layout pi! spinner.xml.



17/24

2

*asih didalam method on=reate , tambahkan code berikut untukmemba!a setiap 'utton yang terdapat dalam layout main.xml.

&iluar method on=reate , tambahkan code berikut yang ber(ungsi untukmengatur hal-hal apa sa a yang ter adi apabila player menekan salah satutombol.

Step 8: Menulis"an .ode pada

.lass Game8-Puzzle "ame # $ndroid %utorial


18/24

2

'erikut ini code yang dituliskan pada "ame. a a)

*endeklarasikan ariabel- ariabel yang umum digunakan pada class"ame.

%ambahkan uga ariabel- ariabel array untuk menyimpan gambar-gambar yang nantinya digunakan sebagai puzzle .

emudian, buat lagi ariabel- ariabel untuk menentukan current state dangoal state .

&idalam method on=reate , isi nilai dari ariabel current state .

'erikutnya, inisialisasi nilai.

9etelah itu, tambahkan code untuk memba!a setiap 'utton yang terdapat

dalam layout game.xml.

&iluar method on=reate , tambahkan code berikut untuk menentukan(ungsi dari tiap-tiap 'utton.



19/24

2

embali lagi ke method on=reate , lakukan pemanggilan method lain danlakukan pengaturan pada setiap potongan puzzle -nya.

%ambahkan sebuah method baru dalam class "ame bernamand'uttons yang ber(ungsi untuk memba!a setiap 'utton yang ada.

%ambahkan lagi sebuahmethod

baru bernama ll"rid'y


20/24

2

9ambungan dari code sebelumnya.


%ambahkan lagi sebuah method baru bernama make*o e yangber(ungsi untuk menentukan movement apa sa a yang bisa dilakukan oleh

player .




21/24

2



9ambungan dari code sebelumnya. Code berikut ini ber(ungsi untukmenentukan pesan yang akan ditampilkan selama game berlangsung.

%ambahkan lagi sebuah method baru bernama ndPosition yangber(ungsi untuk mendapatkan posisi> index .

%ambahkan sebuah method lagi bernama sho/?esult yang ber(ungsiuntuk menampilkan hasil akhir apabila player berhasil menyelesaikan

puzzle .



22/24

2



23/24

2

Step /: Menulis"an .ode pada

.lass Bantuan'erikut ini code yang dituliskan pada +elp. a a)

%uliskan code berikut didalam method on=reate yang ber(ungsi untukmemba!a


24/24

2

3esimpulan$khirnya aplikasi -Puzzle kita sudah selesai@ $plikasi ini sudah ber alandengan baik meski masih banyak sekali kelemahannya dibandingkandengan aplikasi 8-Puzzle yang beredar saat ini. 9alah satunya, tidakadanya (ungsi random untuk melakukan penga!akan puzzle . %entu sa ahal itu bisa diatasi dengan bela ar lebih dalam lagi tentang android.

ambat laun kita pasti bisa, selama ada niat untuk terus men!oba. %erima kasih.

tutorial android - 8-puzzle game

Documents