GAME DEVELOPMENT âEDUCATION CARDâ BROWSER-BASED USING HTML5.
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit
to user
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
ii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
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 198601commit
1 001 to user
iii
NIP. 19560407 198303 1 004
perpustakaan.uns.ac.id
digilib.uns.ac.id
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.
commit to user
iv
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
v
perpustakaan.uns.ac.id
digilib.uns.ac.id
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…”
commit to user
vi
perpustakaan.uns.ac.id
digilib.uns.ac.id
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.
commit to user
vii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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.
commit to user
viii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
ix
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
Sistematika Penulisan ..........................................................
4
BAB II. LANDASAN TEORI ...........................................................
6
1.7
2.1
Browser ...............................................................................
6
2.2
HTML5 ................................................................................
7
2.3
CSS3 ....................................................................................
9
2.4
JavaScript ...........................................................................
commit to user
CorelDra w...........................................................................
10
2.5
x
11
perpustakaan.uns.ac.id
digilib.uns.ac.id
2.6
Adobe Photoshop ................................................................
11
2.7
Notepad+ + .........................................................................
12
2.8
Metode Black Box ..............................................................
12
BAB III. ANALISIS KEBUTUHAN DAN PERANCANGAN SISTEM
3.1
13
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
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
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 ........................................................
commit to user
3.7 Perancangan Level ...............................................................
23
3.2
3.3
xi
24
perpustakaan.uns.ac.id
digilib.uns.ac.id
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 ........................................................
commit
to user
4.1.7 Interface Scoring
.....................................................
44
xii
45
perpustakaan.uns.ac.id
digilib.uns.ac.id
4.1.8 Interface Game Over ...............................................
45
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
4.2
5.1
Kesimpulan ..........................................................................
91
5.2
Saran....................................................................................
91
DAFTAR PUSTAKA ..........................................................................
92
commit to user
xiii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
xiv
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
31
xv
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
45
xvi
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit
to user
58
xvii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
xviii
digilib.uns.ac.id
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
commit
to user
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
ii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
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 198601commit
1 001 to user
iii
NIP. 19560407 198303 1 004
perpustakaan.uns.ac.id
digilib.uns.ac.id
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.
commit to user
iv
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
v
perpustakaan.uns.ac.id
digilib.uns.ac.id
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…”
commit to user
vi
perpustakaan.uns.ac.id
digilib.uns.ac.id
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.
commit to user
vii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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.
commit to user
viii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
ix
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
Sistematika Penulisan ..........................................................
4
BAB II. LANDASAN TEORI ...........................................................
6
1.7
2.1
Browser ...............................................................................
6
2.2
HTML5 ................................................................................
7
2.3
CSS3 ....................................................................................
9
2.4
JavaScript ...........................................................................
commit to user
CorelDra w...........................................................................
10
2.5
x
11
perpustakaan.uns.ac.id
digilib.uns.ac.id
2.6
Adobe Photoshop ................................................................
11
2.7
Notepad+ + .........................................................................
12
2.8
Metode Black Box ..............................................................
12
BAB III. ANALISIS KEBUTUHAN DAN PERANCANGAN SISTEM
3.1
13
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
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
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 ........................................................
commit to user
3.7 Perancangan Level ...............................................................
23
3.2
3.3
xi
24
perpustakaan.uns.ac.id
digilib.uns.ac.id
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 ........................................................
commit
to user
4.1.7 Interface Scoring
.....................................................
44
xii
45
perpustakaan.uns.ac.id
digilib.uns.ac.id
4.1.8 Interface Game Over ...............................................
45
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
4.2
5.1
Kesimpulan ..........................................................................
91
5.2
Saran....................................................................................
91
DAFTAR PUSTAKA ..........................................................................
92
commit to user
xiii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
xiv
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
31
xv
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
45
xvi
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit
to user
58
xvii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
xviii