Smiley
The Task
Pada praktikum ini, anda akan mengimplementasikan sebuah game sederhana, bernama “Smiley Face”.
Permainan ini terdiri dari sebuah gambar smiley face, dan 3 buah tombol yang dapat mengubah warna muka, mata, dan mulut. Tujuan dari permainan ini adalah untuk mencari jumlah terkecil dari klik tombol dalam menghasilkan warna-warni yang diinginkan. Face memiliki serangkaian ukuran serperti yang tertera pada gambar. Perhatikan pula pembuatan mulut yang terdiri dari dua oval yang berukuran beda.
Level 1
Buatlah smiley sederhana yang hanya memiliki mata. Tempatkan smiley di tengah-tengah window berukuran 600 pixel (lebar) x 500 pixel (tinggi).
Langkah-langkah pengerjaan:
1. Buka BlueJ dan buatlah sebuah projek baru dengan nama “Smiley”.
2. Edit deskripsi project (dengan ikon dokumen di sebelah kiri window BlueJ) sehingga berisikan keterangan project yang sedang Anda kerjakan.
3. Buatlah sebuah kelas director dengan cara menekan tombol New Class, beri nama kelas tersebut Smiley. Lalu editlah kelas tersebut.
Catatan penting: kelas director Smiley ini berfungsi untuk menjalankan (run) project Anda. Pada praktikum pertama, Anda telah menggunakan kelas director bernama Artist. Pada praktikum kedua ini, Anda harus membuat kelas director ini dari nol (saya tidak menyediakan file apapun)
4. Editlah kelas Smiley tersebut untuk menghasilkan gambar yang diinginkan, dengan cara menggunakan Director pattern (baca materi kuliah ketiga) untuk menstrukturkan program Anda. Kelas director (yang bernama Smiley ini) diperlukan untuk membuat/menginstansiasi objek-objek yang diperlukan dan memanggil method-method dari objek-objek tersebut sehingga menghasilkan gambar yang memiliki posisi dan ukuran yang benar. Anda perlu mempelari dokumentasi dari aLibrary yang ada pada direktori aLibDoc yang disertakan pada praktikum ini. Untuk membuka dokumentasi aLibrary, klik file
index.html, lalu pelajari dua buah objek penting yang akan digunakan pada stage 1 ini.
Objek yang digunakan pada stage 1 ini adalah AWindow dan AOval. AWindow berfungsi sebagai window tempat untuk memunculkan gambar, sedangkan AOval berfungsi untuk menggambar muka dan mata. Anda perlu mempelajari deskripsi dari kedua kelas tersebut pada dokumentasi yang telah disediakan, lalu mencari tahu method-method apa saja yang diperlukan serta parameter apa yang perlu disertakan pada method-method tersebut. Gunakan metode Declare-Instantiate-Bind (kuliah 3) untuk
140 50 100 40 30 100 80 30 80 100 10 140 200 100 50
setiap variable yang Anda gunakan. Perhatikan pula pemilihan dan penulisan nama-nama variable, ikuti konvensi yang telah diajarkan di kuliah 3.
Apabila Anda telah membuat (instantiate) objek muka dan mata yang diperlukan, jangan lupa untuk memanggil method place yang berfungsi untuk menempatkan objek muka dan mata tersebut pada objek window yang telah Anda buat. Constructor dari kelas Smiley ini harus diakhiri dengan pemanggilan method repaint-nya objek window untuk me-refresh gambar dengan benar.
Berikut skeleton yang bisa Anda pergunakan untuk memulai praktikum ini: import aLibrary.*;
import java.awt.*; public class Smiley {
// deklarasi variable-variabel yang digunakan // misal:
private AWindow papanPermainan; public Smiley () {
// instansiasi objek-objek yang diperlukan // misal:
papanPermainan = new AWindow(100,100, 100, 100); // pemanggilan method-method dari objek-objek tsb // misal:
papanPermainan.repaint(); }
}
/* Catatan:
aLibrary ini berisi kelas-kelas dan method-method yang akan dipergunakan selama praktikum (Anda harus rajin-rajin membaca dokumentasinya).
java.awt berisi kelas-kelas untuk menghasilkan graphic di Java (sementar ini, Anda tidak perlu membaca dokumentasi mengenai java.awt ini, cukup di-import saja)
*/
5. Compile kode Anda, perbaiki setiap eror yang ada.
6. Apabila proses compile telah berhasil, ujilah pekerjaan Anda dengan cara membuat sebuah instance dari
Smiley. Jika gambar yang dihasilkan belum benar, ulangi langkah edit-compile-run sampai
menghasilkan gambar yang diinginkan.
Level 2
Modifikasi gambar tersebut dengan cara menambahkan mulut dan dimples (dua bulatan kecil di pinggir mulut).
Anda harus berhati-hati dalam merencanakan objek-objek yang Anda perlukan, serta method-method yang perlu dipanggil dalam rangka menghasilkan gambar yang benar. Ingat: berikan nama-nama yang representatif untuk setiap objek yang Anda buat.
Sebagai petunjuk: untuk menggambar mulut yang lengkap beserta dimples-nya, Anda memerlukan 4 buah objek AOval. Satu untuk mulut, satu untuk menutupi mulut, dan dua untuk dimples. Anda juga harus memperhatikan warna dan posisi dari masing-masing objek.
Checkpoint: Tunjukkan gambar dan kode yang dihasilkan.
Level 3
Modifikasi program yang Anda buat sedemikian rupa sehingga Anda dapat menekan tombol-tombol yang berfungsi untuk mengubah warna.
Pada level 3 ini, Anda harus menggunakan objek A3ButtonWindow yang berfungsi sebagai window tempat menempatkan objek muka, mata dan mulut (Anda tidak lagi menggunakan objek AWindow seperti di level 2). Untuk menggunakan A3ButtonWindow ini, pelajari dokumentasinya
Anda juga perlu memodifikasi kelas director Smiley ini dengan cara meng-ekstends kelas A3ButtonHandler. (extends akan dipelajari di kuliah yad)
Setelah Anda selesai membuat objek-objek yang diperlukan, langkah selanjutnya adlaan mendefinisikan method-method callback untuk setiap tombol, yaitu leftAction, midAction, dan rightAction.
Berikut adalah fungsi/perilaku dari ketiga tombol tersebut:
leftAction: mengubah warna mata menjadi biru, dan mulut menjadi merah
rightAction: mengubah warna muka menjadi pink
midAction: me-reset warna ke warna originalnya (muka kuning, mata dan mulut hitam) Berikut adalah skeleton yang bisa Anda pergunakan untuk memulai level 3 ini:
import aLibrary.*; import java.awt.*;
public class Smiley extends A3ButtonHandler{ // deklarasi variable-variabel yang digunakan // misal:
private A3ButtonWindow papanPermainan; public Smiley {
// instansiasi objek-objek yang diperlukan // misal:
papanPermainan = new A3ButtonWindow(this);
// note: penggunaan ‘this’ akan dipelajari di kuliah yad. // Panggil method-method dari objek-objek tsb
// misal:
papanPermainan.repaint(); }
// Definisikan method-method callback yang dimiliki oleh kelas A3ButtonWindow // misal:
public void leftAction (){
/* panggil method-method dari objek mata, mulut, maupun dimples untuk mengubah warna objek-objek tersebut */
// di akhir method ini, jangan lupa panggil: papanPermainan.repaint() }
//Sebelum di-compile, tambahkan juga method untuk midAction() dan rightAction() }
Checkpoint: tunjukan kode dan gambar yang dihasilkan.
Level 4 – ‘The game begins!’
Sekarang saatnya untuk memulai permainan dari praktikum ini!
Ide dasarnya adalah pada saat Anda menekan tombol-tombol, maka akan terjadi pertukaran warna (swap) muka, mata, dan mulut. Tujuan akhir permainan ini adalah untuk mencari jumlah minimum penekanan tombol untuk menghasilkan warna-warni yang diinginkan.
Untuk menukar warna dari dua objek, gunakan pola pertukaran dua variable (Swap pattern). Berikut contoh pertukaran dua variable:
nilaiX = 10 nilayY=20 temp = nilaiX nilaiX = nilaiY nilaY = temp
swapColor (AOval ovalSatu, AOval ovalDua), yang isinya menukar warna milik ovalSatu ke ovalDua
dan sebaliknya warna ovalDua ke ovalSatu.
Untuk menukarkan warna, Anda perlu membuat sebuah variable baru bertipe Color, kemudian gunakanlah method getColor untuk mendapatkan warna dari setiap objek, serta gunakanlah method setColor untuk mengubahnya. (Sekali lagi pelajari dokumentasi setiap kelas di aLibrary untuk penggunaan getColor dan setColor ini).
Ubahlah perilaku dari callback method (tombol), sebagai berikut: Change the callback methods so that they work as follows:
Tombol kiri: menukar warna mata kiri dengan warna muka
Tombol kanan: menukar warna mata kanan dan warna muka
Tombol middle: menukar warna mulut dengan warna muka Untuk menguji permainan ini, iisialiasi-lah objek-objek yang ada sebagai berikut:
Mata kiri merah Mata kanan hijau Mulut biru
Berapa kali tombol-tombol di-klik untuk menghasilkan warna sbb: Mata kiri biru
Mata kanan merah Mulut hijau
(solusi terbaik adalah 4 klik, Anda perlu bereksperimen terlebih dahulu)
Checkpoint: Tunjukkan kode dan hasil permainan Anda.
Level 5
Make the game a bit more interesting by adding an incentive to find the best solution.
Specifically, add another object to the face (an eyelid) to make it look like the eyes are closing. When you start the game, the eyes are fully open. Each time you click a button, make the eyelid move down by 10 pixels. Since the eyes are 80 pixels high, by the time you've clicked 8 times the eyes will be fully closed. The object of the game is to achieve the desired color configuration before the Smiley goes to sleep!
Checkpoint: Show a demonstrator your working game, together with an editor window showing the source code.
