BAB IV PERANCANGAN SISTEM. tahap ini dibuat perancangan desain dan algoritma meliputi

Transkripsi

1 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 Flowchart Alur Permainan Word Scramble Langkah-Langkah bermain pada Permainan Word Scramble akan digambarkan dengan flowchart berdasarkan peratutan yang telah ditentukan. 51

2 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 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 Berikut Flowchart ramdomization().

3 53 Start Alfabet[], frek Frek = ramdom (1002) Alfabet]1] Frek = Frek = 1-83 Alfabet[0] Alfabet[2] Frek = Frek = Alfabet[3] A A Alfabet[5] Frek = Frek = Alfabet[4] Alfabet[6] Frek = Frek = Alfabet[7] A A Alfabet[9] Frek = Frek = Alfabet[8] Alfabet[10] Frek = Frek = Alfabet[11] Alfabet[13] Frek = Frek = Alfabet[12] Alfabet[14] Frek = Frek = Alfabet[15] A A Alfabet[17] Frek = Frek = Alfabet[16] Alfabet[18] Frek = Frek = Alfabet[19] A A Alfabet[21] Frek = Frek = Alfabet[20] Alfabet[22] Frek = Frek =981 Alfabet[23] A End Alfabet[25] Frek = 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

4 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 Tombol_akhir = huruf.hint Tombol_awal = huruf.hint d = tombol_awal mod 4 Kata_jawaban=huruf C=tombol_akhirtombol awal Ketertanggaan = true? 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

5 55 Tombol_awal : tombol yang dipilih sebelum tombol akhir Ketertanggaan : pengkondisian menyatakan ketertanggan antar huruf sebelum dengan Huruf sesudah Huruf Kata_jawaban d : huruf yang dipilih pemain : rangkaian huruf yang menjadi tebakan pemain : 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 :

6 56 Start Kata_jawaban,kata carian, i, kamus i = 0 i = i + 1 Katacarian=kata_jawaban Katacarian=kamus[i]? i = kamus.length? Kata_ketemu kata tidak Ketemu Start Gambar 4.4 Flowchart pencarian jawaban Keterangan: Kata_ketemu Katacarian : kata jawaban yang terdapat dalam kamus jawaban. : kata carian untuk menampung kata jawaban.

7 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 a = kata_ketemu[i]? i = kata_ketemu.length? Sudah_ketemu = true Sudah_ketemu = false End Gambar 4.5 Flowchart Sudah Ketemu

8 58 Keterangan: I a : jumlah variable pada kata_ketemu : 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 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 :

9 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 Tambahkata = Tambahkata = Kata_ketemu Kata Ada dalam Kamus Nilai () Jawaban Benar End Gambar 4.6 Flowchart Periksa Kata Keterangan :

10 60 Panjang_kata Sudahketemu : jumlah huruf minmal yang dapat dijadikan kata tebakan. : 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 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 :

11 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] Daftar_kata = daftar_kata + kata I = kata_ketemu.length? End Total Nilai : Total_nilai Nama : Nama_pemain 4.7 Flowchart Nilai Keterangan : I Nilai Nilai_total Daftar_kata : Jumlah kata yang berhasil ditebak : nilai berdasarkan banyak huruf tiap kata : Total nilai yang diperoleh pemain : daftar kata yang berhasil ditebak oleh pemain

12 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 Pilih Tombol Level? Pilih tombol Kembali Tampilan Frame Arena Permainan Pilih Tombol Aturan? Tampilan Frame Arena Permainan Bermain Word Scramble Permainan Berakhir Pilih Tombol History Score? Tampilan Frame Arena Permainan Tampilan Frame Nilai Pemain Pilih tombol Kembali Pilih Tombol Keluar End Gambar 4.8 Flowchart Alur permainan Word Scramble

13 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 user Permainan Word Scramble 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 :

14 64 User Nama User Input Nama Pemain Nama User Temp Pilih Kata Kata Jawaban Hasil Jawaban Kata Ketemu Sudah Ketemu Kamus.txt Kata Jawaban Cari Jawaban Gambar 4.10 DFD level 0 Permainan Word Scramble

15 Pengecekan panjang kata Kata Jawaban Respon Sistem user 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:

16 66 X Scramble Game Play 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.

17 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:

18 68 Skor Detik 6 X C 1 Kata Ketemu 5 Random 4 Check 3 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

19 69 5. Form Aturan Permainan Form Ini Berisikan Aturan Permainan dalam bermain Game Word Scramble 1 Kembali Word Scramble 2 3 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.