perpustakaan.uns.ac.id digilib.uns.ac fileperpustakaan.uns.ac.id digilib.uns.ac.id tugas akhir...
Post on 23-Aug-2019
214 Views
Preview:
TRANSCRIPT
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
PEMBUATAN GAME “EDUCATION CARD” BERBASIS BROWSER
MENGGUNAKAN HTML5
TUGAS AKHIR
Diajukan untuk memenuhi salah satu syarat mencapai gelar Ahli Madya
Program Diploma III Teknik Informatika Fakultas Matematika dan Ilmu
Pengetahuan Alam Universitas Sebelas Maret Surakarta
Disusun oleh :
FEBRI TRI JATMIKO
NIM. M3110059
PROGRAM DIPLOMA III TEKNIK INFORMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SEBELAS MARET
SURAKARTA
2013
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
ii
HALAMAN PERSETUJUAN
PEMBUATAN GAME “EDUCATION CARD” BERBASIS BROWSER
MENGGUNAKAN HTML5
Disusun Oleh :
FEBRI TRI JATMIKO
NIM. M3110059
Tugas Akhir ini disetujui untuk dipertahankan
di hadapan dewan penguji
pada tanggal 16 Juli 2013
Pembimbing
Liliek Triyono, S.T, M.Kom
NIDN. 0620048402
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
iii
HALAMAN PENGESAHAN
PEMBUATAN GAME “EDUCATION CARD” BERBASIS BROWSER
MENGGUNAKAN HTML5
Disusun oleh :
FEBRI TRI JATMIKO
NIM. M3110059
Dibimbing oleh :
Liliek Triyono, S.T, M.Kom
NIDN. 0620048402
Tugas Akhir ini telah diterima dan disahkan
oleh dewan penguji Tugas Akhir Program Diploma III Teknik Informatika
pada Hari Tanggal
Dewan Penguji :
1. Liliek Triyono, S.T., M.Kom ( )
NIDN. 0620048402
2. Agus Purnomo, S.Si ( )
NIDN. 9906002096
3. Tutut Maitanti, S.Si., M.Kom ( )
NIDN. 0625058501
Disahkan Oleh:
Dekan
Fakultas MIPA UNS
Prof. Ir. Ari Handono Ramelan, M.Sc(Hons)., Ph.D.
NIP. 19610223 198601 1 001
Ketua Program Studi
Diploma III Teknik Informatika
Drs. Y.S.Palgunadi, M.Sc.
NIP. 19560407 198303 1 004
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
iv
ABSTRACT
Febri Tri Jatmiko. 2013. GAME DEVELOPMENT “EDUCATION CARD”
BROWSER-BASED USING HTML5. Diploma III of Informatics Engineering.
Mathematics and Natural Science Faculty. Sebelas Maret University of
Surakarta.
Many people use games as a means of educational media and interactive
learning for children. However, the majority of game developers, tend to develop
games that contain things that are less qualified in terms of education. Therefore,
this study aims to make an entertaining and also has educative game.
To realize the goal, "Education Card" browser-based game is designed
using HTML5, JavaScript, and CSS3. This study uses research methods such as
data collection, game design, game development, and implementation and testing.
As a result, "Education Card" game is successfully created with 4 levels,
easy, medium, hard, and expert. "Education Card" game can run in all versions of
Google Chrome, Mozilla Firefox 23 or higher, Opera Browser 12.15 or higher,
and Internet Explorer 9 or higher.
Keywords : Education Card, HTML5, Javascript, CSS3, Game.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
v
ABSTRAK
Febri Tri Jatmiko. 2013. PEMBUATAN GAME "EDUCATION CARD"
BERBASIS BROWSER MENGGUNAKAN HTML5. Diploma III Teknik
Informatika, Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas
Sebelas Maret Surakarta.
Banyak orang yang memanfaatkan game sebagai sarana media
pembelajaran yang edukatif dan interaktif bagi anak-anak. Namun mayoritas
pengembang game yang berjalan pada platform browser, cenderung
mengembangkan game yang berisi hal-hal yang kurang berkualitas dalam segi
pendidikan. Oleh karena itu, penelitian ini bertujuan membuat sebuah game selain
untuk sarana hiburan juga ada nilai edukatif yang bisa diperoleh dari game.
Untuk mewujudkan tujuan ini dibuat permaianan “Education Card”
berbasis browser menggunakan HTML5, javascript, dan CSS3. Penelitian ini
menggunakan metode penelitian diantaranya yaitu pengumpulan data,
perancangan game, pembuatan game, dan metode implementasi dan uji coba.
Pada akhirnya, game “Education Card” berhasil dibuat yang terdiri dari
4 level, yaitu mudah, sedang, susah, dan ahli. Game “Education Card” berjalan
paling baik pada Google Chrome semua versi, Mozilla Firefox versi 23 ke atas,
Opera Browser versi 12.15 ke atas, dan Internet Explorer 9 ke atas.
.
Kata Kunci : Education Card, HTML5, Javascript, CSS3, Game
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
vi
HALAMAN MOTTO
“Kegagalan hanya terjadi bila kita menyerah”
“Menunggu kesuksesan adalah tindakan sia-sia yang bodoh.”
“Manusia tidak merancang untuk gagal, mereka gagal untuk merancang”.
“Hidup ini adalah sebuah pilihan, pilihlah !!! dengan begitu kamu tahu itu
adalah pilihan yang terbaik atau bukan”
“Focus, Be Calm, Stay Cool, and Take Control…”
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
vii
HALAMAN PERSEMBAHAN
ku persembahkan Tugas Akhir ini untuk :
1. Bapak dan Ibu serta saudara –saudara ku tercinta.
Segala yang ku lakukan untuk membuat kalian bangga.
2. Teman-teman INTUISI yang selalu memberikan segala
bantuan dan Motivasi.
3. Teman-Teman DIII Teknik Informatika angkatan 2010
seperjuangan terutama kelas B.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
viii
KATA PENGANTAR
Assalamu’alaikum Warahmatullah Wabarakatuh.
Puji syukur penulis panjatkan kepada Allah SWT karena telah
memberikan rahmat-Nya kepada penulis sehingga penulis dapat menyelesaikan
Laporan Tugas Akhir dengan judul Pembuatan Game “Education Card”
Menggunakan HTML5 Sebagai Sarana Pembelajaran Bahasa Inggris dengan
lancar dan tepat pada waktunya.
Pembuatan laporan Tugas Akhir ini dimaksudkan untuk memenuhi
persyaratan kelulusan Diploma III Teknik Informatika Fakultas Matematika dan
Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta.Ucapan terima kasih
penulis haturkan kepada semua pihak yang telah membantu dalam penyelesaian
laporan Tugas Akhir ini antara lain :
1. Prof. Ir. Ari Handono Ramelan, M.Sc(Hons).,Ph.D, selaku Pimpinan
Fakultas MIPA Universitas Sebelas Maret yang memberikan izin kepada
penulis untuk belajar.
2. Drs. YS. Palgunadi, M.Sc., selaku Ketua Program Studi Diploma III
Teknik Informatika Universitas Sebelas Maret yang memberikan izin
kepada penulis untuk belajar
3. Liliek Triyono, S.T, M.Kom selaku dosen pembimbing yang telah
memberikan pengarahan dalam penyusunan Tugas Akhir ini.
4. Taufiqurrohman NH, S.Kom, selaku pembimbing akademik.
5. Para Dosen Program Studi Diploma III Teknik Informatika Universitas
Sebelas Maret yang telah memberikan bekal ilmu kepada penulis.
6. Kedua orang tua tercinta dan saudara-saudaraku yang telah memberikan
doa, motivasi, dana dan segalanya.
7. Teman-teman Teknik Informatika 2010 yang telah membantu dalam
segala hal.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
ix
8. Teman-teman INTUISI yang telah membantu dalam segala hal..
Akhir kata, semoga tulisan ini dapat memberikan manfaat dan memberikan
wawasan tambahan bagi para pembaca dan khususnya bagi penulis sendiri.
Wassalamu’alaikum Warohmatullah Wabarakatuh.
.
Surakarta, Juni 2013
Penulis
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
x
DAFTAR ISI
Halaman
HALAMAN JUDUL ........................................................................... i
HALAMAN PERSETUJUAN ............................................................. ii
HALAMAN PENGESAHAN .............................................................. iii
HALAMAN ABSTRACT.................................................................... iv
HALAMAN MOTTO .......................................................................... vi
HALAMAN PERSEMBAHAN ........................................................... vii
KATA PENGANTAR ......................................................................... viii
DAFTAR ISI ....................................................................................... x
DAFTAR TABEL ............................................................................... xii
DAFTAR GAMBAR ........................................................................... xiii
BAB I. PENDAHULUAN ............................................................... 1
1.1 Latar Belakang Masalah ....................................................... 1
1.2 Perumusan Masalah ............................................................. 2
1.3 Batasan Masalah .................................................................. 2
1.4 TujuanPenelitian .................................................................. 2
1.5 Manfaat Penelitian ............................................................... 3
1.6 Metodologi Penelitian .......................................................... 3
1.6.1 Metode Pengumpulan Data 3
1.6.2 Metode Perancangan Game 3
1.6.3 Metode Pembuatan Game 4
1.6.4 Implementasi dan Uji Coba Game 4
1.7 Sistematika Penulisan .......................................................... 4
BAB II. LANDASAN TEORI ........................................................... 6
2.1 Browser ............................................................................... 6
2.2 HTML5 ................................................................................ 7
2.3 CSS3 .................................................................................... 9
2.4 JavaScript ........................................................................... 10
2.5 CorelDraw ........................................................................... 11
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
xi
2.6 Adobe Photoshop ................................................................ 11
2.7 Notepad++ ......................................................................... 12
2.8 Metode Black Box .............................................................. 12
BAB III. ANALISIS KEBUTUHAN DAN PERANCANGAN SISTEM 13
3.1 Analisis Kebutuhan .............................................................. 13
3.1.1 Kebutuhan Pembuatan ............................................. 13
3.1.1.1 Kebutuhan Hardware Pembuatan ................ 13
3.1.1.2 Kebutuhan Software Pembuatan .................. 14
3.1.2 Kebutuhan Pemakaian .............................................. 14
3.1.2.1 Kebutuhan Hardware Untuk Menjalankan . 14
3.1.2.2 Kebutuhan Softwaree Untuk Menjalankan .. 15
3.2 Perancangan Pembuatan Permainan ..................................... 15
3.2.1 Konsep .................................................................... 16
3.2.2 Pengumpulan Data .................................................. 16
3.2.3 Perancangan Game .................................................. 17
3.2.4 Tahap Pembuatan Game .......................................... 17
3.2.5 Tahap Uji Coba ....................................................... 17
3.2.6 Penerapan dan Perbaikan ......................................... 17
3.3 Perancangan Pembuatan Permainan...................................... 17
3.3.1 Konsep/Alur Cerita Permainan ................................. 18
3.3.2 Kontrol ..................................................................... 19
3.3.3 Alur Pembuatan Grafik Dan Interface Game ............ 19
3.4 Perancangan Desain Karakter .............................................. 20
3.5 Perancnagan Background .................................................... 20
3.6 Perancangan Interface Menu Permaianan ............................. 21
3.6.1 Halaman Intro ......................................................... 21
3.6.2 Perancangan Main Menu .......................................... 21
3.6.3 Halaman Level ......................................................... 22
3.6.4 Halaman Instruksi .................................................... 23
3.6.5 Halaman About ........................................................ 23
3.7 Perancangan Level ............................................................... 24
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
xii
3.7.1 Level 1 ..................................................................... 24
3.7.2 Level 2 ..................................................................... 25
3.7.3 Level 3 ..................................................................... 26
3.7.4 Level 4 ..................................................................... 27
3.8 Pembuatan Materi Permainan ............................................... 28
3.8.1 Pembuatan Logo Education Card ............................. 28
3.8.2 Pembuatan kartu ....................................................... 29
3.8.2.1 Kartu Bagian Belakang ............................... 29
3.8.2.2 Object Buah ............................................... 29
3.8.2.3 Kartu Bagian Depan ................................... 30
3.8.2.4 Pembuatan Deck Kartu ................................ 30
3.8.3 Pembuatan Background ........................................... 31
3.8.3.1 Main Menu ................................................. 31
3.8.3.2 Background Level ...................................... 31
3.8.3.3 Background Instruction .............................. 32
3.8.3.4 Background About dan Game Utama .......... 33
3.8.4 Pembuatan Tombol................................................... 33
3.8.4.1 Tombol Level .............................................. 33
3.8.4.2 Tombol Back .............................................. 34
3.8.4.3 Tombol Next dan Previous ......................... 34
3.9 Tahap Implementasi ............................................................ 34
3.10 Hasil Game ......................................................................... 35
BAB IV. IMPLEMENTASI DAN EVALUASI SISTEM.................... 36
4.1 Detail Game ......................................................................... 36
4.1.1 Interface Main Menu ............................................... 36
4.1.2 Interface Instruction ................................................ 37
4.1.3 Interface About ........................................................ 38
4.1.4 Interface Level ......................................................... 39
4.1.5 Interface Game ........................................................ 40
4.1.6 Interface Pause ........................................................ 44
4.1.7 Interface Scoring ..................................................... 45
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
xiii
4.1.8 Interface Game Over ............................................... 45
4.2 Analisa dan Uji Coba Game ................................................. 46
4.2.1 Pengujian pada Google Chrome 46
4.2.2 Pengujian pada Mozilla Firefox 23 60
4.2.3 Pengujian pada Opera Browser 12.15 62
4.2.4 Pengujian pada Internet Explorer 9 65
4.2.5 Pengujian pada Opera Mobile versi 10 67
4.2.6 Pengujian menggunakan Metode Black Box 68
BAB V. PENUTUP .......................................................................... 91
5.1 Kesimpulan .......................................................................... 91
5.2 Saran.................................................................................... 91
DAFTAR PUSTAKA .......................................................................... 92
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
xiv
DAFTAR TABEL
Nomor Halaman
Tabel 2.1 Tabel fitur HTML5 12
Tabel 4.1 Hasil Pengujian Interface Main Menu 68
Tabel 4.2 Hasil Pengujian Interface Instruction ................................... 70
Tabel 4.3 Hasil Pengujian Interface About 71
Tabel 4.4 Hasil Pengujian Interface Level yang Pertama 73
Tabel 4.5 Hasil Pengujian Interface Level yang Kedua 77
Tabel 4.6 Hasil Pengujian Interface Game 80
Tabel 4.7 Hasil Pengujian Interface scoring 84
Tabel 4.8 Hasil Pengujian Interface game over 87
Tabel 4.9 Hasil Pemetaan Uji Coba Beberapa browser 90
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
xv
DAFTAR GAMBAR
Nomor Halaman
Gambar 3.1 Langkah Pengembangan Game 16
Gambar 3.2 Alur Perancangan Interface Game 19
Gambar 3.3 Perancangan Desain Kartu 20
Gambar 3.4 Perancangan Halaman Intro 21
Gambar 3.5 Perancangan halaman Main Menu 22
Gambar 3.6 Perancangan Halaman Level 22
Gambar 3.7 Perancangan Halaman Level Selanjutnya 23
Gambar 3.8 Perancangan Halaman Instruksi 23
Gambar 3.9 Perancangan Halaman About 24
Gambar 3.10 Perancangan level 1 2cards 24
Gambar 3.11 Perancangan level 1 3cards 25
Gambar 3.12 Perancangan level 2 2cards 25
Gambar 3.13 Perancangan level 2 3cards 26
Gambar 3.14 Perancangan level 3 2cards 26
Gambar 3.15 Perancangan level 3 3cards 27
Gambar 3.16 Perancangan level 4 2cards 27
Gambar 3.17 Perancangan level 4 3cards 28
Gambar 3.18 Logo Education Card 28
Gambar 3.19 Kartu Bagian Belakang 29
Gambar 3.20 Object Buah 30
Gambar 3.21 Kartu Bagian Depan 31
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
xvi
Gambar 3.22 Deck Kartu 31
Gambar 3.23 Main Menu 31
Gambar 3.24 Background Menu Level 32
Gambar 3.25 Background Instruction 32
Gambar 3.26 Background About 33
Gambar 3.27 Tombol Level 33
Gambar 3.22 Tombol Back 34
Gambar 3.23 Next dan Previous 34
Gambar 4.1 Interface Main Menu 37
Gambar 4.2 Interface Instruction 38
Gambar 4.3 Interface About 38
Gambar 4.4 Interface Level Pertama 39
Gambar 4.5 Interface Level Kedua 40
Gambar 4.6 Interface Game Level Easy 2cards 40
Gambar 4.7 Interface Game Level Easy 3cards 41
Gambar 4.8 Interface Game Level Medium 2cards 41
Gambar 4.9 Interface Game Level Medium 3cards 42
Gambar 4.10 Interface Game Level Hard 2cards 42
Gambar 4.11 Interface Game Level Hard 3cards 43
Gambar 4.12 Interface Game Level Expert 2cards 43
Gambar 4.13 Interface Game Level Expert 3cards 44
Gambar 4.14 Interface Pause 44
Gambar 4.15 Interface Scoring 45
Gambar 4.16 Interface Game Over 45
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
xvii
Gambar 4.17 Interface Main Menu pada Chrome 0 47
Gambar 4.18 Interface Main Menu pada Chrome 4 47
Gambar 4.19 Interface Main Menu pada Chrome 8 48
Gambar 4.20 Interface Instruction pada Chrome 0 48
Gambar 4.21 Interface Instruction pada Chrome 4 49
Gambar 4.22 Interface Instruction pada Chrome 8 49
Gambar 4.23 Interface About pada Chrome 0 50
Gambar 4.24 Interface About pada Chrome 4 50
Gambar 4.25 Interface About pada Chrome 8 51
Gambar 4.26 Interface Level Pertama pada Chrome 0 51
Gambar 4.27 Interface Level Pertama pada Chrome 4 52
Gambar 4.28 Interface Level Pertama pada Chrome 8 52
Gambar 4.29 Interface Level Kedua pada Chrome 0 53
Gambar 4.30 Interface Level Kedua pada Chrome 4 53
Gambar 4.31 Interface Level Kedua pada Chrome 8 54
Gambar 4.32 Interface Main Game pada Chrome 0 54
Gambar 4.33 Interface Main Game pada Chrome 4 55
Gambar 4.34 Interface Main Game pada Chrome 8 55
Gambar 4.35 Interface Pause pada Chrome 0 56
Gambar 4.36 Interface Pause pada Chrome 4 56
Gambar 4.37 Interface Pause pada Chrome 8 57
Gambar 4.38 Interface Scoring pada Chrome 0 57
Gambar 4.39 Interface Scoring pada Chrome 4 58
Gambar 4.40 Interface Scoring pada Chrome 8 58
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
xviii
Gambar 4.41 Interface Game Over pada Chrome 0 59
Gambar 4.42 Interface Game Over pada Chrome 4 59
Gambar 4.43 Interface Game Over pada Chrome 8 60
Gambar 4.44 Interface Main Menu pada Mozilla 23 61
Gambar 4.45 Interface Main Game pada Mozilla 23 61
Gambar 4.46 Interface Game Over pada Mozilla 23 62
Gambar 4.47 Interface Main Menu pada Opera Browser 12.15 63
Gambar 4.48 Interface Game pada Opera Browser 12.15 63
Gambar 4.49 Interface Pause pada Opera Browser 12.15 64
Gambar 4.50 Interface Game Over pada Opera Browser 12.15 65
Gambar 4.51 Interface Main Menu pada IE 9 66
Gambar 4.52 Interface Game pada IE 9 66
Gambar 4.53 Interface Game Over pada IE 9 67
Gambar 4.54 Tampilan Mian menu pada Opera Mobile 10 68
top related