Membuat Game Sederhana menggunakan JavaScript

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

Membuat Game Sederhana menggunakan JavaScript

Muhammad Satria Herman

Muhammad Satria Herman

Belajar Memberikan Style Pada HTML

Belajar Layouting Sederhana di HTML

Belajar Dasar HTML

Belajar Dasar HTML

Tutorial Manipulasi DOM Di Reactjs

Subscribe to IqServer

Subscribe to IqServer