Cara Bikin Game Online Sederhana dengan GitHub (Gratis & Mudah!)
Punya
ide game seru tapi bingung cara membagikannya ke teman-teman? Tenang, kamu
tidak butuh server mahal! Cukup pakai GitHub, kamu bisa membuat game
buatanmu jadi online dan bisa diakses siapa saja secara gratis.
Yuk,
ikuti panduan langkah demi langkah berikut ini!
Tahap 1: Menyiapkan "Bahan" Game (Coding)
Agar
rapi dan profesional, kita akan membagi kode game menjadi 3 bagian: HTML
(struktur), CSS (tampilan), dan JavaScript (logika game).
 |
| bahan full coding. bisa dengan bantuan AI sesuai selera |
1. Memisahkan CSS
Jika
sebelumnya kodemu menumpuk di satu file, yuk kita pisahkan. Ambil kode di
antara tag <style> ... </style>, hapus tag-nya, lalu simpan isinya
saja dengan nama style.css. Contoh isi file style.css:
CSS
body {
background-color: #fafafa;
font-family: Arial, sans-serif;
}
h1 {
color: purple;
}
 |
| 3 file yang sudah dipisah |
2. Memisahkan JavaScript
Ambil
kode di antara tag <script> ... </script>, hapus tag-nya, dan
simpan dengan nama script.js. Contoh isi file script.js:
JavaScript
function
hello() {
alert("Hello World! Game kamu
berjalan!");
}
3. Membuat File Utama (index.html)
Sekarang,
buat file index.html untuk menggabungkan keduanya. Gunakan kode berikut:
HTML
<!DOCTYPE
html>
<html>
<head>
<meta charset="UTF-8">
<title>Game Online Saya</title>
<link rel="stylesheet" href="style.css"> //rujukan CSS
</head>
<body>
<h1>Hello World!</h1>
<button onclick="hello()">Klik
Saya</button>
<script src="script.js"></script> // Rujukan javascript
</body>
</html>
 |
| contoh posisi rujukan file CSS |
Tahap 2: Upload ke GitHub
Setelah
file siap di komputer, saatnya kita buat mereka "terbang" ke
internet.
- Buat Akun GitHub: Buka github.com, daftar seperti biasa. Prosesnya klasik dan
cepat kok!
- Buat Repository
Baru: * Klik tombol New
(atau tanda plus + di pojok kanan atas).
- Beri nama (misal:
game-online-saya).
- Isi deskripsi
singkat dan pilih Public.
- Klik Create
repository.
 |
| new repository |
- Upload File: * Di halaman baru, klik tulisan "uploading
an existing file".
- Seret (drag &
drop) file index.html, style.css, dan script.js (plus gambar pendukung
jika ada).
- Klik tombol Commit
changes.
 |
| pilih upload an existing file |
 |
| pilih ini |
 |
| commit changes |
Tahap 3: Aktifkan Game Agar Bisa Dimainkan
File
sudah di GitHub, tapi belum "hidup". Mari kita aktifkan fitur GitHub
Pages.
- Pada halaman
repository-mu, klik tab Settings (di barisan atas).
- Lihat menu sebelah
kiri, cari bagian Code and automation, lalu klik Pages.
- Di bagian Build
and deployment -> Source:
- Pilih Branch: main.
- Pilih Folder: /(root).
- Klik Save.
Hasil Akhirnya?
Tunggu
sekitar 1-2 menit. Refresh halaman Settings tadi, dan kamu akan melihat pesan:
Your
site is live at https://username.github.io/game-online-saya/
 |
| pilih action untuk melihat proses deploy |
CONTOH ANEKA GAME ONLINE SEDERHANA.
 |
| klik untuk memainkan |
 |
| klik untuk memainkan |
Selesai! Sekarang siapa pun yang punya link tersebut bisa memainkan game buatanmu. Ternyata bikin game online itu nggak harus ribet, kan?.