7 BAB III PERANCANGAN SISTEM 3.1 Flow Chart Flowchart adalah

BAB III
PERANCANGAN SISTEM
3.1 Flow Chart
Flowchart adalah bagan atau chart yang menunjukkan alir
atau flow di dalam program atau prosedur sistem secara logika.
Berikut adalah gambaran Flowchart game:
start
Exit
Main menu
Petunjuk
Mulai
Yes
NO
Stage 1
Yes
No
No
Play Again
Stage 1
Yes
End
Play Again
Play Again
Stage 3
Gambar 3.1 Flow Chart
7
8
Keterangan:

Ketika Pemain membuka game pada pertama kalinya.

Pemain akan menuju ke main menu, di main menu terdapat 3
button yaitu mulai, petunjuk dan keluar.

Ketika pemain mengklik tombol mulai pemain akan masuk ke
stage 1.

Jika pemain mengklik tombol pentunjuk, otomatis tampilan
masuk ke petunjuk permainan.

Jika pemain mengklik tombol keluar, maka pemain akan
otomatis keluar.

Saat pemain memasuki stage 1, maka pemain harus
menyelesaikan / menjawab tantangan yang ada.

Jika pemain memenangkan permainan distage pertama maka
akan muncul tampilan you win, pemain akah beralih ke stage
2.

Jika pemain gagal maka akan ada tampilan you lose, dan ada
tombol play again dan kembali.

Jika pemain memilih tombol play again maka pemain akan
memulai kembali permainan stage 1.

Jika pemain memilih tombol kembali, maka pemain otomatis
kembali ke tampilan main menu.

Begitu seterusnya di stage 2 dan 3.

Stage disini berbeda dengan tingkatan level.

3.2 Desain Antar Muka
Dalam pembuatan proyek ini disusunlah desain antar muka, berikut
desain antar muka:
9
a. Lembar kerja tampilan awal
Mulai
Petunjuk
Exit
Gambar 3.2.a Lembar kerja ampilan awal
Pada gambar 3.2.a adalah desain awal antar muka
dengan user, gambar di atas dibuat untuk mempermudah
untuk perancangan tampilan.
10
b. Lembar kerja tampilan petunjuk
Isi petunjuk
Gambar 3.2.b Lembar kerja tampilan petunjuk
Pada gambar 3.2.b adalah tampilan pentunjuk, untuk
mempermudah pernacangan desain game.
11
c. Lembar kerja tampilan stage 1
Gambar 3.2.c Lembar kerja tampilan stage 1
Pada gambar 3.2.c adalah desain tampilan dari stage 1,
untuk mempermudah perancangan desain game.
12
d. Lembar kerja tampilan stage 2
Gambar 3.2.d Lembar kerja tampilan stage 2
Pada gambar 3.2.d adalah desain tampilan stage 2,
untuk mempermudah perancangan game.
13
e. Lembar kerja tampilan stage 3
Gambar 3.2.e Lembar kerja tampilan stage 3
Pada gambar 3.2.e adalah desain tampilan stage 3, agar
mempermudah perancangan game.
14
f.
Lembar kerja tampilan win
Gambar 3.2.f Tampilan lembar kerja you win
Pada gambar 3.2.f adalah desain tampilan jika pemain
menang, untuk mempermudah perancangan game.
15
g. Lembar kerja tampilan you lose
Gambar 3.2.g Tampilan lembar kerja you lose
Pada gambar 3.2.g adalah desain tampilan jika pemain
kalah, untuk mempermudah perancangan game.
16
3.3 Jaringan Sematik Tampilan
Gambar 3.3 Jaringan Sematik Tampilan