BAB IV PERANCANGAN SISTEM
4.1.
Perancangan Sistem
Pada
tahap ini dibuat perancangan desain dan algoritma meliputi
perancangan aplikasi permainan dan perancangan antarmuka. Desain alur-alur yang menghubungkan interface berdasarkan hubungan antar objek dan atribut yang telah ditentukan untuk mengetahui dari proses kerja perangkat lunak scramble game dan alur proses kerja. 4.2. Flowchart Alur Permainan Word Scramble
Langkah-Langkah bermain pada
Permainan Word Scramble akan
digambarkan dengan flowchart berdasarkan peratutan yang telah ditentukan.
51
52
Start
Waktu Sisa = 120 Detik
Randomization
Pemilihan Huruf Ketertanggaan
Cari jawaban
Waktu Sisa = 0
“Waktu Habis ! “
End
Gambar 4.1 Flowchart Alur Permainan Scramble Game. 4.1. Flowchart Ramdomization
Flowchart ini menggambarkan bagaimana huruf yang akan di acak pada papan permainan. Penentuan huruf acak didasarkan pada frekuensi huruf yang sering muncul dengan total frekuensi 1002. Berikut Flowchart ramdomization().
53
Alfabet[], frek
Start
Alfabet]1]
Ya
Frek = ramdom (1002)
Frek = 84-98
Tidak
Frek = 1-83
Ya
Alfabet[0]
Tidak
Alfabet[2]
Ya
Frek = 99-126
Tidak
A
Frek = 127169
Ya
Tidak
Alfabet[5]
Ya
Frek = 297318
Tidak
Frek = 170296
Alfabet[3]
A
Ya
Alfabet[4]
Tidak
Alfabet[6]
Ya
Frek = 319338
Tidak
A
Frek = 339398
Ya
A
Tidak
Alfabet[9]
Ya
Frek = 469470
Ya
Frek = 471478
Ya
Frek = 543609
Ya
Frek = 610684
Alfabet[7]
Tidak
Frek = 399468
Ya
Tidak
Frek = 479518
Ya
Alfabet[8]
Tidak Alfabet[10]
Alfabet[11]
Tidak Alfabet[13]
Tidak
Frek = 519542
Ya
Frek = 685701
Ya
Alfabet[12]
Tidak Alfabet[14]
Tidak
Tidak
A
Alfabet[17]
Ya
Frek = 705764
Tidak
Alfabet[15]
A
Frek = 701704
Ya
Frek = 828918
Ya
Alfabet[16]
Tidak
Alfabet[18]
Ya
Frek = 765827
Tidak
Tidak
A
Alfabet[21]
Ya
Frek =947956
Ya
Frek = 957980
Tidak
Frek =918946
Alfabet[19]
A
Ya
Alfabet[20]
Tidak
Alfabet[22]
Tidak
Frek =981
Ya
Alfabet[23]
Tidak
A
End
Alfabet[25]
Tidak
Frek =9821002
Ya
Alfabet[24]
Gambar 4.2 Flowchart ramdomization 4.2. Flowchart Pemilihan Huruf
Flowchart ini merupakan fungsi yang berguna untuk memeriksa apakah huruf-huruf yang dipilih pemain saling bertetanggan atau tidak. Apakah memiliki
54
nilai ketertanggaan antar huruf yang terakhir dipilih dengan huruf yang akan dipilih. Jika nilai ketertanggaannya salah makan pemain harus memilih huruf yang lain yang bertetangga sampai akhirnya huruf yang terakhir terpilih. Berikut flowchart pemilihan huruf pada Board 4x4.
Start
Kata_jawaban,tombol_ awal ,tombol_akhir,c,d,huruf
Kata_jawaban=null
Tidak
Tombol_akhir = huruf.hint
Ya d = tombol_awal mod 4
Tombol_awal = huruf.hint
C=tombol_akhirtombol awal
Kata_jawaban=huruf
Ketertanggaan = true ?
Ya
Kata_jawaban= kata_jawaban + huruf
Tombol_awal=tombol_akhir
End
Gambar 4.3 Flowchart Pemilihan Huruf. Keterangan: Tombol_akhir
: tombol yang terakhir di pilih oleh pemain
Tidak
55
Tombol_awal
: tombol yang dipilih sebelum tombol akhir
Ketertanggaan
: pengkondisian menyatakan ketertanggan antar huruf sebelum dengan Huruf sesudah
Huruf
: huruf yang dipilih pemain
Kata_jawaban
: rangkaian huruf yang menjadi tebakan pemain
d
: variable yang menentukan letak kolom pada board
4.3. Flowchart cari jawaban
Cari jawaban merupakan fungsi yang berguna untuk memeriksa kata jawaban pemain didalam kamus jawaban. Fungsi inilah yang menggunakan algoritma pencarian yaitu algoritma linear search, berikut merupakan flowchart pencarian jawaban :
56
Start
Kata_jawaban,kata carian, i, kamus
i=0 i=i+1
Katacarian=kata_jawaban Ya
Katacarian=kamus[i] ?
Ya Kata_ketemu
Tidak
i = kamus.length ?
Tidak “kata tidak Ketemu”
Start
Gambar 4.4 Flowchart pencarian jawaban Keterangan: Kata_ketemu
: kata jawaban yang terdapat dalam kamus jawaban.
Katacarian
: kata carian untuk menampung kata jawaban.
57
4.4. Flowchart Kata Sudah ketemu
Flowchart ini merupakan fungsi yang berguna untuk memeriksa kata apakah kata tersebut yang dijadikan tebakan sudah ditemukan sebelumnya oleh pemain jika sudah maka kata tersebut tidak bisa ditebak dua kali.
Start
I, a, kata_ketemu,s sudah_ketem u
I=0
I=i+1
Tidak
a= kata_ketemu[i] ?
Tidak
i= kata_ketemu.length ?
Ya Ya Sudah_ketemu = true
Sudah_ketemu = false
End
Gambar 4.5 Flowchart Sudah Ketemu
58
Keterangan: I
: jumlah variable pada kata_ketemu
a
: kata yang sedang diperiksa apakah telah ditemukan
sebelumnya Sudah_ketemu
: pengkondisian boolean yang mengecek kata pada papan
Jawaban. Kata_ketemu
: array yang berisi kata tebakan yang benar didalam kamus.
4.5. Flowchart Periksa Kata
Flowchart ini menjelaskan bagaimana huruf yang dirangkai menjadi kata yang akan dijadikan kata tebakan oleh pemain. Berikut akan dijelaskan pada gambar sebagai berikut :
59
Start
Panjang_kata, indeks_kata, carikata, kata_ketemu, Kata_tebakan
Kata_tebakan.length < panjang_kata ?
Tambahkata = “ “
“ Minimal 3 Huruf “
Sudahketemu (kata_tebakan) = true
Tambahkata = “ “
“ Kata Sudah Ketemu “
Indeks_kata = Carikata (kata_tebakan)
Kata_ketemu = push(kata_tebakan)
Indeks_kata > = 0
“ Kata Tidak Ada dalam Kamus “
Tambahkata = Kata_ketemu
Nilai ()
“ Jawaban Benar “
End
Gambar 4.6 Flowchart Periksa Kata Keterangan :
Tambahkata = “ “
60
Panjang_kata
: jumlah huruf minmal yang dapat dijadikan kata tebakan.
Sudahketemu
: tipe boolean untuk menyatakan apakah kata tersebut sudah ditemukan sebelumnya atau belum.
Tambah_kata
: kata yang akan ditambahkan jika dalam kondisi yang benar.
Indeks_kata
: indeks dari kata tebakan pada kamus.
4.6. Flowchart Nilai
Flowchart nilai ini merupakan fungsi yang berguna untuk menghitung nilai yang diperoleh dari tiap kata yang berhasil ditebak oleh pemain. Nilai ditentukan dari panjang kata yang membentuknya. Berikut Flowchart nilai :
61
Start
I,kata,kata_ketemu, Nilai, Total_nilai,daftar_kata
Total_nilai = 0
I=0 I=i+1
Kata = kata_ketemuu[i]
Total_nilai=total_nilai + nilai[kata.length]
Tidak
I= kata_ketemu.length ?
Daftar_kata = daftar_kata + kata
Ya
“Total Nilai : Total_nilai “”Nama : Nama_pemain”
End
4.7 Flowchart Nilai Keterangan : I
: Jumlah kata yang berhasil ditebak
Nilai
: nilai berdasarkan banyak huruf tiap kata
Nilai_total
: Total nilai yang diperoleh pemain
Daftar_kata
: daftar kata yang berhasil ditebak oleh pemain
62
4.7. Perancangan Aplikasi Permainan Perancangan aplikasi permainan merupakan perancangan antarmuka dengan pemain terhadap aplikasi permainan yang dibangun. Aplikasi akan menampilkan frame menu yang tersedai tombol pilihan Mulai, aturan dan keluar. Setiap tombol akan menampilkan Form-form berikutnya. Aplikasi akan berhenti jika waktu habis dan pemain menekan tombol keluar. Berikut adalah proses yang terjadi pada aplikasi permainan word scramble:
Start
Tampilan Frame Play Game
Tampilan Frame Nama Pemain
Ya
Pilih Tombol Level ?
Pilih tombol Kembali
Tidak Tampilan Frame Arena Permainan
Pilih Tombol Aturan ?
Ya
Tampilan Frame Arena Permainan
Bermain Word Scramble Tidak
Permainan Berakhir Pilih Tombol History Score ?
Ya
Tampilan Frame Arena Permainan
Tampilan Frame Nilai Pemain Tidak
Pilih tombol Kembali
Pilih Tombol Keluar
End
Gambar 4.8 Flowchart Alur permainan Word Scramble
63
4.9
Diagram Konteks
Untuk menggambarkan sistem secara umum yang mewakili seluruh proses yang terjadi dan menggambarkan bagaimana hubungan antara proses utama dengan
entitas eksternal
yang
terlibat
dalam
sistem,
maka
penyusun
menggambarkan diagram konteks dari sistem yang diusulkan sebagai berikut :
Input Nama pemain
Permainan Word Scramble
user
Hasil Score
Gambar 4.9 Diagram Konteks Permainan 4.10 Data Flow Diagram
Data flow diagram merupakan peralatan yang berfungsi untuk menggambarkan secara rinci mengenai sistem sebagai jaringan kerja antar fungsi yang berhubungan satu sama lain dengan menunjukan dari dan kemana data mengalir serta penyimpanannya. Berikut adalah DFD temu kembali citra :
64
User Nama User
Input Nama Pemain
Nama User
Temp
Pilih Kata
Kata Jawaban
Kata Ketemu Hasil Jawaban
Kamus.txt
Kata Jawaban
Sudah Ketemu
Cari Jawaban
Gambar 4.10 DFD level 0 Permainan Word Scramble
65
3.1 Pengecekan panjang kata
Kata Jawaban
user
Respon Sistem
Kata Jawaban
3.2 Pencarian Jawaban
Respon Sistem
Score Kata Kata Jawaban
Score
Kamus
Score Kata
Kata Jawaban
3.4 Score
Kata Jawaban
3.3 Pengecekan Kata Sudah Ketemu
Gambar 4.11 DFD level 1 Proses 3 Permainan Word Scramble. 4.8.Perancangan Antar Muka
Perancangan Antar muka aplikasi permainan Word Scramble ini terdiri dari beberapa Form yaitu Form Menu, Form Aturan, Form Arena Permainan dan Form Score. Berikut ini beberapa rancangan Antar muka. 1. Form Menu Form Menu Akan muncul saat aplikasi permainan Word Scramble dijalankan. Form ini berisikan menu yang dapat dipilih oleh pengguna yaitu Play, Aturan Main, papan nilai dan Tombol Close. Rancangan Antar muka ini dapat dilihat pada gambar di bawah ini:
66
X
Scramble
Play
Game Aturan Main
Papan Nilai
Gambar 4.12 Form Menu 2. Form Masukan Nama Pemain Form ini Berfungsi untuk Menampilkan Nama Pemain pada papan nilai setelah game berakhir.
Masukan nama anda
OK
Cancel
Gambar 4.13 Form Input Nama Pemain 3. Form Papan Nilai Form ini merupakan form yang digunakan untuk melihat hasil nilai dari para pemain terdahulu serta melihat nilai terbaik dan form yang akan tampil jika waktu telah habis.
67
X
Score
Nama Pemain
Gambar 4.14 Form papan nilai 4. Form Arena Permainan Form Arena permainan merupakan Form yang digunakan pemain untuk bermain word scramble. Rancangan antar muka Form ini dapat dilihat pada gambar dibawah ini:
68
Skor
X
120 Detik 6
2 C
Kata Ketemu 1
4 Random
5
3 Check
Gambar 4.15 Arena permainan word scramble Keterangan: 1. Panel button yang berisi Huruf Acak yang akan di tebak. 2. Textbox tampil yang berfungsi menapilkan Huruf yang telah di tekan pada panel huruf dan menjadi kata tebakan. 3. Tombol cari kata dalam kamus. 4. Tombol Random berfungi untuk merandom kata dan mengulang permainan seperti Baru Mulai (New Game). 5. Komponen Text area yang berfungsi menampilkan Kata-kata yang sudah ditebak oleh pemain dengan jawaban kata yang benar. 6. Sisa waktu permainan. c. Tombol clear pada area textbox jawaban
69
5. Form Aturan Permainan Form Ini Berisikan Aturan Permainan dalam bermain Game Word Scramble
1
2 Kembali
Word
3
Scramble
Gambar 4.16 Form aturan permainan word scramble Keterangan: 1. Text Area yang menampilkan Tata Cara Permainan Word Scramble 2. Tombol yang berfungsi kembali Area Menu. 3. Word Scramble merupakan Judul aplikasi yang dirancang dengan
menggunakan komponen text.
