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
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
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.
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 resea rch methods such a s 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.
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.
.
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”
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
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
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
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
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
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.10Hasil 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
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
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
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
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
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
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
