PEMBUATAN ENDLESS RUN GAME “SEJARAH ANOMAN” MENGGUNAKAN HTML5.

perpustakaan.uns.ac.id

digilib.uns.ac.id

PEMBUATAN ENDLESS RUN GAME “SEJARAH ANOMAN ”
MENGGUNAKAN HTML5

TUGAS AKHIR

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya
Program Diploma III TeknikInformatika

Oleh:
NOOR ARIEF KURNIAWAN
NIM. M3110109

PROGRAM DIPLOMA III TEKNIK INFORMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SEBELAS MARET SURAKARTA
2013
commit to user

i

perpustakaan.uns.ac.id

digilib.uns.ac.id

HALAMAN PERSETUJUAN
PEMBUATAN ENDLESS RUN GAME “SEJARAH ANOMAN ”
MENGGUNAKAN HTML5

Disusun Oleh:

NOOR ARIEF KURNIAWAN
NIM. M3110109

Tugas akhir ini telah disetujui untuk dipertahankan
di hadapan dewan penguji pada tanggal 17 Juli 2013

Pembimbing Utama

Rudi Hartono, S.Si.
NIDN. 9906008058
commit to user
ii

perpustakaan.uns.ac.id

digilib.uns.ac.id

HALAMAN PENGESAHAN
PEMBUATAN ENDLESS RUN GAME “SEJARAH ANOMAN ”
MENGGUNAKAN HTML5

Disusun Oleh:
NOOR ARIEF KURNIAWAN
NIM. M3110109
Pembimbing Utama

Rudi Hartono, S.Si.
NIDN. 9906008058

Tugas akhir ini telah diterima dan disahkanoleh Dewan Penguji Tugas Akhir
Program Diploma III Teknik Infromatikapada hari Rabu, tanggal17 Juli 2013
Dewan Penguji:
1. Penguji 1

Rudi Hartono, S.Si.
NIDN. 9906008058

2. Penguji 2

)

(

)

(

)

Agus Purnomo, S.Si.
NIDN. 9906002096

3. Penguji 3

(

EndarSuprihWihidayat,S.T.,M.Eng
NIP. 198002 1420130 201

Disahkan Oleh:
Dekan

Ketua Program Studi

Fakultas MIPA UNS

Diploma III Teknik Informatika

Prof. Ir. Ari Handono Ramelan, M.Sc(Hons)., Ph.D.

Drs. Y.S.Palgunadi, M.Sc.

NIP. 19610223 198601 1 001
commit to user
iii

NIP. 19560407 198303 1 004

perpustakaan.uns.ac.id

digilib.uns.ac.id

ABSTRACT

Noor Arief Kurniawan, 2013. THE MAKING OF ENDLESS RUN
GAME “THE HISTORY OF ANOMAN” USING HTML5. Diploma III
Informatic Engineering, Faculty of Mathematics and Natural Sciences Sebelas
Maret University Surakarta.

Playing game is one of the methods that is used to get rid of boredom.
Until today, there have been a number of variations of applications and games
developed. One of the games that is now emerging is web-based, or people
usually call it browser game. Due to the high amount of dependency of people on
the internet, which demands them to interact with browser every day. However,
most of the available games are developed to amuse people only. Bases on the
problem, the author aims to insert the value of culture into it. The story of
Anoman is considered perfect to be involved in an adventure game using HTML5.
The research method that is used in this final paper consists of several
phases, which are data compiling, game designing, game developing, game
testing, and applying and improving phase. The process of game development use
javascript and HTML5 programming, and CorelDraw and Photoshop for creating
object designs and user interface.
It can be concluded, that it has been made a game of the folklore of
Anoman in endless run genre that consists of 3 different levels. Furthermore, the
game can be a good messenger of the story of Indonesian culture.
Keywords: Browser Game, Endless run, HTML5, JavaScript, Anoman

commit to user
iv

perpustakaan.uns.ac.id

digilib.uns.ac.id

ABSTRAK
Noor Arief Kurniawan, 2013. PEMBUATAN ENDLESS RUN GAME
“SEJARAH ANOMAN” MENGGUNAKAN HTML5. Program Studi Diploma
III Teknik Informatika, Fakultas Matematika dan Ilmu Pengetahuan Alam,
Universitas Sebelas Maret Surakarta.
Bermain game adalah salah satu cara untuk menghilangkan kebosanan dan
kepenatan. Dan hingga saat ini sudah banyak pula variasi aplikasi dan game yang
diproduksi oleh para developer. Salah satu game yang sedang banyak berkembang
sekarang adalah game dengan basis web atau bisa disebut dengan gamebrowser
karena besarnya ketergantungan masyarakat sekarang terhadap internet yang
menuntut mereka untuk berinteraksi dengan browser setiap hari.Namun
kebanyakan game yang beredar hanya berisi hiburan semata, oleh sebab itu
penulis bermaksud untuk menyisipkan cerita budaya yang akan diangkat ke dalam
game tersebut dan cerita Anoman yang penulis anggap cukup bagus untuk
diangkat menjadi sebuah game petualangan menggunakan HTML5.

Metode penelitian yang di gunakan dalam laporan ini terbagi dari beberapa
tahap yaitu tahap pengumpulan data, tahap perancangan game, tahap pembuatan
game, tahap uji coba serta tahap penerapan dan perbaikan. Proses pembuatan
game ini menggunakan bahasa pemrograman javascript dan HTML5 serta
software CorelDraw dan Photoshop untuk pembuatan design objek dan user
interface.
Serta dapat ditarik kesimpulan bahwa telah berhasil dibuat game cerita
rakyat anomandengan genre endless run yang terbagi dalam 3 level yang berbeda.
Serta pada game tersebut dapat di manfaatkan sebagai penyampaian cerita budaya
Indonesia.
Kata kunci : Browser Game, Endless run, HTML5, JavaScript, Anoman

commit to user
v

perpustakaan.uns.ac.id

digilib.uns.ac.id

MOTTO

“Life's not about how hard you hit. It's about how
hard you can get hit and keep moving forward.”
Rocky Balboa

commit to user
vi

perpustakaan.uns.ac.id

digilib.uns.ac.id

HALAMAN PERSEMBAHAN

Buat Ayah dan Mama

commit to user
vii

perpustakaan.uns.ac.id

digilib.uns.ac.id

KATA PENGANTAR
Assalamu’alaikum Warahmatullah Wabarakatuh.
Alhamdulillahirobbil 'Alamin, dengan memanjatkan segala puji syukur

atas kehadirat Allah SWT, yang telah melimpahkan rahmat dan karunia-Nya.
Sholawat dan Salam kepada Nabi kita Nabi Muhammad SAW dan keluarganya,
sahabat serta orang yang senantiasa berjuang di jalan-Nya. Pada kesempatan yang
diberikan kepada penulis kali ini, dapat dimanfaatkan untuk penulisan Laporan
Tugas Akhir (TA) dengan judul " Pembuatan Endless Run Game Sejarah Anoman
menggunakan HTML5 “. Dengan penuh usaha serta do'a pada akhirnya Laporan
Tugas Akhir (TA) ini dapat terselesaikan.
Dalam penyelesaian penulisan laporan ini, penulis banyak menemui
hambatan-hambatan yang menimbulkan kesulitan baru, tetapi berkat bantuan dari
berbagai pihak akhirnya kesulitan-kesulitan yang menghambat dapat teratasi. Pada
kesempatan ini penulis ingin mengucapkan terima kasih yang sebesarbesarnykepada semua pihak yang telah banyak memberikan bantuannya, terutama
kepada.
1.

Bapak Drs.YS. Palgunadi,M.Sc, selaku Ketua Program D3 ilmu
Komputer FakultasMatematika dan Ilmu Pengetahuan Alam
Universitas Sebelas Maret Surakarta.

2.

Bapak Rudi Hartono, S.Si, dosen pembimbing yang telah banyak
memberikan bimbingan dan saran dalam pembuatan laporan ini.

3.

Kedua orang tua saya Slamet Nugrahono dan Eni Sarweni, atas
do'a, pengorbanan,

kasih

sayang dan perhatian yang tulus

mendukung penyelesaian laporan tugas akhir.
4.

Budi Prasetyo yang telah membantu penulis dalam membuat
design karakter.

5.

Indah Kurniawati yang selalu memberikan semangat kepada
penulis dalam menyelesaikan tugas akhir ini.

6.

Keluarga besar TIB 2010 yang selalu mendukung dan memberikan
to user
masukan-masukan commit
dalam menyelesaikan
laporan ini.
viii

perpustakaan.uns.ac.id

7.

digilib.uns.ac.id

Teman-teman dari Informatics Student of Indonesia yang selalu
memberikan semangat baru kepada penulis.

Untuk itu segala bantuan yang telah diberikan, penulis hanya dapat
menyampaikan rasa hormat dan terima kasih yang tak terhingga semoga amal
kebaikan tersebut mendapatkan balasan dari Allah SWT.
Akhirnya penulis berharap semoga laporan ini dapat memberikan manfaat
bagi semua pihak.

Surakarta, 22 Juli 2013
Penulis

commit to user
ix

perpustakaan.uns.ac.id

digilib.uns.ac.id

DAFTAR ISI
Halaman
HALAMAN JUDUL............................................................................................. i
HALAMAN PERSETUJUAN .............................................................................. ii
HALAMAN PENGESAHAN ............................................................................... iii
ABSTRACT ......................................................................................................... iv
HALAMAN MOTTO ........................................................................................... vi
HALAMAN PERSEMBAHAN ........................................................................... vii
KATA PENGANTAR .......................................................................................... viii
DAFTAR ISI ..........................................................................................................x
DAFTAR GAMBAR ........................................................................................... xiv
BAB I PENDAHULUAN .................................................................................. 1
1.1

Latar Belakang ................................................................................... 1

1.2

Perumusan Masalah............................................................................ 2

1.3

Batasan Masalah ................................................................................. 2

1.4

Tujuan dan Manfaat ........................................................................... 2

1.5

Metodologi Penelitian ........................................................................ 3
1.5.1 Tahap Pengumpulan Data ........................................................ 3
1.5.2 Tahap Perancangan Game ......................................................... 3
1.5.3 Tahap Pembuatan Game............................................................ 4
1.5.4 Tahap Uji Coba ......................................................................... 4
1.5.5Tahap Penerapan dan Perbaikan ................................................ 5
1.5.6Tahap Alur dari pembuatan game .............................................. 5

1.6

Sistematika Penulisan......................................................................... 5

BAB II LANDASAN TEORI ............................................................................ 7
2.1

HTML................................................................................................. 7

2.2

Browser .............................................................................................. 7

2.3

HTML5............................................................................................... 8

2.4

JavaScript ........................................................................................... 10

2.5

Notepad++ .......................................................................................... 10
commit to user
CorelDraw..........................................................................................
11

2.6

x

perpustakaan.uns.ac.id

digilib.uns.ac.id

2.7

Photoshop ........................................................................................... 11

2.8

Interaksi Manusia dan Komputer ....................................................... 11

2.9

Teknik Pengembangan Sistem Waterfall ........................................... 13
2.9.1Keunggulan Waterfall ................................................................ 14
2.9.2Kelemahan Waterfall ................................................................. 15

BAB III
3.1

ANALISISKEBUTUHAN DAN PERANCANGAN ........................ 16
Analisis Kebutuhan ............................................................................ 16
3.1.1 Kebutuhan Pembuatan............................................................... 16
3.1.1.1 Kebutuhan Hardware untuk Pembuatan ........................... 16
3.1.1.2 Kebutuhan Softwareuntuk Pembuatan .............................. 16
3.1.2 Kebutuhan Pemakaian ............................................................... 17
3.1.2.1 Kebutuhan Hardwareuntuk Menjalankan ......................... 17
3.1.2.2 Kebutuhan Software untuk Menjalankan .......................... 18

3.2

Perancangan Pembuatan Permainan................................................... 18
3.2.1 Konsep ....................................................................................... 18
3.2.2 Pengumpulan Data .................................................................... 19
3.2.3 Perancangan Game .................................................................... 19
3.2.4 Tahap PembuatanGame............................................................. 19
3.2.5 Tahap Uji Coba ......................................................................... 19
3.2.6 Penerapan dan Perbaikan .......................................................... 19

3.3

Rancangan Permainan ........................................................................ 20
3.3.1 Konsep/Alur Cerita Permainan ................................................. 20
3.3.2 Kontrol ...................................................................................... 21

3.4

Alur Pembuatan Grafik dan Interface Permainan .............................. 22

3.5

Perancangan Design Karakter ............................................................ 22
3.5.1Tokoh Utama .............................................................................. 22
3.5.2 Musuh ........................................................................................ 23
3.5.2 Scoring Alphabet ....................................................................... 24

3.6

Perancangan Sprite Animasi Karakter ............................................... 24

3.7

Perancangan Background ................................................................... 24
commit to user
Perancangan Level ..............................................................................
25

3.8

xi

perpustakaan.uns.ac.id

digilib.uns.ac.id

3.8.1 Level 1 Menemui Rama! ............................................................ 25
3.8.2 Level 2 Pencarian Shinta!......................................................... 26
3.8.3 Level 3 Lari dari Alengka! ........................................................ 26
3.9

Perancangan Screenpage dan Interface Permainan ............................ 31
3.9.1 Halaman Intro ............................................................................ 27
3.9.2 Perancangan Main Menu........................................................... 28
3.9.3 Halaman Instruksi ..................................................................... 28

3.10 Perancangan Uji Coba ........................................................................ 29
3.11 Perancangan Evaluasi ......................................................................... 29
BAB IV IMPLEMENTASI DAN UJI COBA .................................................... 30
4.1

Detail Aplikasi ................................................................................... 30

4.2

Pembuatan Materi Permainan ............................................................ 30
4.2.1 Pembuatan Tokoh Utama ......................................................... 30
4.2.2 Pembuatan Karakter Musuh ...................................................... 31
4.2.3 Pembuatan Alphabetdan Power up ........................................... 32
4.2.4 Pembuatan Checkpoint .............................................................. 32

4.3

Pembuatan Sprite Animasi Tokoh Utama ......................................... 32

4.4

Pembuatan Interface Scoring ............................................................. 33

4.5

Pembuatan Background ..................................................................... 33

4.6

Pembuatan Level Permainan .............................................................. 34
4.6.1 Pembuatan Level 1 .................................................................... 35
4.6.2 Pembuatan Level 2 .................................................................... 35
4.6.3 Pembuatan Level 3 .................................................................... 36

4.7

Pembuatan Interface dan ScreenPage Permainan ............................. 37
4.7.1 Pembuatan Halaman Intro ....................................................... 37
4.7.2 Pembuatan Halaman Main Menu ............................................. 38
4.7.3 Pembuatan Halaman Cara Bermain .......................................... 39
4.7.4 Pembuatan Halaman Pilih Level .............................................. 39
4.7.5 Pembuatan Halaman Narasi dan Ending Cerita ....................... 39

4.8

Pembuatan Script Permainan Menggunakan JS dan HTML5 ........... 40
to user
4.8.1Gameplay / Maincommit
menu..............................................................
40
xii

perpustakaan.uns.ac.id

digilib.uns.ac.id

4.8.2Background ................................................................................ 41
4.8.3Player / Tokoh Utama ............................................................... 42
4.8.4Musuh ........................................................................................ 45
4.8.5Alphabet ..................................................................................... 47
4.8.6Collision / Tabrakan .................................................................. 48
4.8.7Narasi atau Ending Cerita ......................................................... 49
4.9

Hasil Pengujian Aplikasi ................................................................... 51

4.10 Hasil Kuisioner .................................................................................. 53
BAB V

PENUTUP ............................................................................................ 54

5.1 Kesimpulan ........................................................................................... 54
5.2 Saran ..................................................................................................... 54
DAFTAR PUSTAKA ........................................................................................... 55
LAMPIRAN .......................................................................................................... 56

commit to user
xiii

perpustakaan.uns.ac.id

digilib.uns.ac.id

DAFTAR GAMBAR
Halaman
Gambar 1.1

....................................................................................................... 5

Gambar 3.1

Langkah Pengembangan Game ..................................................... 18

Gambar 3.2

Storyboard ..................................................................................... 21

Gambar 3.3

Alur Perancangan Interface Game ................................................ 22

Gambar 3.4

Perancangan desain karakter tokoh utama .................................... 23

Gambar 3.5

Perancangan desain karakter musuh .............................................. 23

Gambar 3.6

Perancangan desainscoring alphabet ............................................ 24

Gambar 3.7

Perancangan sprite animasi karakter tokoh utama ........................ 24

Gambar 3.8

PerancanganBackground Level 1 .................................................. 25

Gambar 3.9

PerancanganBackground Level 2 .................................................. 25

Gambar 3.10 PerancanganBackground Level 3 .................................................. 25
Gambar 3.11 Perancangan level 1 ....................................................................... 26
Gambar 3.12 Perancangan level 2 ....................................................................... 26
Gambar 3.13 Perancangan level 3 ....................................................................... 27
Gambar 3.14 Perancangan Halaman intro 1 Cover game ................................... 27
Gambar 3.15 Perancangan Halaman intro 1 Cover game ................................... 28
Gambar 3.16 Perancangan halaman Main Menu................................................. 28
Gambar 3.17 Perancangan Halaman Instruksi .................................................... 29
Gambar 4.1

Pembuatan tokoh utama ................................................................ 30

Gambar 4.2

Pembuatan karakter musuh batu rintangan................................... 31

Gambar 4.3

Pembuatan karakter musuh anak panah ....................................... 31

Gambar 4.4

Pembuatan karakter musuhapi ...................................................... 31

Gambar 4.5

Pembuatan karakter musuhpasukan ............................................. 31

Gambar 4.6

Pembuatan alphabet ...................................................................... 32

Gambar 4.7

PembuatanPower Up ..................................................................... 32

Gambar 4.8

Pembuatan checkpoint ................................................................... 32

Gambar 4.9

Pembuatan sprite tokoh utama ...................................................... 33

Gambar 4.10 PembuatanInterface scor ............................................................... 33
to user
Gambar 4.11 Background level 1commit
........................................................................
34
xiv

perpustakaan.uns.ac.id

digilib.uns.ac.id

Gambar 4.12 Background level 2 ........................................................................ 34
Gambar 4.13 Background level 3 ........................................................................ 34
Gambar 4.14 Tampilan gambar level 1 ............................................................... 35
Gambar 4.15 Tampilan gambar level 2 ............................................................... 36
Gambar 4.16 Tampilan gambar level 3 ............................................................... 36
Gambar 4.17 PembuatanIntro 1: Cover .............................................................. 37
Gambar 4.18 Pembuatan Intro 2: credits page ................................................... 38
Gambar 4.19 Pembuatan Main Menu .................................................................. 38
Gambar 4.20 Pembuatan halaman cara bermain ................................................. 39
Gambar 4.21 Pembuatan halaman pilih level ...................................................... 39
Gambar 4.22 PembuatanNarasi dan Ending Cerita ............................................ 40
Gambar 4.23 Tampilan Game pada Google Chrome .......................................... 52
Gambar 4.24 Tampilan Game pada Mozilla Firefox........................................... 52
Gambar 4.25 Tampilan Game pada Internet Explorer ........................................ 52
Gambar 1

Hasil Kuisioner 1 ........................................................................... 56

Gambar 2

Hasil Kuisioner 2 ........................................................................... 57

Gambar 3

Hasil Kuisioner 3 ........................................................................... 58

Gambar 4

Hasil Kuisioner 4 ........................................................................... 59

Gambar 5

Hasil Kuisioner 5 ........................................................................... 60

Gambar 6

Hasil Kuisioner 6 ........................................................................... 61

Gambar 7

Hasil Kuisioner 7 ........................................................................... 62

Gambar 8

Hasil Kuisioner 8 ........................................................................... 63

commit to user
xv