Latihan Membuat Game Dinosaurus Chrome Menggunakan HTML, CSS dan Javascript!
Seringkali ketika seseorang ingin mengawali belajar pemprograman, mereka bingung harus mulai dari mana? apa yang bisa dibuat dari semua yang sudah dipelajari dan berbagai kebingungan lainnya.
Nah, buat sobat semua yang bingung dengan apa yang bisa dibuat dengan skill HTML, CSS serta Javascript. Pada kesempatan kali ini, kita akan belajar bersama - sama, cara membuat game menggunakan basic skill web developer tersebut (HTML, CSS dan Javascript).
Membuat game? Emang bisa?
Bisa dong, kita akan membuat game Dinosaurus Chrome ketika nggak ada sinyal hehehe.
Tapi, game yang akan kita buat ini nggak 100% mirip ya khususnya di bagian tampilannya, kalo dari polanya ya cukup mirip sih, yaitu kita harus melompat untuk menghindari rintangan yang ada didepan kita.
Oke, biar nggak kelamaan langsung saja kita mulai.
1. Membuat Folder dan 3 File Inti
Oke, pertama - tama, bautlah sebuah folder dengan nama latihan-membuat-game lalu buka folder tersebut mengguakan kode editor favorit kalian masing - masing (saya menggunakan VSCode). Setelah itu, buatlah 3 file dengan nama index.html, style.css dan javascript.js
2. Membuat Layout HTML
Buka file index.html yang sudah kita buat tadi, dan masukan mode berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Game</title>
</head>
<body>
<div class="container">
<h3>Game Dino versi 4 bit wkwkwk</h3>
<div id="game">
<div id="karakter"></div>
<div id="rintangan"></div>
<div id="start"></div>
</div>
</div>
<script src="javascript.js"></script>
</body>
</html>Oke, bisa dilihat diatas sangat simpel sekali untuk HTML,ya.
Pertama, kita meng import file style.css nya kedalam html menggunakan <link rel="stylesheet" href="style.css"> supaya bisa terbaca. Kemudian kita membuat div dengan class container sebagai wadah game yang akan kita buat, kemudan dibawahnya kita membuat tag <h3> sebagai judul, kemudian kita membuat div dengan id game yang didalamnya terdapat 3 div lagi yaitu div dengan id karakter, div dengan id rintangan dan div dengan id start. Terakhir ada kode <script src="javascript.js"></script> yang berguna untuk memanggil javascriptnya supaya game bisa berjalan lalu save / simpan.
Untuk melihat hasilnya, buka File Explorer (pengguna windows) lalu klik 2 kali pada file index.html yang sudah kita isi dengan kode diatas. Otomatis file index tersebut akan terbuka di browser.
Nampak tidak ada apa - apa kan? Iya, soalnya kita belum melakukan styling pada HTML tersebut.
3. Memuat Tampilannya Menggunkan CSS
Setelah kerangka HTMLnya jadi, selanjutnya mari kita buat tampilannya dengan memasukan kode berikut ini kedalam file style.css yang sudah kita buat.
.container {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100px;
}
#game {
width: 500px;
height: 200px;
border: 2px solid black;
overflow: hidden;
}
#karakter {
width: 20px;
height: 50px;
background: teal;
position: relative;
top: 150px; /* height(game) 200px - height(karakter) 50px */
left: 20px;
}
#rintangan {
width: 20px;
height: 30px;
background: red;
left: 480px; /* width(game) 500px - width(rintangan) 50px */
top: 120px; /* height(game) 200px - height(karakter) 50px - height(rintangan) 30px */
position: relative;
}
.play-again::before{
padding: 5px 7px;
content: 'Play Again?';
border: 2px solid black;
border-radius: 10px;
position: relative;
left: 200px;
cursor: pointer;
}
.play-again:active{
top: 5px;
position: relative;
}
/* Animasi */
.animasiKarakter {
animation: lompat 300ms linear;
}
.animasiRintangan {
animation: rintangan 2.5s infinite linear;
}
@keyframes lompat{
0%{top: 150px}
20%{top: 100px}
40%{top: 80px}
60%{top: 80px}
80%{top: 100px}
100%{top:150px}
}
@keyframes rintangan {
0%{left: 500px}
100%{left: -20px}
}Tenang, kita akan bedah maksud dari CSS ini :).
Pada bagian paling atas kita membuat styling untuk conatiner dengan display flex untuk memudahkan komponen ditaruh ditengah layar, kemudian flex-direction kita buat colum supaya componen yang ada didalamnya berjajar secara vertikal karena sifat asli dari display flex adalah mensejajarkan secara vertikal. Lalu kita juga menggunakan align-item center supaya komponen tepat berada di tengah dan padding top 100px untuk memberi jarak komponen dengan bagian atas layar sebanyak 100px. Oke saya anggap kalian faham :).
Lanjut, styling pada id game. dimana kita membuat lebarnya 500px dan tingginya 200px, kita juga membut boder supaya kelihatan batas tepinya. Selain itu kita juga menambahkan properti overflow yang berfungsi untuk menyembunyikan komponen yang keluar dari garis batas.
Lanjut lagi, styling pada id karakter dan rintangan. Disini kita menggunakan properti position supaya kita bisa menggunakan properti top, bottom, left ataupun right. Pada CSSnya juga sudah saya kasih keterangan alasan kita memberi nilai pada properti top maupun leftnya.
Masih lanjut, kita melakukan styling pada class play-again. disana kita menambahkan ::before supaya kita bisa menggunakan properti content untuk menyisipkan teks kedalamnya. Kita juga menambahkan :active untuk membuat efek saat melakukan klik.
Terakhir, kita membuat animasi gerakan lompat dan rintangannya supaya berjalan menggunakan properti animation serta keyframe untuk membuat polanya.
Oke, Sampai disini masih bisa dicerna kan :) ?
4. Penggerak Game
Okay gank, terakhir kita akan bekerja menggunakan javascript untuk membuat logic sangat sederhana supaya game ini bisa berjalan sesuai yang kita inginkan. Buka file javascript.js yang sudah kita buat, lalu masukan kode berikut :
const karakter = document.getElementById('karakter')
const rintangan = document.getElementById('rintangan')
const start = document.getElementById('start')
const jump = () => {
if(karakter.classList == 'animasi'){return}
karakter.classList.add('animasiKarakter')
rintangan.classList.add('animasiRintangan')
start.classList.remove('play-again')
setTimeout(function removeJump(){
karakter.classList.remove('animasiKarakter')
}, 300)
}
const gameOver = () => {
const karakterTop = parseInt(window.getComputedStyle(karakter).getPropertyValue('top'))
const rintanganLeft = parseInt(window.getComputedStyle(rintangan).getPropertyValue('left'))
if(rintanganLeft > 20 && rintanganLeft < 40 && karakterTop > 120){
alert('game over :p')
rintangan.classList.remove('animasiRintangan')
start.classList.add('play-again')
}
}
document.addEventListener('click', jump)
setInterval(gameOver, 10);Pada bagian paling atas, kita membuat 3 buah const/variabel yang menangkap id dari karakter, rintangan serta start.
Kemudian, kita membuat fungsi jump untuk membuat karakter kita bisa melompat ketika kita melakukan klik pada area layar. Didalam fungsi jump, kita memasukan class animasiKarakter untuk membuat karakter melompat, kemudian kita juga memasukan class animasiRintangan untuk membuat rintangannya berjalan, juga membuat perintah untuk menghapus class play-again supaya tombol play again bisa hilang meski kita tidak mengkliknya. lalu, menambahkan setTimeout yang didalamnya terdapat fungsi untuk menghapus class animasiKarakter setelah 300ms sehingga, setiap kali fungsi jump ini dipanggil, karakternya bisa terlihat melompat.
Oke, jika teman - teman bingung maksudnya, coba hapus code setTimeoutnya dan lihat perbedaanya.
Lajut, kita membuat fungsi gameOver untuk membuat game berhenti ketika karakter menabrak rintangan.
Didalam fungsi tersebut, kita membuat 2 variabel menggunakan dengan nama karakterTop dan rintanganLeft yang mana variabel ini yang kita jadian tanda apabila karakter dan tintangan bertemu atau tabrakan maka game akan berakhir. Oke, mungkin kalian bingung ini maksudnya apa parseInt(window.getComputedStyle(karakter).getPropertyValue('top')) . Jadi parseInt di awal itu berguna untuk merubah nilai yang ada didalam kurung menjadi integer karena kita butuh integer/angka untuk melakukan perbandingan. Next, didalamnya ada window.getComputeStyle yang didalam kurungnya ada variabel karakter diikuti getPropertiValue dengan properti 'top' yang mana ini dalah properti css yang ada pada id karakter. Singkatnya, kita mencari tahu berapa value/nilai yang ada pada properti topnya id karakter.
Begitu pula maksud dari rintanganLeft. kita mencari tahu berapa value atau nilai yang ada pada property leftnya tintangan. Oke, mudah mudahan kalian paham :v
Kemudian kita membuat pengecekan menggunakan if. Jika rintangan berada pada left yang lebih besar dari 20 dan left lebih kecil dari 40 dan posisi karakter dari top lebih dari 120, maka kita akan memanggil alert('game over') untuk menghentikan gamenya.
Terakhir!. kita membuat fungsi document.addEventListner('click', jump) supaya fungsi klik bisa dipanggil dimana saja ketika kita memencet layar atau mengklik di layar. Next, setInternval yang verisi fungsi gameOver dan waktu (10ms) untuk menjalankan fungsi gameOver(mekalukan pengecekan) secara terus menerus.
Sekian tulisan dari saya, jika masih ada yang bingung atau belum jelas, jangan sungkan buat tanyakan lewat kolom komentar.