perpustakaan.uns.ac.id digilib.uns.ac fileperpustakaan.uns.ac.id digilib.uns.ac.id tugas akhir...

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


commit to user

ii

HALAMAN PERSETUJUAN


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

iii

HALAMAN PENGESAHAN


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


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.


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


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…”


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.


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.


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


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


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


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


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


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


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.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


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


commit to user

xvii

Gambar 4.17 Interface Main Menu pada Chrome 0 47



Gambar 4.20 Interface Instruction pada Chrome 0 48



Gambar 4.23 Interface About pada Chrome 0 50



Gambar 4.26 Interface Level Pertama pada Chrome 0 51



Gambar 4.29 Interface Level Kedua pada Chrome 0 53



Gambar 4.32 Interface Main Game pada Chrome 0 54



Gambar 4.35 Interface Pause pada Chrome 0 56



Gambar 4.38 Interface Scoring pada Chrome 0 57




commit to user

xviii

Gambar 4.41 Interface Game Over pada Chrome 0 59



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

perpustakaan.uns.ac.id digilib.uns.ac fileperpustakaan.uns.ac.id digilib.uns.ac.id tugas akhir...

Documents