Tutorial Pembuatan Typing Game

TUTORIAL MEMBUAT GAME “TYPING MASTER” SEDERHANA

Pada tutorial kali ini saya akan menjelaskan langkah demi langkah pembuatan game ini. Sebelum saya menjelaskan tentang cara pembuatan game ini alangkah baiknya jika saya memberikan penjelasan mengenai latar belakang dan tujuan dibuatnya game ini.

A. Latar Belakang

Dewasa ini sering kali orang meremehkan bahwa keahlian dalam mengetik merupakan suatu keahlian yang kurang dibutuhkan dan sifatnya hanya optional saja. Padahal dalam dunia yang berbasis teknologi, khususnya IT keahlian mengetik dengan cepat sangat dibutuhkan untuk menyelesaikan suatu tugas-tugas yang menuntut waktu yang cukup cepat dalam penyelesaiannya. Apalagi jika kita orang Indonesia yang sudah terbiasa dengan bahasa Indonesianya, maka untuk mengetik menggunakan bahasa Inggris akan sangat kesulitan dan sangat kaku dalam penyelesaiannya. Diperkukan suatu metode yang dapat melatih kecepatan tangan kita untuk mengetik dengan lancar.

B. Tujuan

Dengan diciptakannya suatu media untuk melatih kecepatan tangan dalam melatih kecepatan mengetik maka diharapkan pengguna media ini (game Typing Master) dapat melatih kecepatan jari-jarinya dalam megetik dan bisa menyelesaikan tugas-tugas dengan baik dan cepat. Khusunya penulisan kata dalam bahasa Inggris.

Document seri tutorial game Typing Master sederhana by Aktor Hariry, Andika Gadhing G, Subhan MW

C. Tutorial Pembuatan

Pada sesi tutorial kali ini saya aka menjelaskan bagaimana game Typing Master ini dibuat dengan menggunakan bahasa pemrograman Java dengan menggunakan IDE Netbeans versi 6.5 Oke untuk mempersingkat waktu langsung saja saya mulai.

Untuk membuat game ini dibutuhkan 4 class. Yang pertama adalah class MainForm.java class ini berfungsi sebagai class utama yang akan menampilkan game ini atau class ini adalah Main classnya. Yang ke dua adalah class AnimasiRandomBalon.java, class ini bisa disebut juga sebagai class engine gamenya karena semua perintah atau method yang berfungsi untuk menjalankan aksi game ada pada class ini. Yang ketiga adalah class LoopSoundClas.java, class ini berfungsi untuk memberikan backsound dan juga suara-suara yang dibutuhkan pada game ini. Dan yang terakhir adalah class About.java yang berfungsi untuk menampilkan profile pembuat game ini maupun profile tentang game itu sendiri. Oke deh sudah cukup dengan penjelasan secara global masalah game ini, dan sekarang langsung saja kita ke proses pembuatannya.

Yang pertama kita design dulu class MainForm.java dengan menggunakan GUI agar memudahkan kita. Lihat pada gambar di bawah ini, designlah persis seperti gambar di bawah ini.

Untuk membuat gambar background seperti di atas bisa anda lakukan dengan menggunakan Jlabel, kemudian kosongkan text pada Jlabel tersebut, setelah text kosong cari property icon kemudian pilih gambar sesuai dengan keinginan anda. Setelah gambar di load dari sourcenya lakukan penyesuaian terhadap gambar tersebut (resizing). Untuk source gambar sebaiknya dibuatkan package tersendiri agar pengaksesan sourcenya tidak rumit.


Width : 272Height : 325

Gunakan pallete yang sudah disediakan oleh Netbeans untuk mempermudah anda dalam mendesign form seperti di atas. Umumnya terletak di sebelah kanan pada Netbeans.

Jika anda bingung dengan susunan komponen-komponennya anda dapat melihat susunan itu pada bagian Inspector seperti pada gambar berikut :

Pada menu Game, tambahkan submenu exit dan pada menu Help tambahkan submenu About. Kemudian buatlah satu tampilan JDialogForm untuk membuat form About.java. Caranya adalah dengan mengklik kanan pada package yang dibuat kemudian new – pilh JDialog Form, jika tidak ada pilihan JdialogForm klik kanan pada package kemudian pilih new – other pilih Swing GUI Form kemudian pilih JdialogForm seperti gambar berikut ini :


setelah selesai memilih JDialogForm kemudian isikan nama class tersebut dengan nam About.java setelah itu designlah penampilannya seperti pada gambar berikut ini :

untuk design form About.java silahkan mendesign sesuai dengan keinginan anda. Untuk warna dan tipe hurufnya bisa di sesuaikan dengan keinginan anda dan hal tersebut bisa dilakukan menggunakan property pada font tersebut.

Setelah selesai mendesign tapmpilannya sekarang kita akan memberikan fungsi pemanggilan form tersebut dari menu Game dan Help. Pada menu Game – exit game berikan perintah dengan cara klik kanan menu exit game – kemudian pilih event – Action – actionPerformed kemudian tampilan akan berubah pada model source code. Pada bagian source code tersebut silahkan di isikan perintah sebagai berikut :

System.exit(0);

perintah di atas berfungsi untuk menutup aplikasi game ini.Kemudian dengan langkah yang sama seperti pada langkah di atas berikan perintah terhadap menu About dan pada bagian source code silahkan memberikan perintah sebagai berikut :

new About(this, true).setVisible(true);

Perintah di atas berfungsi untuk memanggil form About dan parameter method setVisible(true) diberikan nilai true bertujuan untuk menampilkan Form yang dibuat menggunakan JDialogForm tadi.


Nah untuk pembuatan menu help dan Game uda beres dan sudah diberi fungsi. Sekarang langkah selanjutnya kita akan membuat engine gamenya...:)

Untuk membuat Engine game ini dibutuhkan satu class lagi yang bernama AnimasiRandomBalon.java. Cara membuatnya adalah klik kanan pada package – pilih new – Java class, kemudian beri nama class, maka class baru telah terbuat. Tapi sebelum kita melakukan pengkodean (coding) alangkah baiknya kita siapkan terlebih dahulu file-file gambar dan file suara yang akan kita gunakan di dalam game kita ini. Pada game Typing Master sederhana ini saya menyediakan gambar sejumlah 50 gambar dengan text yang berbeda-beda pada setiap gambar. Saya menggunakan Photoshop CS 3 untuk melakukan pengeditan gambar ini dengan tipe gambar PNG. Ukuran gambar yang saya buat di sini adalah 68 x 90 dan gambar ini saya tempatkan pada package tersendiri bernama pic. Kemudian untuk file suara saya menyediakan beberapa file suara di antaranya adalah file suara untuk backsound, ledakan dan applause. Dan file suara yang saya sebutkan tadi saya menaruhnya pada package tersendiri bernama Sound.

Oke setelah kita sudah menyiapkan semua file yang dibutuhkan untuk membuat game ini sekarang mari kita melakukan coding pada game ini. Buka lagi class AnimasiRandomBalon.java yang sudah kita buat tadi.

Deklarasi VariableYang pertama yang harus kita lakukan adalah pendeklarasian variabel seperti pada potongan source code berikut ini : package GameManager;

import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Image;import javax.swing.ImageIcon;import javax.swing.JOptionPane;import javax.swing.JPanel;

/** * * @author aktor */public class AnimasiRandomBalon extends JPanel implements Runnable {

private int yImage; private int vy; private int height; private int width; private Thread animasi; private boolean isPlay = true; private Image gbr, balon; private LoopSoundClass lsound; private int delay; private int score; int lebarGbr; int tinggiGbr; int nama; int x; int level = 1;


String huruf[] = {"apple", "bag", "banana", "bed", "belt", "window", "water", "wardrobe", "trash", "towel", "tie", "table", "stove", "spoon", "shampoo", "refrigerator", "rabbit", "pillow", "paper", "padlock", "necklace", "mirror", "lamp", "key" , "jacket", "ink", "hedge", "hat", "guitar", "fork", "flatiron", "earring", "door", "dictionary", "cycle", "cow", "cloth", "chair", "car", "candle", "cake", "cable", "building", "brush", "broom", "bracelet", "bottle", "book", "blanket", "bird"};

Pada bagian yang pertama kita harus mengimport dulu class2 yang dibutuhkan, pada kasus ini kita membutuhkan banyak class dari swing dan awt. Kemudian karena di dalam source code ini menggunakan Thread maka kita harus mengimplement Runnable.

1. Deklarasi yang pertama (private int yImage) digunakan untuk mendeklarasikan posisi y pada gambar.

2. Deklarasi yang kedua ini (vy) akan menentukan kecepatan objek bergerak terhadap sumbu y3. Deklarasi ke tiga (private int height dan width) digunakan untuk menentukan nilai width dan

heightnya.4. Deklarasi keempat adalah deklarasi untuk Thread.5. Deklarasi yang kelima ini adalah deklarasi bertipe boolean yang berfungsi untuk mengontrol

dan menjalankan game ini.6. Deklarasi keenam adalah deklarasi untuk menggambar image pada scrollpane.7. private LoopSoundClass lsound; adalah deklarasi untuk load sound dari class

LoopSound.java8. Deklarasi delay untuk menentukan delay dari Thread, deklarasi score digunakan untuk

menentukan score awal, nama adalah deklarasi awal untuk nama file yang akan di load.9. Deklarasi x adalah untuk menentukan posisi x pada objek, dan deklarasi score adalah

inisialisasi score awal yang diberikan.10. Yang terakhir adalah deklarasi array yang tipe datanya adalah String dan nama deklarasi

tersebut adalah huruf. Di dalam array tersebut berisi semua kata-kata yang akan di load oleh game ini.

Pembuatan KonstruktorLangkah yang kedua adalah pembuatan konstruktor dan apa saja yang ada di dalam konstruktor tersebut : public AnimasiRandomBalon(int width, int height, LoopSoundClass lsound) { this.height = height; this.width = width; this.lsound = lsound; nama = 1; x = (int) (Math.random() * 200); start(); System.out.println("Heigth : " + height); vy = 1; delay = 20; score = 0; }

Pada bagian konstruktor ini kita akan memberikan nilai awal pada deklarasi yang sudah dibuat tadi. Pada konstruktor ini juga terdapat variable reference bertipe argument yang memberikan nilai terhadap weight dan height juga termasuk soundnya. Kemudian jika kita lihat x = (int) (Math.random() * 200); code di atas berfungsi untuk merandom atau mengacak posisi X dari objek yang akan ditampilkan pada Jscroll Pane.. kemudian pada konstruktor terdapat method start(); yang artinya method start itu akan di jalankan selama proses berlanjut...kemudian pada konstruktor vy di beri nilai awal 1, delay juga diberi nilai 20 dan juga score kita inisialisasi awal adalah 0.


Memanggil GambarOkey setelah kita selesai dengan konstruktor sekarang kita akan bermain-main dengan

gambar. Di sini terdapat beberapa method yang berfungsi utuk menggambar suatu obyek (gambar) yang di load dari file. Pada method ini kita menggunakan class Image dari package yang sudah di sediakan oleh java dan agar kita bisa menggunakan class ini tentunya kita harus mengimport dari package java.awt.Image terlebih dahulu. Setelah itu pertama kita akan menggambar gambar backgroundnya terlebih dahulu dengan menggunakan class Image. Dan berikut ini adalah source codenya : public Image image() { try { ImageIcon image = new ImageIcon(this.getClass().getResource("/pic/back.png")); gbr = image.getImage(); return gbr; } catch (Exception e) { System.out.println("Gambar tidak ada"); return null; }}

Dari source code di atas kita telah membuat method image() dari class Image, kemudian untuk meload gambar tersebut kita taruh di dalam blok try-catch. Di dalam blok try-catch tersebut ada class ImageIcon dimana class tersebut sebagai wadah untuk menampilkan gambar atau media untuk menggambar icon dari file gambar kemudian class Image sebagai penampung dari class ImageIcon. Kemudian kita membuat objek dari class ImageIcon seperti pada potongan program berkut ini :

ImageIcon image = new ImageIcon(this.getClass().getResource("/pic/back.png"));

Pada potongan source code di atas kita menginstansiasi class ImageIcon dengan objek image kemudian yang ada di dalam parameter tersebut adalah return value yang merujuk langsung kepada objek gambarnya. Kemudian pada objek gbr dari class Image yang sudah kita deklarasikan di awal tadi kita ambil gambar tersebut dengan cara gbr = image.getImage(); nah di sinilah kita baru akan menampung gambar yang di ambil dengan menggunakan class ImageIcon kemudian di tampung ke dalam class Image setelah itu baru kita berikan return value dari objek gbr tadi return gbr; dan pada blok catch kita akan menampilkan sebuah pesan apabila gagal dalam pengaksesan gambar.

Kemudian setelah kita meload gambar background sekarang kita akan lanjut untuk meload gambar baloon yang sudah kita sediakan sebanyak 50 gambar, dan perlu diingat bahwa gambar harus diberi file name berupa angka 1-50 karena ini akan berguna untuk merandom jumlah balon yang akan di keluarkan pada JScrollPane . Pada method ini sebenarnya sama persis dengan method untuk meload gambar background di atas, secara struktural juga sama persis. Perbedaannya adalah nilai yang dikembalikan pada reference variable nya tidak langsung merujuk pada file gambar.

public Image imageBalon() { try { ImageIcon baloon = new ImageIcon(this.getClass().getResource("/pic/" + nama + ".png")); balon = baloon.getImage(); lebarGbr = baloon.getIconWidth(); tinggiGbr = baloon.getIconHeight(); return balon; } catch (Exception e) { return null; } }


Kemudian pada source di atas hanya di tambahkan lebarGbr dan tinggiGbr yang berfungsi untuk mengambil brapa panjang dan lebar dari gambar yang di load tersebut.

Memposisikan dan Menggambar GambarSetelah selesai dengan meload gambar background dan gambar baloon, sekarang kita akan

melanjutkan dengan menggambarnya pada class Graphics. Di ibaratkan class Graphics adalah sebuah media penampung untuk meletakkan gambar yang sudah kita load tadi dari file. Nah sekarang setelah gambar tadi sudah terambil tinggal kita letakkan saja pada medianya. Cara meletakkan gambar ini pada media tersebut kita menggunakan method yang diberi nama drawImage(); method ini adalah method bawaan atau method yang sudah disediakan oleh class Graphics dan berfungsi untuk meletakkan gambar yang sudah kita load dari file tadi. Berikut adalah potongan programnya :

public void gambarBackground(Graphics g) { if (image() != null) { g.drawImage(image(), 0, 0, this); } }

public void gambarBalon(Graphics g) { if (imageBalon() != null) { g.drawImage(imageBalon(), x, yImage, this);

} }

Pada method di atas kita meletakkan gambar dengan menggunakan method drawImage(); tapi sebelum gambar tersebut diletakkan pada posisinya terlebih dahulu ada kondisi pengecekan yaitu if(image() != null){} yang artinya adalah jika gambar tidak kondisi null (pengambilan gambar berhasil/gambar ada) maka barulah kita memposisikan gambar tersebut dengan menggunakan method drawImage(); dengan property atau variable referencenya adalah (gambar, int posisiX, int posisiY, observer). Pada code di atas masing-masing gambar Background dan gambar balon sudah dikerjakan oleh method sebelumnya yaitu method image() dan imageBalon() sehingga pada property yang pertama kita isikan dengan nama method yang sudah menghandle pengaksesan gambar. Kemudian pada method gambarBalon() posisi x dan y sudah ditentukan di atas tadi, tapi untuk posisi x-nya nantinya akan dirandom sehingga tidak hanya muncul dari posisi yang sama saja.

Nah kemudian masih tetap dengan acara gambar-menggambar, namun sekarang kita akan menggambar pada bagian scoring. Pada penggambaran scoring ini kita hanya memerlukan satu method saja dan di sini saya memberikan nama method cetakScore(); pada method ini kita juga bisa mengatur warna dan jenis font yang kita inginkan. Berikut adalah potongan code :

public void cetakScore(Graphics g) { g.setFont(new Font("Arial", Font.BOLD, 14)); g.setColor(Color.GREEN); g.drawString("Score : ", 5, 300); g.setColor(Color.RED); g.drawString(getScore() + "", 70, 300); }

Pada potongan code di atas kita bisa mengatur font dengan menggunakan method setFont(new Font(“Arial”, Font.BOLD, 14)); dan propertinya adalah jenis huruf, pengaturan huruf dan size. Kemudian untuk mengatur warna kita menggunakan method setColor(Color.GREEN); untuk memberi warna hijau dan method drawString(“Score : ” ,5,300); dengan properti string tulisan, posisiX, posisiY.


Kemudian untuk scorenya agar bisa dinamis kita perlu membuat method getScore() untuk mencetak perubahan score dan itu akan kita bahas setelah ini. Kemudian setelah semua sudah digambar dan diletakkan pada bagian yang sudah di tentukan sekarang saatnya kita untuk menampilkannya dalam layar atau JScrollPane, caranya adalah kita harus mengoverride method paint() yang dimiliki oleh class Graphics kemudian di dalamnya kita taruh method-method yang sudah kita buat untuk memposisikan gambar tadi, caranya adalah :

public void paint(Graphics g) { gambarBackground(g); gambarBalon(g); cetakScore((Graphics) g); }

Dengan seperti itu maka peletakan gambar yang sudah kita buat tadi akan ditampilkan dengan cara memanggil method-method tersebut ke dalam method paint() seperti di atas.

ScoringNah sekarang kita akan membuat agar nilai score dinamis (berubah sesuai ketentuan).

Langsung saja kita buat methodnya. Untuk membuat scoring method yang kita butuhkan adalah setScore(), getScore(), addScore(), minusScore(). setScore() berfungsi untuk mengatur / mengeset score, getScore() berfungsi untuk mengambil score, minusScore() berfungsi untuk mengurangi score dan addScore() berfungsi untuk menambahkan score. Berikut adalah potongan codenya :

public int getScore() { return score; }

public void setScore(int score) { this.score = score; }

public void addScore(int i) { score += i; }

public void minusScore(int i) { score -= i; }

Animasi GerakanSekarang sudah saatnya kita untuk membuat animasi dari balon yang sudah kita load dari

file tadi. Kita akan buat animasinya bergerak dari bawah ke atas dan berikut ini adalah potongan codenya :

public void gerakan() { yImage -= vy;

if (yImage < -(tinggiGbr / 2)) { endGame(); }

if (score > 400 && level == 1) { naikLevel();

} else if (score > 1400 && level == 2) {


naikLevel(); vy = vy * 2; } else if (score > 1900 && level == 3) { lsound.stop(); lsound.stopBack(); lsound.play("applause.wav"); lsound.buhClip.start(); lsound.buhClip.loop(5); JOptionPane.showMessageDialog(null, "<html><font color=#FF0000>Selamat anda telah menyelesaikan game ini !!!</font></html>"); System.exit(1); vy = vy * 3; } }

Sebenarnya pada code di atas fungsi untuk menggerakkan gambar dari bawah ke atas hanya terletak pada yImage -= vy; Pada potongan code di samping posisi y pada gambar akan dikurangi terus-menerus hingga gambar tidak terlihat / sampai pada batas atas. Kemudian pada code di atas terdapat satu kondisi if (yImage < -(tinggiGbr / 2)) {endGame();} yang artinya adalah jika posisi y pada gambar lebih besar dari separoh tinggiGbr (sudah di deklarasikan di atas) maka akan menjalankan method endGame(). Method endGame ini adalah method yang berfungsi untuk menghentikan permainan dan memberikan suatu konfirmasi apakah user menginginkan untuk mengulang atau berhenti dari permainan. Berikut adalah code dari method endGame()

public void endGame() { int i = JOptionPane.showConfirmDialog(null, "GAME OVER!! " + "\n" + " 'Yes' untuk new game, 'No' keluar game", "Konfirmasi", +JOptionPane.YES_NO_OPTION); if (i == JOptionPane.YES_OPTION) { score = 0; reset(); vy = 1; level = 1; } if (i == JOptionPane.NO_OPTION) { System.exit(1); } }

Pada potongan source code di atas jika user tidak bisa mengetik nama huruf yang tampil pada layar hingga masuk pada kondisi if (yImage < -(tinggiGbr / 2)) {endGame();} maka gambar sudah sampai pada batas atas dan user akan dinyatakan kalah dan mehod endGame() ini lah yang akan dipaggil dan memberikan satu pesan konfirmasi apakah user ingin mencoba lagi atau tidak. Jika dijawab “Yes” maka score akan direset menjadi nol lagi dan menjalankan method reset() → akan dibahas nanti, kemudian nilai vy dan nilai level juga dikembalikan ke nilai awal. Jika user memilih “No” maka program akan ditutup.

Kemudian pada method gerakan() ada kondisi yang ke dua yaitu if (score > 400 && level == 1){naikLevel(); } dimana method ini akan berfungsi untuk menaikkan level dari user dengan acuan score yang sudah dicapai oleh user terpenuhi baru user bisa naik level. Untuk level pada game ini kami memberikan 3 level saja dan masing2 level memiliki acuan score yang berbeda-beda dan kecepatan animasi yang berbeda juga (vy). Jika user bisa menyelesaikan game ini hingga tahap atau level ke 3 maka suara dari ledakan dan backsound akan berhenti dan digantikan dengan suara applause dan akan ditampilkan satu pesan selamat karena telah menyelesaikan permainan ini. Di sini yang mengatur soundnya adalah objek yang dibuat dari class LoopSoundClas.java berikut adalah potongan code dari method naikLevel()


public void naikLevel() { int i = JOptionPane.showConfirmDialog(null, "Selamat anda telah menyelesaikan level " + level + "\n Tekan 'Yes' untuk Melanjutkan 'No' untuk keluar", "Confirmasi", JOptionPane.YES_NO_OPTION); if (i == JOptionPane.YES_OPTION) { level++; System.out.println("Pilih yes"); } if (i == JOptionPane.NO_OPTION) { System.exit(1); } }

Pada method naikLevel() di atas hanya akan menampilkan suatu pesan konfirmasi untuk mekanjutkan ke level selanjutnya. Jika user memilih “Yes” maka game akan diteruskan tapi jika user memilih “No” maka game akan dihentikan. Kemudian pada method gerakan() tadi terdapat method reset(). Method reset() adalah method yang berguna untuk mengembalikan gambar pada posisi awal ketika user sudah selesai mengetikkan kata2 yang tertera pada balon yang tampil. Begitu juga ketika user gagal dalam menyelesaikan level, maka jika user ingin mengulang maka method inilah yang akan dipanggil. Berikut adalah code dari method reset()

public void reset() { nama = (int) (Math.random() * 49 + 1); yImage = height;

x = (int) (Math.random() * (200)); System.out.println("Width = " + width); System.out.println("gbWidth = " + lebarGbr); System.out.println("Besar Heigth = " + height); System.out.println("Hasil X = " + x); System.out.println("Pada Image = " + nama + ".png"); }

Pada method reset() ini kita akan merandom pengambilan dari file-file yang sudah kita siapkan. Karena di sini jumlahnya adalah 50 gambar maka untuk randomnya bisa ditulis seperti berikut ini : nama = (int) (Math.random() * 49 + 1); dan posisi yImage disamakan dengan posisi height atau tinggi dari JScrollPane atau gambar akan muncul dari bawah. Dan yang terakhir adalah posisi x yang dirandom sehingga gambar tidak hanya muncul dari satu tempat saja.

ThreadPada bagian ini kita akan mengatur masalah Thread dari prorgam yang kita buat. Pertama

kita membuat method start() yang berfungsi sebagai awalan untuk menjalankan game ini dan memeriksa apakah kondisi Thread null, jika ya maka Thread dijalankan. Berikut adalah codenya :

public void start() { yImage = height; if (animasi == null) { animasi = new Thread(this); animasi.start(); } }

Kemudian kita harus menuliskan implements dari Runnable seperti pada code berikut :

public void run() { while (isPlay == true) { repaint();


gerakan(); try { Thread.sleep(delay); } catch (InterruptedException e) { System.out.println("Error reading image"); } } }

Pada method run() di atas ada kondisi selama isPlay bernilai true maka akan menjalankan method repaint(). Method repaint() berfungsi untuk penggambaran objek setiap perubahan posisi per pixelnya. Kemudian menjalankan method gerakan(). Sleep pada Thread di diisi dengan delay dimana delay sudah diberikan nilai pada bagian konstruktor.

Demikian penjelasan dari class AnimasiRandomBalon.java dan di bawah ini adalah source code lengkap dari class tersebut :

package GameManager;

import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Image;import javax.swing.ImageIcon;import javax.swing.JOptionPane;import javax.swing.JPanel;

/** * * @author aktor */public class AnimasiRandomBalon extends JPanel implements Runnable {

private int yImage; private int vy; private int height; private int width; private Thread animasi; private boolean isPlay = true; private Image gbr, balon; private LoopSoundClass lsound; private int delay; private int score; int lebarGbr; int tinggiGbr; int nama; int x; int level = 1; String huruf[] = {"apple", "bag", "banana", "bed", "belt", "window", "water", "wardrobe", "trash", "towel", "tie", "table", "stove", "spoon", "shampoo", "refrigerator", "rabbit", "pillow", "paper", "padlock", "necklace", "mirror", "lamp", "key" , "jacket", "ink", "hedge", "hat", "guitar", "fork", "flatiron", "earring", "door", "dictionary", "cycle", "cow", "cloth", "chair", "car", "candle", "cake", "cable", "building", "brush", "broom", "bracelet", "bottle", "book", "blanket", "bird"};

public AnimasiRandomBalon(int width, int height, LoopSoundClass lsound) { this.height = height; this.width = width; this.lsound = lsound; nama = 1;


x = (int) (Math.random() * 200); start(); System.out.println("Heigth : " + height); vy = 1; delay = 20; score = 0; }

public Image image() { try { ImageIcon image = new ImageIcon(this.getClass().getResource("/pic/back.png")); gbr = image.getImage(); return gbr; } catch (Exception e) { System.out.println("Gambar tidak ada"); return null; } }

public Image imageBalon() { try { ImageIcon baloon = new ImageIcon(this.getClass().getResource("/pic/" + nama + ".png")); balon = baloon.getImage(); lebarGbr = baloon.getIconWidth(); tinggiGbr = baloon.getIconHeight(); return balon; } catch (Exception e) { return null; } }

public void gambarBackground(Graphics g) { if (image() != null) { g.drawImage(image(), 0, 0, this); } }

public void gambarBalon(Graphics g) { if (imageBalon() != null) { g.drawImage(imageBalon(), x, yImage, this);

} }

public void cetakScore(Graphics g) { g.setFont(new Font("Arial", Font.BOLD, 14)); g.setColor(Color.GREEN); g.drawString("Score : ", 5, 300); g.setColor(Color.RED); g.drawString(getScore() + "", 70, 300); }

@Override public void paint(Graphics g) { gambarBackground(g); gambarBalon(g); cetakScore((Graphics) g); }

public int getScore() { return score;


}

public void setScore(int score) { this.score = score; }

public void addScore(int i) { score += i; }

public void minusScore(int i) { score -= i; }

public void gerakan() { yImage -= vy;

if (yImage < -(tinggiGbr / 2)) { endGame(); }

if (score > 400 && level == 1) { naikLevel();

} else if (score > 1400 && level == 2) { naikLevel(); vy = vy * 2; } else if (score > 1900 && level == 3) { lsound.stop(); lsound.stopBack(); lsound.play("applause.wav"); lsound.buhClip.start(); lsound.buhClip.loop(5); JOptionPane.showMessageDialog(null, "<html><font color=#FF0000>Selamat anda telah menyelesaikan game ini !!!</font></html>"); System.exit(1); vy = vy * 3; } }

public void naikLevel() { int i = JOptionPane.showConfirmDialog(null, "Selamat anda telah menyelesaikan level " + level + "\n Tekan 'Yes' untuk Melanjutkan 'No' untuk keluar", "Confirmasi", JOptionPane.YES_NO_OPTION); if (i == JOptionPane.YES_OPTION) { level++; System.out.println("Pilih yes"); } if (i == JOptionPane.NO_OPTION) { System.exit(1); } }

public void endGame() { int i = JOptionPane.showConfirmDialog(null, "GAME OVER!! " + "\n" + " 'Yes' untuk new game, 'No' keluar game", "Konfirmasi", +JOptionPane.YES_NO_OPTION); if (i == JOptionPane.YES_OPTION) { score = 0; reset(); vy = 1; level = 1; }


if (i == JOptionPane.NO_OPTION) { System.exit(1); } }

public void reset() { nama = (int) (Math.random() * 49 + 1); yImage = height;

x = (int) (Math.random() * (200)); System.out.println("Width = " + width); System.out.println("gbWidth = " + lebarGbr); System.out.println("Besar Heigth = " + height); System.out.println("Hasil X = " + x); System.out.println("Pada Image = " + nama + ".png"); }

public void start() { yImage = height; if (animasi == null) { animasi = new Thread(this); animasi.start(); } } public void run() { while (isPlay == true) { repaint(); gerakan(); try { Thread.sleep(delay); } catch (InterruptedException e) { System.out.println("Error reading image"); } } }}


Class LoopSoundClass.javaKali ini kita akan membahas tentang class yang ke dua, yaitu class yang berfungsi untuk

meload suara dari file. Dalam class ini algoritma dan struktur pemrogramannya sama persis hanya kita bedakan nama dari methodnya saja. Dalam class ini terdapat 4 method yaitu method play() dan playBackSound(), yaitu method yang berfungsi memanggil background suara dan suara ledakan. Selanjutnya adalah method stop() dan stopBack() yang berfungsi untuk menghentikan suara. Berikut adalah source code lengkap dari class LoopSoundClass.java

package GameManager;

/** * * @author aktor */import java.io.IOException;import java.net.URL;import javax.sound.sampled.*;

/** * * @author Aktor */public class LoopSoundClass { Clip buhClip,backSound;

public void play(String nama) { AudioInputStream ais = null; try { URL soundURL = this.getClass().getResource("/Sound/"+nama+""); Line.Info linfo = new Line.Info(Clip.class); Line line = AudioSystem.getLine(linfo); buhClip = (Clip) line; ais = AudioSystem.getAudioInputStream(soundURL); buhClip.open(ais); buhClip.setFramePosition(0); } catch (LineUnavailableException ex) { System.out.println("Data link tidak lengkap"); } catch (UnsupportedAudioFileException ex) { System.out.println("Audio tidak disuport"); } catch (IOException ex) { System.out.println("Erorr dalam pembacaan file"); } }

public void playBackSound(String nama) { AudioInputStream ais = null; try { URL soundURL = this.getClass().getResource("/Sound/"+nama+""); Line.Info linfo = new Line.Info(Clip.class); Line line = AudioSystem.getLine(linfo); backSound = (Clip) line; ais = AudioSystem.getAudioInputStream(soundURL); backSound.open(ais); backSound.setFramePosition(0); backSound.start(); backSound.loop(100); } catch (LineUnavailableException ex) { System.out.println("Data link tidak lengkap"); } catch (UnsupportedAudioFileException ex) {


System.out.println("Audio tidak disuport"); } catch (IOException ex) { System.out.println("Erorr dalam pembacaan file"); } }

public void stopBack(){ backSound.stop(); } public void stop(){ buhClip.stop(); }}


Class MainForm.javaPada class MainForm.java ini kita hanya perlu memanggil fungsi-fungsi yang ada pada class

AnimasiRandomBalon.java dan LoopSoundClas.java. Tentunya untuk bisa memanggil fungsi dari class tersebut kita harus mendeklarasikan class tersebut dan membuat objek untuk class tersebut. Yang pertama deklarasi class :

AnimasiRandomBalon game; String com; LoopSoundClass ls;

Dari code di atas kita bisa melihat bahwa kita sudah mendeklarasikan dan membuat objek untuk class AnimasiRandomBalon dan LoopSoundClass dan kita mendeklarasikan com bertipe String. Kemudian setelah tahap deklarasi sudah selesai, maka kita lanjutkan ke pembuatan konstruktor, seperti berikut ini:

public MainForm() { initComponents(); ls = new LoopSoundClass(); game = new AnimasiRandomBalon(ScrollPane1.getWidth(), ScrollPane1.getHeight(), ls); game.repaint(); ScrollPane1.setViewportView(game); System.out.println("Nama String : "+game.huruf[game.nama]); tfInput.setFocusable(true); ls.playBackSound("Lets_Go_2.wav"); }

pada konstruktor kita instansiasi class LoopSoundClass ls = new LoopSoundClass(); kemudian kita instansiasi class AnimasiRandomBalon dengan reference variable seperti berikut : ls = new LoopSoundClass(); kemudian game.repaint(); ini berfungsi untuk penggambaran ulang pada setiap perpidahan objek. Selanjutnya adalah Scrollpane1.setViewportView(game); bertujuan agar game bisa tampil pada Scrollpane. Kemudian tfInput.setFocusable(true); berfungsi untuk meletakkan cursor agar selalu fokus pada textfield. Dan yang terakhir adalah ls.playBackSound("Lets_Go_2.wav"); yang merupakan nilai atau file suara yang harus dijalankan selama game sedang dimainkan.

Setelah membuat konstruktor, selanjutnya kita akan memberikan fungsi terhadap textfield yang ada pada design. Caranya adalah dengan klik kanan pada textfield tersebut, kemudian pilih Events lalu pilih action dan actionPerformed. Setelah itu akan muncul source mode dan ketikkan code seperti di bawah ini:

private void tfInputActionPerformed(java.awt.event.ActionEvent evt) { com = game.huruf[game.nama-1]; String te = tfInput.getText();

String baru1 = com.toLowerCase(); String baru2 = te.toLowerCase();

System.out.println("Gambar = "+baru1); System.out.println("Jawab = "+baru2); System.out.println("Benar");

if (baru1.compareTo(baru2)==0) { ls.play("Explosions_3 [High quality].wav"); ls.buhClip.start();


System.out.println("Benar Tekan"); game.reset(); game.addScore(100); tfInput.setText(""); }else{ tfInput.setText(""); game.minusScore(50); }}

com = game.huruf[game.nama-1]; ini berfungsi untuk mengambil nama-nama dari file yang sudah disediakan. Objek dari class AnimasiRandomBalon digunakan untuk mengakses variable huruf yang bertipekan array. Di sana untuk pengaksesan nama menggunakan [game.nama-1] sengaja dikurangi dengan satu karena index array berjalan dari nol sedangkan filename pada file gambar dimulai dari 1 kemudian ditampung dalam variable bernama com yang tipenya adalah String. String te = tfInput.getText(); digunakan untuk menampung inputan dari textfield. String baru1 = com.toLowerCase(); Digunakan untuk mengkonversi filename yang ada di variable com menjadi huruf kecil semua sedangkan String baru2 = te.toLowerCase(); juga digunakan untuk mengkonversi inputan yang dari textfield agar menjadi huruf kecil semua. Setelah konversi selesai kita akan memberikan satu kondisi yang berfungsi untuk membandingkan antara inputan yang diberikan user dengan gambar yang muncul caranya adalah sebagai berikut :

if (baru1.compareTo(baru2)==0) { ls.play("Explosions_3 [High quality].wav"); ls.buhClip.start(); System.out.println("Benar Tekan"); game.reset(); game.addScore(100); tfInput.setText(""); }else{ tfInput.setText(""); game.minusScore(50); }

Code di atas menjelaskan bahwa jika nama yang ada di variable com yang sudah dikonversi dan di tampung ke dalam variable baru1 dan dibandingkan dengan imputan dari textfilel yang sudah dikonversi dan ditampung ke dalam variabel baru2 sama dengan 0 atau hasilnya sama maka objek dari class LoopSoundClass akan menjalankan method play() dengan filename suara bernama Explosions_3 [High quality].wav atau suara ledakan. Dan akan bersuara ketika atau diputar ketika objek dari class LoopSoundClass sudah di start ls.buhClip.start(); itu artinya user mengetikkan kata-kata yang benar kemudian game di reset lagi dengan cara memanggil method reset() dan akan memberikan score sejumlah 100 untuk tiap kali benar kemudian textfield di reset atau dibersihkan. Jika masuk pada kondisi salah maka textfield akan dibersihkan dan memanggil method minusScore() dan begitu seterusnya.

Selanjutnya kita akan memberikan fungsi terhadap comboBox yang sudah kita design. Caranya sama seperti kita memberikan fungsi terhadap textfield di atas. Kemudian pada bagian source code isikan code sebagai berikut : private void chooseSoundActionPerformed(java.awt.event.ActionEvent evt) { if(chooseSound.getSelectedIndex()==0){ ls.playBackSound("Lets_Go_2.wav"); }else if(chooseSound.getSelectedIndex()==1){ ls.stopBack(); } }


Pada source code di atas merupakan satu pilihan bagi user. Jikan memilih menggunakan sound maka akan menjalankan sound dengan file name Lets_Go_2.wav jika memilih tidak menggunakan sound maka sound akan di stop.

Berikut ini adalah source code lengkap untuk class MainForm.java

package GameManager;/** * * @author aktor */public class MainForm extends javax.swing.JFrame {

/** Creates new form MainForm */ AnimasiRandomBalon game; String com; LoopSoundClass ls; public MainForm() { initComponents(); ls = new LoopSoundClass(); game = new AnimasiRandomBalon(ScrollPane1.getWidth(), ScrollPane1.getHeight(), ls); game.repaint(); ScrollPane1.setViewportView(game); System.out.println("Nama String : "+game.huruf[game.nama]); tfInput.setFocusable(true); ls.playBackSound("Lets_Go_2.wav"); }

/** This method is called from within the constructor to * initialize the form. * WARNING: Do NOT modify this code. The content of this method is * always regenerated by the Form Editor. */ @SuppressWarnings("unchecked") // <editor-fold defaultstate="collapsed" desc="Generated Code"> private void initComponents() {

jLayeredPane1 = new javax.swing.JLayeredPane(); chooseSound = new javax.swing.JComboBox(); tfInput = new javax.swing.JTextField(); LabelJudul = new javax.swing.JLabel(); ScrollPane1 = new javax.swing.JScrollPane(); LabelBackground = new javax.swing.JLabel(); jMenuBar1 = new javax.swing.JMenuBar(); jMenu1 = new javax.swing.JMenu(); jMenuItem4 = new javax.swing.JMenuItem(); jMenu2 = new javax.swing.JMenu(); jMenuItem5 = new javax.swing.JMenuItem();

setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setTitle("Typing Master Game"); setBackground(new java.awt.Color(204, 204, 255)); setBounds(new java.awt.Rectangle(460, 100, 0, 0)); setResizable(false);

chooseSound.setBackground(new java.awt.Color(153, 153, 255)); chooseSound.setForeground(new java.awt.Color(255, 0, 0));


chooseSound.setModel(new javax.swing.DefaultComboBoxModel(new String[] { "Sound", "No Sound" })); chooseSound.setFocusable(false); chooseSound.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) { chooseSoundActionPerformed(evt); } }); chooseSound.setBounds(200, 380, 90, 22); jLayeredPane1.add(chooseSound, javax.swing.JLayeredPane.DEFAULT_LAYER);

tfInput.setBackground(new java.awt.Color(153, 153, 255)); tfInput.setForeground(new java.awt.Color(255, 0, 0)); tfInput.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) { tfInputActionPerformed(evt); } }); tfInput.setBounds(20, 380, 128, 20); jLayeredPane1.add(tfInput, javax.swing.JLayeredPane.DEFAULT_LAYER);

LabelJudul.setFont(new java.awt.Font("Barbecue", 1, 14)); LabelJudul.setForeground(new java.awt.Color(255, 0, 0)); LabelJudul.setText("Typing Master Game"); LabelJudul.setBounds(20, 10, 269, 21); jLayeredPane1.add(LabelJudul, javax.swing.JLayeredPane.DEFAULT_LAYER); ScrollPane1.setBounds(20, 40, 272, 325); jLayeredPane1.add(ScrollPane1, javax.swing.JLayeredPane.DEFAULT_LAYER);

LabelBackground.setIcon(new javax.swing.ImageIcon("D:\\Kuliahku\\Semester 4\\Pemrograman Lanjut\\TypingGame\\src\\pic\\backFrame.jpg")); // NOI18N LabelBackground.setBounds(0, 0, 320, 430); jLayeredPane1.add(LabelBackground, javax.swing.JLayeredPane.DEFAULT_LAYER);

jMenu1.setForeground(new java.awt.Color(0, 0, 51)); jMenu1.setText("Game");

jMenuItem4.setAccelerator(javax.swing.KeyStroke.getKeyStroke(java.awt.event.KeyEvent.VK_F4, java.awt.event.InputEvent.ALT_MASK)); jMenuItem4.setForeground(new java.awt.Color(0, 0, 102)); jMenuItem4.setText("Exit Game"); jMenuItem4.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) { jMenuItem4ActionPerformed(evt); } }); jMenu1.add(jMenuItem4);

jMenuBar1.add(jMenu1);

jMenu2.setText("Help"); jMenu2.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) { jMenu2ActionPerformed(evt); } });

jMenuItem5.setAccelerator(javax.swing.KeyStroke.getKeyStroke(java.awt.event.KeyEvent.VK_F1, 0)); jMenuItem5.setForeground(new java.awt.Color(0, 0, 102)); jMenuItem5.setText("About"); jMenuItem5.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) {


jMenuItem5ActionPerformed(evt); } }); jMenu2.add(jMenuItem5);

jMenuBar1.add(jMenu2);

setJMenuBar(jMenuBar1);

javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane()); getContentPane().setLayout(layout); layout.setHorizontalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addComponent(jLayeredPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 314, javax.swing.GroupLayout.PREFERRED_SIZE) ); layout.setVerticalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addComponent(jLayeredPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 420, javax.swing.GroupLayout.PREFERRED_SIZE) );

pack(); }// </editor-fold>

private void tfInputActionPerformed(java.awt.event.ActionEvent evt) { com = game.huruf[game.nama-1]; String te = tfInput.getText();

String baru1 = com.toLowerCase(); String baru2 = te.toLowerCase();

System.out.println("Gambar = "+baru1); System.out.println("Jawab = "+baru2); System.out.println("Benar");

if (baru1.compareTo(baru2)==0) { ls.play("Explosions_3 [High quality].wav"); ls.buhClip.start(); System.out.println("Benar Tekan"); game.reset(); game.addScore(100); tfInput.setText(""); }else{ tfInput.setText(""); game.minusScore(50); }}

private void jMenu2ActionPerformed(java.awt.event.ActionEvent evt) { }

private void jMenuItem4ActionPerformed(java.awt.event.ActionEvent evt) { System.exit(0); }

private void jMenuItem5ActionPerformed(java.awt.event.ActionEvent evt) { new About(this, true).setVisible(true); }

private void chooseSoundActionPerformed(java.awt.event.ActionEvent evt) {


if(chooseSound.getSelectedIndex()==0){ ls.playBackSound("Lets_Go_2.wav"); }else if(chooseSound.getSelectedIndex()==1){ ls.stopBack(); } } /** * @param args the command line arguments */ public static void main(String args[]) { java.awt.EventQueue.invokeLater(new Runnable() {

public void run() { new MainForm().setVisible(true); } }); }

// Variables declaration - do not modify private javax.swing.JLabel LabelBackground; private javax.swing.JLabel LabelJudul; private javax.swing.JScrollPane ScrollPane1; private javax.swing.JComboBox chooseSound; private javax.swing.JLayeredPane jLayeredPane1; private javax.swing.JMenu jMenu1; private javax.swing.JMenu jMenu2; private javax.swing.JMenuBar jMenuBar1; private javax.swing.JMenuItem jMenuItem4; private javax.swing.JMenuItem jMenuItem5; private javax.swing.JTextField tfInput; // End of variables declaration}

Wah akhirnya selesai juga tutorial Typing Game yang sederhana ini ditulis...... Hufft.... capek juga she..... :) tapi gapapa lah.... namanya juga pengen membuat sesuatu yang agak berguna...hehehe.... Semoga tulisan jelek ini ada manfaatnya bagi kalian yang baca tulisan ini. Ga lupa saya pengen ngucap Terima kasih pada Subhan MW yang uda bantuin coding dan Andika Gadhing G yang uda bantuin design gambar dan penyedia jasa Internet.... :D


Documents

Tutorial Pembuatan Typing Game