Game The Bear Saving Earth Pada Platform HTML5 TUGAS AKHIR

Transkripsi

1 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 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2013

2 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 : NIDN : ii

3 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 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: NIDN : Mengetahui, Ketua Jurusan Teknik Informatika Eko Budi Cahyono, S.Kom., MT NIP: iii

4 Yang bertanda tangan dibawah ini, LEMBAR PERNYATAAN Nama : Nailufar Tempat, Tgl Lahir : Jember, 16 Agustus 1989 NIM : 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 Haryady, S.Kom., MT Nailufar iv

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

6 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 Nailufar vi

7 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 Latar Belakang Rumusan Masalah Tujuan Batasan Masalah Metode Penelitian Studi Pustaka Analisa Sistem Perancangan Desain Sistem Implementasi Sistem Pengujian Sistem Sistematika Penulisan 3 BAB I.I 5 LANDASAN TEORI Pemanasan Global Penyebab Pemanasan Global Dampak Pemanasan Global Penanganan Pemanasan Global 8 1

8 2.2 Game Pengertian Game Jenis- Jenis Game Jenis Game Menurut Pola Interaksi Pemain Pembuatan Game Game Edukasi Teknologi HTML Tiled Map Editor MelonJS JavaScript Sejarah JavaScript 23 BAB III.. 24 ANALISA DAN PERANCANGAN SISTEM Analisa Sistem Deskripsi Sistem Skenario Game Analisa Kebutuhan Kebutuhan Fungsional Kebutuhan Software Flowchart Sistem Use Case Perancangan Sistem Activity Diagram Activity Diagram Bermain Activity Diagram Melihat Menu Help State Diagram Sequence Diagram Sequence Diagram Bermain Class Diagram Desain Interface Desain Tampilan Awal Desain Tampilan Help 32 2

9 Desain Tampilan Menu Play Desain Tampilan Game Over 33 BAB IV.. 34 IMPLEMENTASI DAN PENGUJIAN Implementasi Lingkungan Implementasi Pengembangan Kebutuhan Hardware Kebutuhan Software Implementasi Game Karakter Implementasi Karakter Utama Implementasi Karakter Musuh Implementasi Level Implementasi Level Implementasi Level Background Implementasi Background Level Implementasi Background Level Implementasi Tampilan Awal Implementasi Tampilan Instruksi Implementasi Tampilan Game Over Implementasi Kode Program menggunakan Query MelonJS Kode Program Index.html Kode Program Resource.js Kode Program Game.js Kode Program Title.js Kode Program Play.js Konfigurasi Game Objek Karakter Utama (PlayerEntity) Karakter Musuh Tampilan Game Tampilan Awal Game

10 Tampilan Instruksi Tampilan Permainan Tampilan Permainan Level Tampilan Permainan Level Tampilan Game Over Pengujian Pengujian Fungsional Game Pengujian Use Case Deskripsi Pengujian Use Case Prosedur Pengujian Use Case Masukan Pengujian Use Case Keluaran Pengujian Use Case Kriteria Evaluasi Hasil Pengujian Use Case Hasil yang di dapatkan Pengujian Use Case Kesimpulan Pengujian Use Case 53 5 BAB V. 54 PENUTUP Kesimpulan Saran 54 DAFTAR PUSTAKA 55 4

11 Daftar Gambar Gambar 2.1 Proses Pemanasan global 6 Gambar Single player vs. Game 12 Gambar Multiple individual Player vs Game 13 Gambar Player vs Player 13 Gambar Unilateral Competition 14 Gambar Mutilateral Competition 14 Gambar Cooperative play 15 Gambar 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 Gambar 4.12 Kode Program Game.js 45 1

12 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 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 2

13 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 Tabel 4.8 Kesimpulan Pengujian Use Case 53 1

14 DAFTAR PUSTAKA [1] Triana, Vivi Pemanasan Global. [2] diakses pada tanggal 17 Mei 2013 [3] Utomo, Budi Peranan Hutan Dalam Mereduksi Pemanasan Global. [4] Crawford, Chris The Art of Computer Game Design. [5] Handryantini, Eva S.Kom, M.MT Permainan Edukatif Berbasis Komputer untuk Siswa Sekolah Dasar. [6] Makzan HTML% Games Development by Example Beginner s Guide [7] Morrison, Michael Head First Javascript. [8] Fullerton, Tracy, Swain, Christopher, Hoffman, StevenS Game Design Workshop A Playcentric Approach to Creating Innovative Games. [9] diakses pada tanggal 18 Mei