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

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

4.1.1

Peta Navigasi: Menu Utama

Mulai Main

Highscore

Hewan Ternak

Hewan Peliharaan

Hewan Liar

Petunjuk

Kembali Ke Halaman Utama

Gambar 4.1 Peta Navigasi

4.1.2. Story Board: Storyboard Gambar

Deskripsi gambar

Tampilan Menu Awal

Pada

tampilan

ini

terdapat

beberapa

infomasi yang akan ditampilkan, antara lain: PUZZLE GAME

1. Mulai Main 2. NilaiTertinggi

Pembelajaran Hewan

Hewan

Ternak,

Liar, 3. Petunjuk Hewan Pada menu “Mulai Main” jika diklik akan

Peliharaan, dan Hewan ternak Mulai Main

Score Terbaik

Petunjuk

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

jika diklik akan menayangkan video tutorial bagaimana cara bermain permainan puzzle tersebut.

Dan memakai dukungan suara tambahan. Tampilan Menu Utama Setelah

Jika, diklik tombol “Mulai Main”. Maka

diklik.

tampilan ini berisi pilihan-pilihan user ingin bermain pada jenis hewan diantara lain:

PUZZLE GAME

1. Hewan Liar

Pembelajaran Hewan Liar, Hewan Ternak, Hewan

2. Hewan Peliharaan 3. Hewan Ternak

Peliharaan, dan Hewan ternak Hewan Liar

Hewan Peliharaan

Jika dari ketiga sub menu tersebut

Hewan Ternak

Kembali Ke Halaman Utama

diklik, maka akan langsung bermain dengan jenis hewan yang dipilih. 4. Kembali ke Halaman Utama. Jika diklik maka akan kembali ke menu utama.

Salah Satu Sub Menu Tampilan Permainan Puzzle pada Hewan Liar Tampilan ini berisi penjelasan setelah diklik salah satu diantara 3 jenis hewan yang

Puzzle Pertandingan Hewan Liar

Level Score Waktu

Kembali Ke Halaman Utama Layout Gambar

Ket

disediakan. gambar

Contoh

potongan

disusun dengan tepat.

Potongan Puzzle

25

disamping puzzle

yang

adalah harus

Tampilan Berhasil Menyusun Puzzle

Tampilan ini berisi penjelasan tentang jika berhasil menyusun potongan puzzle dengan benar sebelum waktu habis. Setiap 1 potongan puzzle disusun ke tempat yag

Gambar

Ket

benar, makan score akan ditambah 10. Dan sisa waktu yang didapatkan akan langsung

Keterangan Berhasil

diakumulasikan bersamaan dengan total score yang didapatkan dari pencocokan

Lanjut

potongan puzzle ke layout gambar. Tampilan Permainan Berakhir Tampilan ini berisi penjelasan jika user tidak Gambar

Ket

mampu menyusun puzzle dengan waktu yang telah disediakan. Maka permainan

Keterangan Permainan Selesai Nama: :

Kirim

berakhir, dan kamu dapat menyimpan score kamu dengan memasukkan nama.

Tampilan Nilai Terbaik

Puzzle Pertandingan Kembali Ke Halaman Utama

Tampilan ini berisi informasi highscore dari hasil permainan game puzzle

Skor Tertinggi No

Hari, Tanggal

Nama

Score

Tampilan Petunjuk Tampilan ini menampilkan tutorial berupa Puzzle Game Hewan Liar, Hewan

video bagaimana game puzzle ini dimainkan.

Peternakan, dan Hewan

26

Peliharanaan Cara Main Video

Gambar 4.2 Story Board Ringkas

4.1.3. Flowchart

Gambar 4.3 Flowchart Counting Down

27

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

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

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

($('.snappuzzle-

piece.correct.'+puzzle_class).length == o.rows*o.columns)?. Jika Ya o.onComplete,

30

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

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

Berikut Sumber Gambar dan Suara yang diperoleh dari Internet.

-

Gambar Hewan Liar. No

Nama Hewan Liar

Sumber

1

Ikan Hiu

https://pixabay.com/p-220748/?no_redirect

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

-

Gambar Hewan Peliharaan No

Nama Hewan

Sumber

Peliharaan 1

Kucing

http://cdn2.tstatic.net/bali/foto/bank/images/kuci ng-peliharaan-1211.jpg

2

Kura-kura


3

Kuda


4

Sugar Glider

http://tekoneko.net/hewan-peliharaan/

5

Marmut


6

Fennex Fox

http://cdn2.greatfon.com/uploads/picture/201/21 1/211201/picture211201.jpg?width=2048&height=1355&crop=tr ue

7

Sigung


8

Burung Love

https://i1.wp.com/tutugon.com/wp-

Bird

content/uploads/2016/09/Tips-dan-Trik-BurungLove-Birds-Ngacor-Panjang.jpg

9

Landak Mini

https://storage.jualo.com/zoom/2745081/landakmini-hasil-bre-hewan-dan-perlengkapan-hewanpengerat-2745081.jpg

10

Ikan Mas


11

Burung Macaw

https://cdn.pixabay.com/photo/2016/09/04/03/13/ parrot-1643160_960_720.jpg

12

Bearded Dragon


13

Burung Kutilang http://infounik.org/wpcontent/uploads/2016/08/Burung-kutilang.jpg

14

Chinchillas


15

Umang-umang


16

Burung Parollet

http://pecintahewan.com/wp-

34

content/uploads/2015/04/parrotlets-bird.jpg 17

Ferret


18

Ikan Hias

https://ahowlempo.files.wordpress.com/2014/11/

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

https://pixabay.com/p1230969/?no_redirect

4

Jangkrik


5

Belut


6

Cacing


7

Keong


8

Bebek


9

Kelinci


10

Angsa

https://pixabay.com/en/geese-water-birdswaterfowl-210656/

11

Udang


12

Ulat Sutra


13

Lebah


35

14

Lintah


15

Ikan Nila


16

Burung Puyuh


17

Burung Walet


18

Entok

http://2.bp.blogspot.com/RgRFJ29gukU/Uc8sif8CSrI/AAAAAAAA AUs/XtNheQrANo/s1600/Tips+Budidaya+Entok.jpg

19

Kelompok Kelinci

http://tips-ukm.com/wpcontent/uploads/2015/05/kelinci-mungillucu_binatang.net_.jpg

20

Anjing

http://3.bp.blogspot.com/R4pEyiGwDvQ/VFeOoL0Z3kI/AAAAAA AAH3k/18ZazPdgbD4/s1600/gambaranjingwww.binatang.mewarnaigambar.web.id.jp g

-

Suara No

Suara

Sumber

1

Finish Puzzle

http://soundbible.com/1003-Ta-Da.html

2

Wrong Drop

http://soundbible.com/1217-MetalClang.html

3

Time Up

http://soundbible.com/1072-BusySignal.html

4

Petunjuk

Rekam sendiri

5

Nilai Tertinggi

Rekam sendiri

36

6

Hewan Liar

Rekam sendiri

7

Hewan Peliharaan

Rekam sendiri

8

Hewan Ternak

Rekam sendiri

9

Mulai Main

Rekam sendiri

37

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

Recommend Documents