Sebelum kalian memulai tutorial ini, sebaiknya anda tahu terlebih dahulu tentang HTML, CSS, dan jQuery. Baiklah disini kami akan menjelaskan terlebih dahulu pengertian dari HTML, CSS, dan jQuery?
HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text tersebut. Kemampuan text inilah yang dinamakan hypertext, walaupun pada implementasinya nanti tidak hanya text yang dapat dijadikan link.
Disebut Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal, dan jika berada di antara tanda lainnya akan tampak besar. Tanda ini di kenal sebagai HTML tag.
Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML.
Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.
jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.
Setelah anda paham apa itu HTML, CSS, jQuery. Maka anda dapat langsung mengikuti tutorial yang telah kami buat :
A. Kerangka HTML
Kita akan membuat file HTML menggunakan notepad++, silahkan unduh aplikasinya https://notepad-plus-plus.org/download/v7.5.4.html
Kemudian kita akan membuat kode kerangka awal HTML. Silahkan ikuti gambar dibawah ini.
Hasilnya :
Save kode yang telah kita buat dengan format “.html” dengan menekan “ctrl+s”. Simpan file didalam satu folder baru.
B. Kerangka CSS
Setelah membuat kerangka HTML maka langkah selanjutnya membuat kerangka CSS. yang mana kerangka CSS kita ketik diantara tag “head”.
C. Tombol Navigasi
Kemudian, kita akan membuat tombol dari Permainan JUMPBOX. Ketikkan kode dibawah ini diantara tag “body”.
4 Lalu, kita akan membuat tampilan dari tombol yang telah kita buat. Ketikkan kode dibawah ini diantara tag “style”.
Hasilnya (Tanpa “display: none;”) :
D. Latar Belakang / Background
Kemudian, kita akan membuat latar belakang dari JUMPBOX. Ketikkan kode dibawah ini diantara tag “body”.
6
Lalu, kita akan membuat tampilan dari latar belakang yang telah kita buat. Ketikkan kode dibawah ini diantara tag “style”.
Hasilnya :
E. Pemain / Karakter
Kemudian, kita akan membuat pemain / karakter dari JUMPBOX. Ketikkan kode dibawah ini diantara tag “div” dengan “id = latar”.
Lalu, kita akan membuat tampilan dari pemain / karakter yang telah kita buat. Ketikkan kode dibawah ini diantara tag “style”.
Hasilnya :
F. Rintangan
Kemudian, kita akan membuat rintangan dari JUMPBOX. Ketikkan kode dibawah ini diantara tag “div” dengan “id” latar.
Lalu, kita akan membuat tampilan dari rintangan yang telah kita buat. Ketikkan kode dibawah ini diantara tag “style”.
Hasilnya ( tanpa “left: 110%;“) :
G. Sistem Permainan / JQuery
Kemudian kita akan membuat kode kerangka awal jQuery dengan membuat file baru dengan menekan “ctrl + n” pada Notepad++. Silahkan ikuti gambar dibawah ini.
Save kode yang telah kita buat dengan format “.js” dengan menekan “ctrl+s”. Simpan file didalam satu folder baru dengan nama folder “js” didalam folder pertama.
Panggil file jQuery dan file “js” yang telah kita buat di HTML dengan mengetikkan kode berikut sebelum penutup tag “body”. Silahkan unduh file jQuery di https://jquery.com/download/ dan juga jQuery UI di http://jqueryui.com/resources/download/jquery-ui-1.12.1.zip
Kemudian, kita akan membuat rintangan bergerak menuju kearah pemain / karakter secara berulang. Ketik kode dibawah ini didalam file “js”.
Kemudian. kita akan pemain / karakter dapat melompat. Ketikkan kode berikut dalam file “js”.
Kemudian. kita akan membuat permainan berhenti ketika pemain / karakter mengenai rintangan. Ketikkan kode dibawah ini dalam file “js”.
Terakhir, kita akan membuat tombol navigasi berupa tombol start sebelum permainan dimulai dan tombol reset saat permainan berakhir.
Dan permainan yang kita buat telah selesai.
Hasil Akhir :
Sekian Tutorial Membuat Permainan dari JQuery “JUMPBOX”. Semoga bermanfaat…!
Agar lebih jelas, Silahkan cek video dibawah ini :
