tutorials

Membuat Game Sederhana menggunakan JavaScript

Muhammad Satria Herman

Jul 9, 2022 • 9 min read

source : https://unsplash.com/photos/hIXmJH9xhoo?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink

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 :

Visual Studio Code
Google Chrome

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 :

1. Mobil

2. Penghalang

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>
    <link href="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 obstacle

let 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 mobil

let carPos = {
  x: 35,
  y: 30,
};

// posisi obstacle

let 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 mobil
 ctx.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 mobil
 ctx.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

nah, gambar mobil berhasil dirender oleh browser

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 mundur
  ctx.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 tertentu
if (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">
    <i class="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">
        <i class="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;
  }
};
// down
const 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 dipencet
document.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

// skor
if (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 2D
const ctx = canvas.getContext("2d");
// render gambar untuk car dan obstacle

let car = new Image();
car.src = "./src/car.png";
let obs = new Image();
obs.src = "./src/obs.png";

// posisi mobil
let carPos = {
  x: 35,
  y: 30,
};
// posisi obstacle
let obsPos = [];
obsPos[0] = {
  x: canvas.width,
  y: 100,
};

let score = 0;

const start = () => {
  // clear canvas dan membuat gambar mobil
  ctx.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 tertentu
    if (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 score
    if (obsPos[i].x == 30) {
      score += 10;
      skorElement.textContent = `SKOR : ${score}`;
    }
  }
  requestAnimationFrame(start);
};

// up car
const upCar = () => {
  if (carPos.y >= 3) {
    carPos.y -= 10;
  }
};
// down
const 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 dipencet
document.onkeydown = checkKey;

// event handler untuk up dan down
up.addEventListener("click", upCar);
down.addEventListener("click", downCar);
start();

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

Sign up for more like this.