Menu Utama. Mulai Main Highscore Petunjuk. Hewan Liar Hewan Peliharaan Hewan Ternak Kembali Ke Halaman Utama. Gambar 4.1 Peta Navigasi.

Transkripsi

1 BAB IV PERANCANGAN 4.1 Perancangan (Design) Tahap perancangan (design) membuat spesifikasi secara rinci mengenai aplikasi yang akan dibuat, serta data dan kebutuhan material untuk aplikasi tersebut. Spesifikasi yang akan dibuat berdasarkan pada langkah berikut: a. Perancagan Peta Navigasi. b. Perancangan Storyboard. c. Perancangan bagan alir (flowchart). Desain ataupun perancangan merupakan tahap pembuatan spesifikasi mengenai arsitektur program yang akan dibuat tampilan, dan kebutuhan material/bahan untuk program. Untuk spesifikasi dibuat rinci sehingga pada tahap berikutnya yaitu pengumpulan materi (material collecting) dan pembuatan (assembly) pengambilan keputusan baru tidak diperlukan lagi. Tahap ini penulis menggunakan story board untuk menggambarkan deksripsi tiap Scene dan juga flowchart untuk menggambarkan aliran darisatu Scene ke Scene lain. Scene disini bisa disebut sebagai halaman untuk menyimpan isi menu yang akan ditampilkan kemudian juga pada Scene yaitu terdapat masing-masing Frame yang juga dapat menampung setiap isi menu. 23

2 4.1.1 Peta Navigasi: Menu Utama Mulai Main Highscore Petunjuk Hewan Liar Hewan Peliharaan Hewan Ternak Kembali Ke Halaman Utama Gambar 4.1 Peta Navigasi Story Board: Gambar Tampilan Menu Awal PUZZLE GAME Pembelajaran Hewan Liar, Hewan Ternak, Hewan Peliharaan, dan Hewan ternak Mulai Main Score Terbaik Petunjuk Storyboard Deskripsi gambar Pada tampilan ini terdapat beberapa infomasi yang akan ditampilkan, antara lain: 1. Mulai Main 2. NilaiTertinggi 3. Petunjuk Pada menu Mulai Main jika diklik akan menampilkan menu pilihan untuk menentukan user ingin bermain pada hewan jenis apa, pada menu Highscore akan menampilkan informasi score terbaik pada setiap jenis hewan, dan menu Petunjuk 24

3 jika diklik akan menayangkan video tutorial bagaimana cara bermain permainan puzzle tersebut. Tampilan Menu Utama Setelah diklik. PUZZLE GAME Pembelajaran Hewan Liar, Hewan Ternak, Hewan Peliharaan, dan Hewan ternak Hewan Liar Salah Satu Sub Menu Tampilan Permainan Puzzle pada Hewan Liar Puzzle Pertandingan Hewan Liar Level Score Hewan Peliharaan Hewan Ternak Kembali Ke Halaman Utama Waktu Kembali Ke Halaman Utama Layout Gambar Potongan Puzzle Ket Dan memakai dukungan suara tambahan. Jika, diklik tombol Mulai Main. Maka tampilan ini berisi pilihan-pilihan user ingin bermain pada jenis hewan diantara lain: 1. Hewan Liar 2. Hewan Peliharaan 3. Hewan Ternak Jika dari ketiga sub menu tersebut diklik, maka akan langsung bermain dengan jenis hewan yang dipilih. 4. Kembali ke Halaman Utama. Jika diklik maka akan kembali ke menu utama. Tampilan ini berisi penjelasan setelah diklik salah satu diantara 3 jenis hewan yang disediakan. Contoh disamping adalah gambar potongan puzzle yang harus disusun dengan tepat. 25

4 Tampilan Berhasil Menyusun Puzzle Gambar Ket Keterangan Berhasil Lanjut Tampilan Permainan Berakhir Gambar Ket Keterangan Permainan Selesai Nama: Kirim Tampilan ini berisi penjelasan tentang jika berhasil menyusun potongan puzzle dengan benar sebelum waktu habis. Setiap 1 potongan puzzle disusun ke tempat yag benar, makan score akan ditambah 10. Dan sisa waktu yang didapatkan akan langsung diakumulasikan bersamaan dengan total score yang didapatkan dari pencocokan potongan puzzle ke layout gambar. Tampilan ini berisi penjelasan jika user tidak mampu menyusun puzzle dengan waktu yang telah disediakan. Maka permainan berakhir, dan kamu dapat menyimpan score kamu dengan memasukkan nama. Tampilan Nilai Terbaik Puzzle Pertandingan Kembali Ke Halaman Utama Skor Tertinggi Tampilan ini berisi informasi highscore dari hasil permainan game puzzle No Hari, Tanggal Nama Score Tampilan Petunjuk Puzzle Game Hewan Liar, Hewan Peternakan, dan Hewan Tampilan ini menampilkan tutorial berupa video bagaimana game puzzle ini dimainkan. 26

5 Peliharanaan Cara Main Video Gambar 4.2 Story Board Ringkas Flowchart Gambar 4.3 Flowchart Counting Down 27

6 Pada Gambar Flowchart 4.3 diatas menjelaskan tentang alur logika dibuat, dimana start untuk memulai, dan membaca variabel dengan timer 60 detik disetiap soal pada tingkatannya. Setelah itu timer akan melakukan looping. Apakah timer <= (lebih kecil atau sama dengan) 60? Jika Ya, maka bermain puzzle dan melakukan pengurangan (Decrement) sebanyak 1 angka. Dan jika Tidak maka looping akan berhenti, dan proses bermain puzzle berakhir atau game over. Gambar 4.4 Flowchart Fisher Yates Shuffle 28

7 Pada Gambar Flowchart 4.4 diatas menjelaskan tetang alur pengacakan soal dibuat, jadi pada halaman utama terdapat 3 menu yaitu, Mulai Main, Nilai Terbaik, dan Petunjuk. Jika Mulai Main diklik, maka akan muncul 3 sub menu. Yaitu, Hewan Liar, Hewan Peliharaan, dan Hewan Ternak yang masing-masing sub menu mempunyai 20 tingkatan, dan 20 gambar. Dan disetiap tingkatan akan diberikan soal-soal gambar random Start dimulai, dan membaca Variabel currentindex yang mempunyai isi array.length, temporaryvalue, dan randomindex. Array.length berfungsi untuk menentukan soal dari 1-20, temporaryvalue, dan randomindex adalah sebagai Nilai Integer, kemudian memulai perulangan dengan menggunakan While. While (0!= currentindex / (20) )?. Jika Ya maka akan randomindex telah ditentukan untuk memilih soal-soal yang dipilih secara acak, kemudian perulangan akan melalukan pengurang (Decrement) sebanyak 1 buah dari Variabel currentindex. Proses pemindahan data antara temporaryvalue = array[currentindex], array[currentindex] = array [RandomIndex], dan array[randomindex] = temporaryvalue berlangsung. Dan melakukan looping sampai 0. Dan statement perulangan kembali mengcek. While (0!= currentindex / (0) )?. Jika Tidak, maka akan memproses return array yang berfungsi untuk mengembalikan nilai terhadap array di currentindex. 29

8 Gambar 4.5 Flowchart True-False Puzzle Pada gambar Flowchart 4.5 diatas menjelaskan tentang alur penempatan untuk mengetahui apakah potongan puzzle yang di drag sudah berada di posisi yang tepat atau belum. Dimana start untuk memulai, setelah itu membaca definisi variabel var slot yang isinya terpadat data ( pos ) yang didapat dari variabel x_y untuk menentukan koordinat, kemudian proses pemindahan potongan puzzle dimulai. Setelah itu diseleksi dengan menggunakan statement if. If ui.draggable data( pos ) == slot_pos. Jika ya, maka ui.draggable.addclass ( correct ), kemudian jawaban benar akan mendapatkan point sebanyak 10. Setelah itu ui.draggable.css (opacity, cursor, draggable). Opacity, dan cursor dari css, dan draggable adalah fungsi bawaan dari JavaScript yang berfungsi agar user bisa drag potongan puzzle ke layout gambar. Setelah itu proses akan melakukan di statment if. if ($('.snappuzzlepiece.correct.'+puzzle_class).length == o.rows*o.columns)?. Jika Ya o.oncomplete, 30

9 dan terdengar suara correct-answer akan dijalankan. Jika tidak akan terdengar suara wrong-drop, yaitu suara salah. Artinya potongan puzzle tidak sesuai dengan titik koordinat slot_pos. Gambar 4.6 Flowchart OnComplete Tamat 31

10 Pada Gambar Flowchart 4.6 akan diatas menjelaskan tentang puzzle oncomplete atau Tamat, pada permainan puzzle tersebut mempunyai tingkatan sebanyak 20 level. Dimana start untuk memulai proses, setelah itu ada proses get nosoal, yaitu berfungsi untuk mendapatkan soal, setelah itu no soal +=1, berfungsi untuk menambahkan perulangan sebanyak 1 angka, setelah itu localstorage.setitem itu fungsi bawaan dari JavaScript, dan kemudian akan terdengar suara finish puzzle setelah puzzle sudah semuanya disusun dengan benar, dan waktu akan berhenti. Kemudian membaca definisi variabel getpointsekarang() + getwaktusekarang. getpointsekarang() didapatkan dari point yang sudah didapatkan dari susunan puzzle yang sudah benar, dan getwaktusekarang didapatkan dari sisa waktu yang didapatkan dari finish puzzle. Kemudian localsetitem, point didapatkan dari variabel point, dan juga setpointsekarang(point). Dan akan ditentukan dengan statement if yaitu. If level >=20? Jika Ya Puzzle Selesai, dan masuk ke level selanjutnya. Dan Tidak makan puzzle tamat. 4.2 Pengumpulan Bahan (Material Collecting) Pada Tahap ini dilakukan pengumpulan bahan seperti gambar, dan suara. Bahan-bahan diperoleh dari berbagai sumber dari media internet. Pada tahap ini merupakan yang diperlukan dalam proses pembuatan sekaligus persiapan semua materi yang diperlukan dalam proeses pembuatan aplikasi yaitu termasuk gambar, suara, dan lain-lain sesuai dengan kebutuhan dapat diperoleh secara gratis sesuai dengan rancangan. Untuk pengumpulan materi disini penulis mengunduh secara gratis melalui internet termasuk gambar yang ukurannya di edit dari software Photoshop dalam benuk format.jpg, dan suara dalam format.ogg dan.mp3. 32

11 Berikut Sumber Gambar dan Suara yang diperoleh dari Internet. - Gambar Hewan Liar. No Nama Hewan Liar Sumber 1 Ikan Hiu 2 Hyena 3 Komodo 4 Macan Tutul 5 Badak 6 Beruang Kutub 7 Singa 8 Buaya 9 Berang-berang 10 Serigala 11 Ular Cobra 12 Kuda Nil 13 Ikan Piranha 14 Trenggiling 15 Gajah 16 Jerapah 17 Kijang 18 Orang Utan 19 Zebra 20 Lumba-lumba 33

12 - Gambar Hewan Peliharaan No Nama Hewan Sumber Peliharaan 1 Kucing ng-peliharaan-1211.jpg 2 Kura-kura 3 Kuda 4 Sugar Glider 5 Marmut 6 Fennex Fox 1/211201/picture jpg?width=2048&height=1355&crop=tr ue 7 Sigung 8 Burung Love Bird content/uploads/2016/09/tips-dan-trik-burung- Love-Birds-Ngacor-Panjang.jpg 9 Landak Mini 10 Ikan Mas 11 Burung Macaw parrot _960_720.jpg 12 Bearded Dragon 13 Burung Kutilang 14 Chinchillas 15 Umang-umang 16 Burung Parollet 34

13 content/uploads/2015/04/parrotlets-bird.jpg 17 Ferret 18 Ikan Hias Yellow Tangs yellow-tang-saltwater.jpg 19 Clownfish 20 Ikan Hias atau Ikan Diskus - Gambar Hewan Ternak. No Nama Hewan Ternak Sumber 1 Sapi 2 Kambing 3 Ayam /?no_redirect 4 Jangkrik 5 Belut /?no_redirect 6 Cacing 7 Keong /?no_redirect 8 Bebek 9 Kelinci 10 Angsa 11 Udang /?no_redirect 12 Ulat Sutra 13 Lebah 35

14 14 Lintah /?no_redirect 15 Ikan Nila 16 Burung Puyuh 17 Burung Walet /?no_redirect 18 Entok RgRFJ29gukU/Uc8sif8CSrI/AAAAAAAA AUs/XtNheQrA- No/s1600/Tips+Budidaya+Entok.jpg 19 Kelompok Kelinci 20 Anjing R4pEyiGwDvQ/VFeOoL0Z3kI/AAAAAA AAH3k/18ZazPdgbD4/s1600/gambaranjingwww.binatang.mewarnaigambar.web.id.jp g - Suara No Suara Sumber 1 Finish Puzzle 2 Wrong Drop Clang.html 3 Time Up Signal.html 4 Petunjuk Rekam sendiri 5 Nilai Tertinggi Rekam sendiri 36

15 6 Hewan Liar Rekam sendiri 7 Hewan Peliharaan Rekam sendiri 8 Hewan Ternak Rekam sendiri 9 Mulai Main Rekam sendiri 37