Membuat Game Sederhana Menggunakan JavasScript dan Canvas HTML 5
Hai Kawan! . Kali ini saya akan sharing tentang cara pembuatan game sederhana berbasis web menggunakan JavaScript dan Canvas HTML 5 .
Sebenernya ini tugas sekolah sih , saya disuruh buat game menggunakan Smart App Creator dan Adobe Flash . Cuma ya karena gak paham cara pakenya jadinya saya mengajukan ke guru saya boleh tidak kalo gamenya dibuat pake coding Javascript , ehh ternyata boleh . Ya udah sekalian tak buatin aja tutorialnya
Kira kira seperti ini game yang akan kita buat
Oke langsung saja ke tutorial . Sebelumnya saya asumsikan kalian sudah paham mengenai bahasa pemrograman JavaScript supaya bisa paham sintaks yang saya tuliskan . Software yang diperlukan adalah :
Pertama kita buat dulu struktur filenya seperti ini :
Jadi kita buat 3 file yaitu : index.html , style.css , index.js dan juga kita membuat satu buah folder bernama src . Yang mana folder tersebut berisikan gambar mobil dan juga gambar penghalang . Kalian bisa download gambarnya disini :
Selanjutnya kita akan membuat layout game di file index.html seperti ini :
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Game Sederhana</title><linkhref="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"rel="stylesheet"/><link rel="stylesheet" href="style.css" /></head><body><canvas id="box"> </canvas><script src="index.js"></script></body></html>
diatas saya memakai boxicon untuk mengimport icon untuk tombol nanti .pastikan file index.html kita sudah terhubung ke file style.css . lalu pada file style.css kita akan membuat seperti ini :
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");body {background-color: #77a6f7;text-align: center;font-family: "Roboto", sans-serif;overflow-y: hidden;}canvas {width: 60%;margin: 10px auto 30px auto !important;border: 2px solid rgb(31, 170, 224);display: inline-block;text-align: center;background: #fff;}/* responsive */@media screen and (max-width: 768px) {canvas {width: 90%;}}
disini saya memakai font roboto . Kalian bisa mengubah font.nya sesuai selera kalian . untuk font gratis ,bisa kalian dapatkan di google fonts . Sekarang kita coba buka file index.html di browser. Maka hasilnya akan seperti ini :
Disini kalian bisa modifikasi layoutnya sesuai kalian . Saya tidak akan menjelaskan banyak tentang html dan css nya karena disini saya akan fokus di JavaScript nya .
Oke Selanjutnya kita akan menyeleksi DOM si canvasnya dengan mengetikkan kode dibawah di file index.js
const canvas = document.querySelector("canvas");lalu kita inisialisasikan canvas sebagai objek 2D . Yang artinya gambar yang akan kita buat di canvas adalah objek 2D . ketik seperti ini :
const ctx = canvas.getContext("2d");selanjutnya kita render gambar mobil dan obstacle kita ke dalam variabel “car” dan “obs”
// render gambar untuk car dan obstaclelet car = new Image();car.src = "./src/car.png";let obs = new Image();obs.src = "./src/obs.png";
setelah itu kita akan menentukan dimana posisi “car” dan “obstacle”
// posisi mobillet carPos = {x: 35,y: 30,};// posisi obstaclelet obsPos = [];obsPos[0] = {x: canvas.width,y: 100,};
akan saya jelaskan sedikit kode diatas . disini kita menggunakan object untuk menentukan posisi car yang mana x adalah posisi/jarak secara horizontal dan y adalah jarak secara vertikal . nantinya kita hanya akan menggerakkan mobil secara vertikal saja , dikarenakan nanti kita akan membuat obstaclenya yang berjalan .
untuk obstacle kita akan menggunakan array untuk menempatkan obstaclenya . kenapa memakai array? , kita memakai array karena nantinya kita akan menambah jumlah obstacle lagi ketika obstacle sudah mencapai jarak tertentu . jadi nanti jumlah obstaclenya akan tak terbatas sampai game over.
obsPos[0] = {x: canvas.width,y: 100,};
kode diatas akan menempatkan obstacle yang pertama pada posisi vertical canvas sebanyak 100 . yang mana tinggi canvas seluruhnya adalah 150 . lalu kita buat posisi horizontal obstacle di paling pinggir canvas . Maka kita memasukkan nilai x pada obstacle sesuai lebar canvas ( canvas.width ) .jadi seolah — olah obstacle ini muncul dari pinggir canvas
oke selanjutnya kita akan membuat sebuah fungsi yang akan menghandle jalannya game tersebut . kita namai saja fungsi itu start
const start = () => {// clear canvas dan membuat gambar mobilctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(car, carPos.x, carPos.y);}
fungsi clearRect ini akan menghapus semua yang berada didalam canvas . Jadi saat game dimulai canvas akan menghapus semua component yang ada didalamnya terlebih dahulu . lalu drawImage() akan membuat sebuah gambar , disini ada 3 parameter yaitu : source gambar , posisi horizontal gambar, posisi vertical gambar
kita tambahkan fungsi window.requestAnimationFrame() agar browser dapat merender animasi ,
const start = () => {// clear canvas dan membuat gambar mobilctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(car, carPos.x, carPos.y);//merender animasi
requestAnimationFrame(start);}
jalankan fungsi start
start();maka ketika kita buka browser ini yang akan tampil
selanjutnya kita akan membuat obstacle berjalan mundur . masukkan kode dibawah kedalam fungsi start
for (let i = 0; i < obsPos.length; i++) {// merender gambar obstacle dan membuat obstacle mundurctx.drawImage(obs, obsPos[i].x, obsPos[i].y);obsPos[i].x--;}
kode diatas akan membuat obstacle sesuai jumlah dalam array obsPos . lalu posisi obstacle akan bergerak ke kiri.
selanjutnya kita akan membuat obstacle bertambah saat berada dijarak tertentu
// menambah obstacle saat obstacle mencapai jarak tertentuif (obsPos[i].x == 20) {obsPos.push({x: canvas.width,y: carPos.y,});}
kode diatas akan menambahkan nilai pada array obsPos saat obstacle berada pada posisi 20 di canvas( ingat , lebar keseluruhan canvas adalah 300 ) . lalu posisi munculnya obstacle akan mengikuti posisi car saat itu
selanjutnya kita akan membuat deteksi tabrakan pada car .
if (carPos.x + car.width >= obsPos[i].x &&carPos.x <= obsPos[i].x + obs.width &&carPos.y + car.height >= obsPos[i].y &&carPos.y <= obsPos[i].y + obs.height){location.reload()
}
jika posisi depan , atas , bawah mobil menyentuh obstacle . halaman akan direfresh
selanjutnya kita akan membuat sistem score . dimana score ini akan bertambah ketika obstacle melewati jarak tertentu . sebelumnya buat dulu variabel score diluar scope fungsi start
let score = 0;lalu tambahkan score saat obstacle mencapai jarak tertentu
if (obsPos[i].x == 30) {score += 10;}
nantinya skor ini akan kita tampilkan diatas canvas kita . Maka dari itu kita harus membuat element yang akan kita ambil dengan DOM untuk menempatkan skornya. Maka kita buka file index.html kita , lalu tambahkan
<div id="box"> <h1 id="skor">0</h1></div>
jangan lupa, kita juga harus menambahkan button untuk menggerakkan mobil kita ke atas dan kebawah.Maka dari itu kita tambahkan index.html kita seperti berikut
<div class="button"><button type="button" id="atas"><i class="bx bxs-up-arrow" style="font-size: 24px; color: #eaeaea"></i></button><button type="button" id="bawah"><iclass="bx bxs-down-arrow"style="font-size: 24px; color: #eaeaea"></i></button></div>
sehingga file index.html kita akan menjadi
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Game Sederhana</title><link rel="stylesheet" href="style.css" /></head><body><div id="box"><h1 id="skor">0</h1></div><canvas id="box"> </canvas><div class="button"><button type="button" id="atas"><i class="bx bxs-up-arrow" style="font-size: 24px; color: #eaeaea"></i></button><button type="button" id="bawah"><iclass="bx bxs-down-arrow"style="font-size: 24px; color: #eaeaea"></i></button></div><script src="index.js"></script></body></html>
jangan lupa kasih style pada file style.css menjadi seperti ini :
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");body {background-color: #77a6f7;text-align: center;font-family: "Roboto", sans-serif;overflow-y: hidden;}canvas {width: 60%;margin: 10px auto 30px auto !important;border: 2px solid rgb(31, 170, 224);display: inline-block;text-align: center;background: #fff;}/* skor */#skor {font-size: 24px;margin-top: 20px;width: 60%;text-align: center;margin-left: auto;margin-right: auto;padding: 15px 0;background-color: rgb(31, 196, 133);border-radius: 10px;}/* button */.button {display: flex;flex-direction: column;}.button button {width: 60%;margin: 5px auto;border: none;outline: none;border-radius: 10px;padding: 10px 0;background-color: #9bdcff;}.button button:focus {outline: none;}.button button:hover {background-color: #86c4e6;}@media screen and (max-width: 768px) {canvas {width: 90%;}#skor {width: 90%;}.button button {width: 90%;}}
Silahkan kalian modifikasi stylenya sesuai selera kalian . Tapi disini saya tidak akan membahas cara membuat stylenya disini . Selanjutnya kita beri event handler yang akan menangani action saat button di klik . Kita sebut namai saja fungsinya dengan nama up() dan down() . Jadi kita buat saja fungsi upCar() dan downCar() diluar fungsi start() .
// up car
const upCar = () => {if (carPos.y >= 3) {carPos.y -= 10;}};// downconst downCar = () => {if (carPos.y <= 125) {carPos.y += 10;}};
disini akan saya jelaskan sedikit . Jadi fungsi upCar() disini akan mengurangi jarak antara car dengan bagian atas canvas , sehingga car akan bergerak keatas . dan juga sebelum menggerakkan car keatas , fungsi ini akan mengecek apakah mobil sudah mencapai batas teratas dari bagian atas canvas? , jika tidak maka mobil akan bergerak keatas . untuk fungsi downCar() adalah kebalikan dari upCar()
Selanjutnya kita akan menyeseleksi button yang sudah kita buat di index.html seperti ini
const up = document.querySelector("#atas");const down = document.querySelector("#bawah");
lalu kita akan menambahkan event handler pada button agar menjalankan fungsi upCar() dan downCar() pada saat di klik
up.addEventListener("click", upCar);down.addEventListener("click", downCar);
dan juga kita akan menjalankan fungsi upCar() dan downCar() saat keyboard atas dan bawah di klik jika user menggunakan dekstop . kita tambahkan
const checkKey = (el) => {if (el.keyCode == 38) {upCar();} else if (el.keyCode == 40) {downCar();}};// ketika keyboard atas atau bawah dipencetdocument.onkeydown = checkKey;
kode diatas akan mengecek apakah keyCode dari keyboard yang kita tekan itu bernilai 38 ( artinya keyboard panah atas ) atau bernilai 40 ( artinya keyboard panah bawah ) . Jika sudah maka jalankan fungsi upCar() atau downCar() . untuk keyCode kalian bisa mengeceknya disini
Dan yang terakhir . kita akan mencetak variabel score pada pada <h1 id=skor> </h1>. maka dari itu kita seleksi dulu elementnya
const skorElement = document.querySelector("#skor");lalu kita tambahkan kode untuk memasukkan nilai dari variabel score . Maka pada fungsi if yang kita gunakan untuk menambah nilai dari variabel score ,kita tambahkan kode berikut ini
// skorif (obsPos[i].x == 30) {score += 10;skorElement.textContent = `SKOR : ${score}`;}
maka file javascript kita akan seperti ini
const canvas = document.querySelector("canvas");const up = document.querySelector("#atas");const down = document.querySelector("#bawah");const skorElement = document.querySelector("#skor");// inisialisasi objek 2Dconst ctx = canvas.getContext("2d");// render gambar untuk car dan obstaclelet car = new Image();car.src = "./src/car.png";let obs = new Image();obs.src = "./src/obs.png";// posisi mobillet carPos = {x: 35,y: 30,};// posisi obstaclelet obsPos = [];obsPos[0] = {x: canvas.width,y: 100,};let score = 0;const start = () => {// clear canvas dan membuat gambar mobilctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(car, carPos.x, carPos.y);for (let i = 0; i < obsPos.length; i++) {ctx.drawImage(obs, obsPos[i].x, obsPos[i].y);// carPos.y++;obsPos[i].x--;// menambah obstacle saat obstacle mencapai jarak tertentuif (obsPos[i].x == 20) {obsPos.push({x: canvas.width,y: carPos.y,});}if (carPos.x + car.width >= obsPos[i].x &&carPos.x <= obsPos[i].x + obs.width &&carPos.y + car.height >= obsPos[i].y &&carPos.y <= obsPos[i].y + obs.height) {location.reload();}// menambahkan scoreif (obsPos[i].x == 30) {score += 10;skorElement.textContent = `SKOR : ${score}`;}}requestAnimationFrame(start);};// up carconst upCar = () => {if (carPos.y >= 3) {carPos.y -= 10;}};// downconst downCar = () => {if (carPos.y <= 125) {carPos.y += 10;}};const checkKey = (el) => {if (el.keyCode == 38) {upCar();} else if (el.keyCode == 40) {downCar();}};// ketika keyboard atas atau bawah dipencetdocument.onkeydown = checkKey;// event handler untuk up dan downup.addEventListener("click", upCar);down.addEventListener("click", downCar);start();
oke sekarang kita coba lihat hasilnya
Oke Sekian saja tutorial dari saya kali ini . Jika kalian ada yang bingung bisa tanyakan ke saya ya melalui link sosmed saya dibawah . Akhir kata saya mengucapkan terima kasih sudah membaca artikel ini . dan juga bila ada kesalahan dalam penyampaian saya , saya meminta maaf yang sebesar — besarnya . Wassalamu’alaikum Warahmatullahi Wabarakatuh
