Game The Bear Saving Earth Pada Platform HTML5
TUGAS AKHIR
Diajukan Untuk Memenuhi
Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang
Disusun Oleh : Nailufar 08560388
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH MALANG
2013
ii
LEMBAR PERSETUJUAN
GAME THE BEAR SAVING EARTH PADA
PLATFORM HTML5
TUGAS AKHIR
Diajukan Untuk Memenuhi
Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang
Mengetahui/Menyetujui
Dosen Pembimbing I Dosen Pembimbing II
Haryady, S.Kom., MT Lailatul Husnia, S.Kom NIP : 101.9406.0262 NIDN : 0730108461
iii
LEMBAR PENGESAHAN
GAME THE BEAR SAVING EARTH PADA
PLATFORM HTML5
TUGAS AKHIR
Diajukan Untuk Memenuhi
Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang
Disusun Oleh : Nailufar 08560388
Tugas Akhir ini telah diuji dan dinyatakan lulus oleh tim penguji pada tanggal Mengetahui/Menyetujui
Penguji I Penguji II
Eko Budi Cahyono, S.Kom., MT Evi Dwi Wahyuni, S.Kom NIP: 108.9504.0330 NIDN : 0718108701
Mengetahui,
Ketua Jurusan Teknik Informatika
Eko Budi Cahyono, S.Kom., MT NIP: 108.9504.0330
iv
LEMBAR PERNYATAAN
Yang bertanda tangan dibawah ini, Nama : Nailufar
Tempat, Tgl Lahir : Jember, 16 Agustus 1989 NIM : 08560388
Fakultas/Jurusan : Teknik / Informatika
Menyatakan bahwa karya ilmiah/skripsi/tugas akhir saya yang berjudul: ”Game The Bear Saving Earth Pada Platform HTML5”
Adalah bukan merupakan karya tulis orang lain, baik sebagian maupun
keseluruhan, kecuali dalam bentuk kutipan yang telah saya sebutkan sumbernya. Demikian surat pernyataan ini saya buat dengan sebenar-benarnya dan apabila pernyataan ini tidak benar, saya siap mendapatkan sanksi akademis.
Mengetahui, Malang, 14 Januari 2014 Dosen Pembimbing Yang Menyatakan
v
LEMBAR PERSEMBAHAN
Alhamdulillah puji syukur kehadirat yang maha esa, sehingga penulis akhirnya dapat menyelesaikan Tugas Akhir ini. Penulis mengucapkan terima kasih dan penghargaan sebesar-besarnya kepada :
1. Ibu saya yang selalu dapat menjadi penengah antara saya dan ayah saya, “I Love You Mom”.
2. Ayah saya Bapak Ir. Abdul Salam Mba., S.H., M.Hum. yang selalu memotivasi saya setiap hari setiap waktu untuk mengingatkan saya segera menyelesaikan Tugas Akhir. “I Love You Baa”.
3. Pembimbing saya, Bapak Haryady, S.Kom., MT., yang dengan sukarela mencarikan literatur2 terkait dan Ibu Lailatul Husnia, S.Kom., yang membantu memperbaiki game saya.
4. Bapak Eko Budi Cahyono, S.Kom., MT dan Ibu Evi Dwi Wahyuni, S.Kom, selaku penguji saya, “Bu evi keren banget dah pokoknya!” 5. Adik saya Asilah yang memotivasi saya dengan segala kejudesannya. 6. Teman-teman seperjuangan saya yang juga andil memotivasi dan
membantu mencarikan solusi serta menjawab pertanyaan-pertanyaan konyol dan bodoh saya : Sanya, Prita, Septian, Ayu, Ulil, Mirzha, Farid, Fera, Arre’, Dephi, Misbah, Adhe, Mas Sudar, dan lain sebagainya.
7. My Bestie Wendy yang lulus duluan, kamu lulus duluan beneran sangat mempengaruhi motivasi kelulusanku, Rista makasi buat candaan yang kadang2 random banget, satu lagi Biebah makasi buat semua sikap sarkas mu ke aku “it’s really fun”
8. Team MelonJs, Mr jay Oster, dan Sabichiss, 1 grup dan 2 orang yang saya tau keberadaanya dari Google, Makasih udah jawab pertanyaan2 seputar melonJs dan yang lainnya.
9. Anak kos A3 buat tumpangan kos nya selama ini.
10. Dan terima kasih yang terakhir untuk temen-temen wendy : mufi, muyeahs, dinda, dan adi, yang ngajak maen waktu lagi suntuk banget dari Tugas Akhir.
Hanya Ucapan terima kasih yang dapat peulis ucapkan, semoga Allah SWT membalas atas semua kebaikan yang telah dilakukan, Amin.
vi
KATA PENGANTAR
Bismillahirahmanirrahim. Dengan mengucap puji dan syukur kehadirat
Allah SWT atas limpahan rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan dengan baik tugas akhir yang berjudul:
“GAME THE BEAR SAVING EARTH PADA PLATFORM HTML5” Pada penelitian tugas akhir ini, dirancang sebuah game yang mengandung unsur hiburan dan edukasi berupa himbauan untuk penanaman pohon sebagai upaya pengurangan dampak global warming. Game The Bear Saving Earth dibuat berbasis web dan dikembangkan dengan bahasa pemrograman HTML5 serta
Javascript.
Penulis menyadari dengan sepenuhnya bahwa penelitian ini masih jauh dari kesempurnaan oleh sebab itu penulis mengharapkan masukan berupa saran maupun kritikan yang membangun untuk pengembangan game The Bear Saving
Earth.
Penulis
1
Daftar Isi
COVER……….. i
LEMBAR PERSETUJUAN……… ii
LEMBAR PENGESAHAN………. iii
LEMBAR PERNYATAAN………. iv
ABSTRAKSI……… v
ABSTRACT………... vi
LEMBAR PERSEMBAHAN ……… vii
KATA PENGANTAR……… viii
Daftar Isi………. ix
Daftar Gambar……… xii
Daftar Tabel ……… xiv
BAB I ……… 1 PENDAHULUAN………... 1 1.1 Latar Belakang……… 1 1.2 Rumusan Masalah……… 2 1.3 Tujuan ……… 2 1.4 Batasan Masalah……… 2 1.5 Metode Penelitian……… 2 1.5.1 Studi Pustaka……… 2 1.5.2 Analisa Sistem……… 2
1.5.3 Perancangan Desain Sistem……… 3
1.5.4 Implementasi Sistem ……… 3 1.5.5 Pengujian Sistem……… 3 1.6 Sistematika Penulisan ……… 3 BAB I……….I 5 LANDASAN TEORI……… 5 2.1 Pemanasan Global………... 5
2.1.1 Penyebab Pemanasan Global ……… 6
2.1.2 Dampak Pemanasan Global……….. 7
2
2.2 Game ………. 9
2.2.1 Pengertian Game……….. 9
2.2.2 Jenis- Jenis Game……… 9
2.2.3 Jenis Game Menurut Pola Interaksi Pemain……… 12
2.2.4 Pembuatan Game……… 15
2.3 Game Edukasi ……… 17
2.4 Teknologi HTML5……… 18
2.4.1 Tiled Map Editor……… 21
2.4.2 MelonJS……… 21
2.5 JavaScript……… 22
2.5.1 Sejarah JavaScript……… 23
BAB III……….. 24
ANALISA DAN PERANCANGAN SISTEM……… 24
3.1 Analisa Sistem……… 24 3.1.1 Deskripsi Sistem……… 24 3.1.2 Skenario Game……… 24 3.1.3 Analisa Kebutuhan……… 25 3.1.3.1 Kebutuhan Fungsional……… 25 3.1.3.2 Kebutuhan Software……… 26 3.1.3.2.1 Flowchart Sistem……… 26 3.1.3.2.2 Use Case……… 26 3.2 Perancangan Sistem……… 27 3.2.1 Activity Diagram……… 27
3.2.1.1 Activity Diagram Bermain……… 28
3.2.1.2 Activity Diagram Melihat Menu Help……… 29
3.2.2 State Diagram ………... 29
3.2.3 Sequence Diagram……… 30
3.2.3.1 Sequence Diagram Bermain……… 30
3.2.4 Class Diagram ……… 30
3.2.5 Desain Interface……… 31
3.2.5.1 Desain Tampilan Awal……… 31
3
3.2.5.3 Desain Tampilan Menu Play……… 32
3.2.5.4 Desain Tampilan Game Over……… 33
BAB IV……….. 34
IMPLEMENTASI DAN PENGUJIAN……… 34
4.1 Implementasi……… 34
4.1.1 Lingkungan Implementasi Pengembangan……… 34
4.1.1.1 Kebutuhan Hardware……… 34
4.1.1.2 Kebutuhan Software……… 34
4.1.2 Implementasi Game………. 35
4.1.2.1 Karakter……… 35
4.1.2.1.1 Implementasi Karakter Utama……… 35
4.1.2.1.2 Implementasi Karakter Musuh……… 36
4.1.2.2 Implementasi Level……… 37
4.1.2.2.1 Implementasi Level 1……… 37
4.1.2.2.2 Implementasi Level 2……… 38
4.1.2.3 Background……… 39
4.1.2.3.1 Implementasi Background Level 1……… 39
4.1.2.3.2 Implementasi Background Level 2……… 39
4.1.2.4 Implementasi Tampilan Awal ……… 40
4.1.2.5 Implementasi Tampilan Instruksi……… 41
4.1.2.6 Implementasi Tampilan Game Over……… 42
4.1.2.7 Implementasi Kode Program menggunakan Query MelonJS… 43 4.1.2.7.1 Kode Program Index.html……… 43
4.1.2.7.2 Kode Program Resource.js……… 44
4.1.2.7.3 Kode Program Game.js……… 45
4.1.2.7.4 Kode Program Title.js ……… 45
4.1.2.7.5 Kode Program Play.js ……… 45
4.1.2.8 Konfigurasi Game Objek……… 46
4.1.2.8.1 Karakter Utama (PlayerEntity) ……… 46
4.1.2.8.2 Karakter Musuh……… 47
4.1.3 Tampilan Game……… 47
4
4.1.3.2 Tampilan Instruksi……… 48
4.1.3.3 Tampilan Permainan……… 49
4.1.3.3.1 Tampilan Permainan Level 1……… 49
4.1.3.3.2 Tampilan Permainan Level 2……… 49
4.1.3.4 Tampilan Game Over……… 50
4.2 Pengujian……… 51
4.2.1 Pengujian Fungsional Game……… 51
4.2.2 Pengujian Use Case……… 51
4.2.2.1 Deskripsi Pengujian Use Case……… 51
4.2.2.2 Prosedur Pengujian Use Case……… 52
4.2.2.3 Masukan Pengujian Use Case……… 52
4.2.2.4 Keluaran Pengujian Use Case ……… 52
4.2.2.5 Kriteria Evaluasi Hasil Pengujian Use Case……… 52
4.2.2.6 Hasil yang di dapatkan Pengujian Use Case……… 53
4.2.2.7 Kesimpulan Pengujian Use Case……… 53
5 BAB V………. 54 PENUTUP……….. 54 5.1 Kesimpulan……… 54 5.2 Saran……… 54 DAFTAR PUSTAKA……… 55
1
Daftar Gambar
Gambar 2.1 Proses Pemanasan global……… 6
Gambar 2.2.3.1 Single player vs. Game……… 12
Gambar 2.2.3.2 Multiple individual Player vs Game ……… 13
Gambar 2.2.3.3 Player vs Player……… 13
Gambar 2.2.3.4. Unilateral Competition……… 14
Gambar 2.2.3.5. Mutilateral Competition……… 14
Gambar 2.2.3.6. Cooperative play……… 15
Gambar 2.2.3.7. Team Competition……… 15
Gambar 3.2 Flowchart Menu Bermain……… 26
Gambar 3.1 Use Case Diagram Menu Utama……… 27
Gambar 3.3 Activity Diagram Bermain……… 28
Gambar 3.4 Activity Diagram Melihat Menu Help……… 29
Gambar 3.5 State Diagram bermain……… 29
Gambar 3.6 Sequence Diagram Bermain……… 30
Gambar 3.7 Class Diagram Game The Bear Saving Earth……… 31
Gambar 3.8 Tampilan Awal Game……… 31
Gambar 3.9 Desain Tampilan Menu Instruksi Permainan……… 32
Gambar 3.10 Desain Tampilan Pilihan Menu Play level 1……… 32
Gambar 3.11 Desain Tampilan Game Over……… 33
Gambar 4.1 Implementasi Karakter Utama……… 36
Gambar 4.2 Implementasi Karakter Musuh……… 37
Gambar 4.3 Implementasi Level 1 menggunakan Tiled Map Editor…… 38
Gambar 4.4 Implementasi Level 2 menggunakan Tiled Map Editor…… 38
Gambar 4.5 Implementasi Backgroud Level 1……… 39
Gambar 4.6 Implementasi Backgroud Level 2……… 40
Gambar 4.7 Implementasi Tampilan Awal Game……… 41
Gambar 4.8 Implementasi Tampilan Instruksi……… 42
Gambar 4.9 Implementasi Tampilan Game Over……… 43
Gambar 4.10 Kode Program Index.html……… 44
Gambar 4.11 Kode Resources.js……… 44
2
Gambar 4.13 Kode program Title.js……… 45
Gambar 4.14 Kode program Play.js……… 46
Gambar 4.15 Karakter Pemain……… 46
Gambar 4.16 Kode Program PlayerEntity pada entities.js……….. 46
Gambar 4.17 KarakterMusuh………... 47
Gambar 4.18 Kode Program EnemyEntity pada entities.js……… 47
Gambar 4.19 Gambar Menu Utama……… 48
Gambar 4.20 Tampilan Instruksi Permainan……… 48
Gambar 4.21 Tampilan Game Level 1……… 49
Gambar 4.22 Tampilan Game Level 2……… 50
Gambar 4.23 Tampilan Game Over……… 50
1
Daftar Tabel
Tabel 3.1 Penjelasan Use Case Diagram Menu Utama……… 27
Tabel 4.1 Pengujian Pada Beberapa Browser……… 51
Tabel 4.2 Deskripsi Identifikasi Use Case……… 51
Tabel 4.3 Prosedur Pengujian Use Case……… 52
Tabel 4.4 Masukan Pengujian Use Case……… 52
Tabel 4.5 Keluaran Pengujian Use Case……… 52
Tabel 4.6 Kriteria Evaluasi Hasil Pengujian Use Case……… 52
Tabel 4.7 Hasil yang di dapatkan Pengujian Use Case……… 53
1
DAFTAR PUSTAKA
[1] Triana, Vivi. 2008. Pemanasan Global.
[2] http://www.menlh.go.id/mengapa-kita-perlu-melindungi-lapisan-ozon/ diakses pada tanggal 17 Mei 2013
[3] Utomo, Budi. 2007. Peranan Hutan Dalam Mereduksi Pemanasan Global. [4] Crawford, Chris. 1982. The Art of Computer Game Design.
[5] Handryantini, Eva S.Kom, M.MT. 2009. Permainan Edukatif Berbasis Komputer untuk Siswa Sekolah Dasar.
[6] Makzan. 2011. HTML% Games Development by Example Beginner’s Guide 2011.
[7] Morrison, Michael. 2007. Head First Javascript.
[8] Fullerton, Tracy, Swain, Christopher, Hoffman, StevenS. 2008. Game Design Workshop A Playcentric Approach to Creating Innovative Games. [9] http://melonjs.github.io/tutorial/ diakses pada tanggal 18 Mei 2013.
