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.
Width : 272
Height : 325
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.
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 Variable
Yang 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 y
3. 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.java
8. 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 Konstruktor
Langkah 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
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 Gambar
Okey 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 :
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;
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 Gambar

Setelah 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.
Scoring
Nah 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 Gerakan
Sekarang 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;
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);
level++;
System.out.println("Pilih yes");
}
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.
Thread
Pada 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 :
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;
start();
System.out.println("Heigth : " + height);
vy = 1;
delay = 20;
score = 0;
}
public Image image() {

try {
gbr = image.getImage();
return gbr;
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;
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();

naikLevel();
vy = vy * 2;
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);
level++;
System.out.println("Pilih yes");
}
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);
score = 0;
reset();
vy = 1;
level = 1;
}
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.java
Kali 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
/**
*
* @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.java
Pada 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{
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 :
ls.buhClip.start();
game.reset();
game.addScore(100);
}else{
}
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){
}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
/**
*
* @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);
}
/** 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() {
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() {
jMenuItem4ActionPerformed(evt);
}
});
jMenu1.add(jMenuItem4);
jMenuBar1.add(jMenu1);
jMenu2.setText("Help");
jMenu2.addActionListener(new java.awt.event.ActionListener() {
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() {
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");
ls.buhClip.start();
game.reset();
game.addScore(100);
}else{
}
}
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){
}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

Tutorial Pembuatan Typing Game

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial Pembuatan Typing Game

Uploaded by

Copyright:

Available Formats

TUTORIAL MEMBUAT GAME “TYPING MASTER”

Setelah selesai mendesign tapmpilannya sekarang kita akan memberikan fungsi

perintah di atas berfungsi untuk menutup aplikasi game ini.

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

private int yImage;

public Image image() {

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

public Image imageBalon() {

Memposisikan dan Menggambar Gambar

public void gambarBackground(Graphics g) {

public void gambarBalon(Graphics g) {

public void cetakScore(Graphics g) {

public void paint(Graphics g) {

public int getScore() {

public void setScore(int score) {

public void addScore(int i) {

public void minusScore(int i) {

public void gerakan() {

if (yImage < -(tinggiGbr / 2)) {

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

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

public void endGame() {

public void reset() {

x = (int) (Math.random() * (200));

public void start() {

public void run() {

private int yImage;

public AnimasiRandomBalon(int width, int height, LoopSoundClass lsound) {

public Image image() {

public Image imageBalon() {

public void gambarBackground(Graphics g) {

public void gambarBalon(Graphics g) {

public void cetakScore(Graphics g) {

public int getScore() {

public void setScore(int score) {

public void addScore(int i) {

public void minusScore(int i) {

public void gerakan() {

if (yImage < -(tinggiGbr / 2)) {

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

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

public void naikLevel() {

public void endGame() {

public void reset() {

x = (int) (Math.random() * (200));

public void start() {

public void run() {

public void play(String nama) {

public void playBackSound(String nama) {

public void stopBack(){

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

String baru1 = com.toLowerCase();

Berikut ini adalah source code lengkap untuk class MainForm.java

/** Creates new form MainForm */

/** This method is called from within the constructor to

jLayeredPane1 = new javax.swing.JLayeredPane();

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

tfInput.setBackground(new java.awt.Color(153, 153, 255));

LabelJudul.setFont(new java.awt.Font("Barbecue", 1, 14));

LabelBackground.setIcon(new javax.swing.ImageIcon("D:\\Kuliahku\\Semester 4\\Pemrograman

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

javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());

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

String baru1 = com.toLowerCase();