Cara Membuat Game Dino Run dengan HTML, CSS, dan JavaScript David Naista, M.T.I. 13 Agustus 2025 08:48:00 Pemrograman 83 Kali

Cara Membuat Game Dino Run dengan HTML, CSS, dan JavaScript

Pendahuluan

Pernahkah kamu melihat game Dino Run di Google Chrome saat koneksi internet terputus? Ternyata, membuat game sederhana seperti itu tidak sesulit yang dibayangkan.
Dengan memanfaatkan HTML, CSS, dan JavaScript, kita bisa membuat versi sederhana game ini dari awal.

Pada tutorial ini, kita akan membahas langkah demi langkah membuat Dino Run, mulai dari menyiapkan aset gambar hingga menambahkan fitur game over.

Persiapan Project

Sebelum memulai, pastikan kamu memiliki:

  • Browser (Chrome/Firefox/Edge)

  • Code editor (VS Code, Sublime Text, atau sejenisnya)

  • File aset game (gambar dinosaurus, background, dan obstacle)

Kamu bisa mengunduh aset game dalam format ZIP dan mengekstraknya ke folder project.

Struktur folder yang digunakan:

bash
/game
  index.html
  style.css
  script.js
  /images
    bg.jpg
    run1.png
    run2.png
    run7.png
    run8.png
    box.png

Membuat Struktur HTML

File utama kita adalah index.html yang berisi struktur game:

html
html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dino Run Gametitle>
  <link rel="stylesheet" href="style.css">
head>
<body>
  <h2>Dino Runh2>
  <h3>Score: <span id="score">0span>h3>
  
  <div id="board">
    <div id="area">
      <div id="dino">div>
      <div id="box">div>
    div>
  div>

  <script src="script.js">script>
body>
html>

Penjelasan:

  • h2 → Judul game

  • h3 dengan span#score → Menampilkan skor

  • #board → Area utama game

  • #dino → Karakter dinosaurus

  • #box → Obstacle/rintangan

Menambahkan CSS untuk Tampilan Game

File style.css digunakan untuk mengatur tampilan:

css
h2, h3 {
  text-align: center;
}

#board {
  width: 600px;
  height: 300px;
  background: url('images/bg.jpg');
  background-size: 100% 100%;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}

#area {
  width: 600px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
}

#dino {
  width: 100px;
  height: 100px;
  background: url('images/run1.png');
  background-size: 100% 100%;
  position: absolute;
  margin-top: 170px;
  margin-left: 50px;
  animation: lari 0.3s infinite;
  transition: margin-top 1s;
}

@keyframes lari {
  0%   { background: url('images/run1.png'); background-size: 100% 100%; }
  20%  { background: url('images/run2.png'); background-size: 100% 100%; }
  50%  { background: url('images/run7.png'); background-size: 100% 100%; }
  75%  { background: url('images/run8.png'); background-size: 100% 100%; }
}

#box {
  width: 50px;
  height: 50px;
  background: url('images/box.png');
  background-size: 100% 100%;
  position: absolute;
  margin-top: 200px;
  margin-left: 600px;
}

.freeze {
  animation: none !important;
  background: url('images/run8.png') !important;
  background-size: 100% 100% !important;
}

Fungsi utama CSS:

  • Mengatur ukuran dan posisi board

  • Membuat animasi lari dinosaurus dengan @keyframes

  • Mengatur obstacle agar muncul dari sisi kanan dan bergerak ke kiri

  • Memberikan efek freeze saat dinosaurus melompat

Menambahkan JavaScript untuk Interaksi Game

File script.js berisi logika game:

javascript
let score = 0;
let gameOver = false;

function setBackgroundMoving() {
  if (gameOver) return;
  let board = document.getElementById('board');
  let bgPos = parseInt(board.style.backgroundPositionX || 0);
  board.style.backgroundPositionX = (bgPos - 1) + 'px';
  
  score++;
  document.getElementById('score').innerHTML = score;

  setTimeout(setBackgroundMoving, 5);
}

function setBoxMoving() {
  if (gameOver) return;
  let box = document.getElementById('box');
  let pos = parseInt(box.style.marginLeft || 600);
  box.style.marginLeft = (pos - 2) + 'px';

  if (pos < -50) box.style.marginLeft = '600px';

  detectCollision();
  setTimeout(setBoxMoving, 5);
}

function jump() {
  let dino = document.getElementById('dino');
  dino.classList.add('freeze');
  dino.style.marginTop = '30px';

  setTimeout(() => {
    dino.style.marginTop = '170px';
    dino.classList.remove('freeze');
  }, 1000);
}

function detectCollision() {
  let dino = document.getElementById('dino');
  let box = document.getElementById('box');

  let dinoTop = dino.offsetTop;
  let boxLeft = box.offsetLeft;

  if (boxLeft < 100 && boxLeft > 0 && dinoTop > 130) {
    gameOver = true;
    alert(`Game Over! Skor Anda: ${score}`);
  }
}

window.addEventListener('keyup', (e) => {
  if (e.keyCode === 32) jump();
});

setBackgroundMoving();
setBoxMoving();

Fitur utama:

  • Gerakan background untuk memberi efek berjalan

  • Gerakan obstacle dari kanan ke kiri

  • Loncat dinosaurus dengan tombol spasi

  • Deteksi tabrakan untuk menentukan game over

  • Pencatatan skor selama game berlangsung

Hasil Akhir

Setelah semua langkah di atas, kamu akan mendapatkan game Dino Run sederhana yang bisa dimainkan langsung di browser.
Karakter dinosaurus akan berlari, rintangan akan muncul dari kanan, dan kamu bisa melompat dengan menekan tombol spasi.
Saat menabrak rintangan, game akan berhenti dan skor akhir akan ditampilkan.

Tips Optimasi dan Pengembangan Lanjutan

  • Tambahkan suara saat melompat atau game over.

  • Gunakan sprite sheet untuk animasi yang lebih halus.

  • Simpan skor tertinggi menggunakan localStorage.

  • Tambahkan tingkat kesulitan (kecepatan bertambah seiring waktu).

Kesimpulan

Membuat game sederhana seperti Dino Run adalah cara menyenangkan untuk belajar dasar-dasar HTML, CSS, dan JavaScript.
Selain melatih logika pemrograman, kamu juga akan memahami cara mengatur animasi, event listener, dan logika game seperti collision detection.

Selamat mencoba dan kembangkan kreativitasmu!