Proyek Web: Membangun Game Batu Gunting Kertas Interaktif
Halo Sobat Jurnal Coding! Selamat datang kembali di arena eksekusi kategori Proyek.
Setelah kita membuat daftar tugas harian dan generator motivasi pada proyek-proyek sebelumnya, sekarang saatnya kita bersenang-senang sejenak. Mari kita ciptakan sebuah permainan! Siapa yang tidak kenal dengan permainan legendaris Batu, Gunting, Kertas? Permainan sederhana ini sering kita gunakan untuk menentukan siapa yang harus berjaga saat bermain petak umpet, atau siapa yang berhak mengambil potongan pizza terakhir di atas meja.
Namun, bagaimana jika temanmu sedang tidak ada di rumah? Jangan sedih, karena sebagai seorang pembuat perangkat lunak (Software Engineer), kamu memiliki kemampuan sihir untuk menciptakan lawan mainmu sendiri!
Pada proyek kali ini, kita akan membangun sebuah game Batu Gunting Kertas yang bisa dimainkan langsung di peramban (browser) kamu. Kita akan memprogram sebuah kecerdasan buatan (Artificial Intelligence) tingkat dasar yang akan bertindak sebagai lawan mainmu. Komputer akan memilih senjatanya secara acak, lalu mesin JavaScript akan menjadi wasit yang menentukan siapa pemenangnya secara adil.
Proyek ini adalah taman bermain yang sangat sempurna untuk melatih pemahamanmu tentang logika percabangan (If/Else), penggunaan kumpulan data (Array), dan manipulasi dokumen (DOM). Mari kita siapkan segelas minuman segar, buka perangkat penulisan kodemu, dan mulai merakit arena pertarungan ini!
Langkah 1: Membangun Arena Pertarungan (HTML)
Sama seperti membangun sebuah stadion olahraga, kita harus membuat arena fisiknya terlebih dahulu. Arena permainan kita membutuhkan sebuah papan skor besar, sebuah teks pengumuman yang akan menyampaikan pesan dari wasit, dan tiga buah tombol senjata (Batu, Gunting, Kertas) yang bisa ditekan oleh pemain.
Silakan buat file baru dan ketikkan kerangka struktur arena berikut ini:
<div id="wadah-arena">
<h1>Batu, Gunting, Kertas!</h1>
<div class="papan-skor">
<h3>Pemain: <span id="skor-pemain">0</span></h3>
<h3>Komputer: <span id="skor-komputer">0</span></h3>
</div>
<p id="pesan-wasit">Pilih senjatamu untuk memulai pertarungan!</p>
<div class="grup-senjata">
<button class="tombol-senjata" id="batu">Batu</button>
<button class="tombol-senjata" id="gunting">Gunting</button>
<button class="tombol-senjata" id="kertas">Kertas</button>
</div>
</div>
Rahasianya terletak pada penyisipan elemen khusus bernama span dengan identitas (ID) masing-masing. Identitas ini ibarat sebuah mikrofon. Nantinya, bahasa JavaScript akan memegang mikrofon ini untuk mengubah angka nol menjadi angka skor yang sesungguhnya setiap kali ada yang menang.
Langkah 2: Menghias Arena Menjadi Megah (CSS)
Jika kamu hanya melihat kerangka HTML di atas, tampilannya pasti sangat kaku. Tombol-tombolnya mungkin terlihat kecil dan teksnya berjejal di pojok kiri atas layar. Mari kita gunakan sihir CSS agar arena pertarungan kita berada tepat di tengah layar dan memiliki desain yang memanjakan mata dengan warna dominan gelap serta aksen yang menyala terang.
body {
background-color: #1a1a2e;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
margin: 0;
}
#wadah-arena {
background: rgba(255, 255, 255, 0.05);
padding: 40px;
border-radius: 16px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.papan-skor {
display: flex;
justify-content: space-around;
margin: 20px 0;
color: #00ffff;
font-size: 24px;
}
#pesan-wasit {
font-size: 20px;
margin-bottom: 30px;
font-weight: bold;
}
.tombol-senjata {
background-color: transparent;
color: #00ffff;
border: 2px solid #00ffff;
padding: 15px 30px;
font-size: 18px;
border-radius: 8px;
cursor: pointer;
margin: 0 10px;
transition: 0.3s;
}
.tombol-senjata:hover {
background-color: #00ffff;
color: #1a1a2e;
transform: scale(1.1);
}
Cobalah simpan dan buka file tersebut! Sekarang tombol senjatamu memiliki efek animasi yang mengagumkan. Saat kamu menyentuhnya dengan kursor, tombol tersebut akan membesar dan warnanya membalik secara dramatis. Namun, sehebat apapun desainnya, tombol ini masih kosong melompong dan tidak bisa memberikan perlawanan. Mari kita buat mesin kecerdasan buatannya!
Langkah 3: Menyuntikkan Kecerdasan Wasit dan Lawan (JavaScript)
Di sinilah letak keseruan yang sesungguhnya. Kita harus membuat komputer memilih senjatanya secara rahasia setiap kali kita mengeklik tombol. Setelah itu, wasit akan membandingkan senjata kita dengan senjata komputer menggunakan aturan permainan yang sudah disepakati (Batu menghancurkan Gunting, Gunting memotong Kertas, Kertas membungkus Batu).
Silakan tambahkan kode logika JavaScript yang menakjubkan ini ke dalam proyekmu:
let angkaSkorPemain = 0;
let angkaSkorKomputer = 0;
const teksPesan = document.getElementById("pesan-wasit");
const elemenSkorPemain = document.getElementById("skor-pemain");
const elemenSkorKomputer = document.getElementById("skor-komputer");
const tombolPilihan = document.querySelectorAll(".tombol-senjata");
const daftarSenjata = ["batu", "gunting", "kertas"];
function dapatkanPilihanKomputer() {
let angkaAcak = Math.floor(Math.random() * 3);
return daftarSenjata[angkaAcak];
}
function tentukanPemenang(pilihanPemain, pilihanKomputer) {
if (pilihanPemain === pilihanKomputer) {
return "Seri! Kalian berdua memilih " + pilihanPemain;
}
if (pilihanPemain === "batu") {
if (pilihanKomputer === "gunting") {
angkaSkorPemain++;
return "Kamu Menang! Batu menghancurkan Gunting.";
} else {
angkaSkorKomputer++;
return "Kamu Kalah! Kertas membungkus Batu.";
}
}
if (pilihanPemain === "gunting") {
if (pilihanKomputer === "kertas") {
angkaSkorPemain++;
return "Kamu Menang! Gunting memotong Kertas.";
} else {
angkaSkorKomputer++;
return "Kamu Kalah! Batu menghancurkan Gunting.";
}
}
if (pilihanPemain === "kertas") {
if (pilihanKomputer === "batu") {
angkaSkorPemain++;
return "Kamu Menang! Kertas membungkus Batu.";
} else {
angkaSkorKomputer++;
return "Kamu Kalah! Gunting memotong Kertas.";
}
}
}
tombolPilihan.forEach(function(tombol) {
tombol.addEventListener("click", function() {
let senjataPemain = this.id;
let senjataKomputer = dapatkanPilihanKomputer();
let hasilPertarungan = tentukanPemenang(senjataPemain, senjataKomputer);
teksPesan.innerText = "Komputer memilih " + senjataKomputer + ". " + hasilPertarungan;
elemenSkorPemain.innerText = angkaSkorPemain;
elemenSkorKomputer.innerText = angkaSkorKomputer;
});
});
Membedah Logika Permainan: Bagaimana Ini Terjadi?
Bagi kamu yang matanya mulai berkunang-kunang melihat baris logika bersarang di atas, tenang saja! Mari kita bedah rahasianya menggunakan bahasa manusia yang sangat masuk akal.
Rahasia pertama ada pada fungsi bernama Math.random(). Komputer menggunakan mesin pengocok dadu gaib ini untuk menghasilkan angka acak. Karena kita mengalikannya dengan angka 3, komputer akan selalu mendapatkan angka bulat antara 0, 1, atau 2. Angka inilah yang dipakai oleh komputer untuk mengambil senjata dari dalam gudang array daftarSenjata. Komputer tidak pernah curang, ia murni mengandalkan keberuntungan!
Rahasia kedua ada pada struktur logika if...else yang panjang tersebut. Ini adalah otak dari sang wasit. Logikanya sangat sederhana: Wasit pertama-tama mengecek apakah senjata kalian berdua sama. Jika sama, maka langsung dinyatakan Seri dan fungsi dihentikan seketika.
Namun, jika senjatanya berbeda, wasit akan melihat apa senjata yang kamu pegang (misalnya Batu). Jika kamu memegang Batu, maka wasit hanya memiliki dua kemungkinan tersisa untuk dicek: apakah komputer memegang Gunting, atau memegang Kertas? Jika komputer memegang Gunting, maka skor pemain ditambah satu dan pesan kemenangan dikirimkan. Sebaliknya, jika komputer memegang Kertas, maka skor komputer yang ditambah.
Pola percabangan seperti inilah yang mendasari pembuatan semua sistem permainan cerdas di seluruh dunia!
Kesimpulan Proyek
Selamat dan berikan tepuk tangan yang paling meriah untuk dirimu sendiri! Kamu baru saja berhasil menciptakan sistem kecerdasan buatan tingkat dasar dan menyatukannya ke dalam antarmuka interaktif yang sangat menawan.
Dengan menyelesaikan proyek game Batu Gunting Kertas ini, kamu telah membuktikan bahwa kamu mampu menggunakan logika bersarang yang kompleks tanpa kebingungan. Teruslah berlatih, ubah warnanya sesuai selera pribadimu, dan pamerkan game buatanmu ini kepada teman-teman terdekat. Sampai jumpa di proyek epik Jurnal Coding berikutnya!
Setelah kita membuat daftar tugas harian dan generator motivasi pada proyek-proyek sebelumnya, sekarang saatnya kita bersenang-senang sejenak. Mari kita ciptakan sebuah permainan! Siapa yang tidak kenal dengan permainan legendaris Batu, Gunting, Kertas? Permainan sederhana ini sering kita gunakan untuk menentukan siapa yang harus berjaga saat bermain petak umpet, atau siapa yang berhak mengambil potongan pizza terakhir di atas meja.
Namun, bagaimana jika temanmu sedang tidak ada di rumah? Jangan sedih, karena sebagai seorang pembuat perangkat lunak (Software Engineer), kamu memiliki kemampuan sihir untuk menciptakan lawan mainmu sendiri!
Pada proyek kali ini, kita akan membangun sebuah game Batu Gunting Kertas yang bisa dimainkan langsung di peramban (browser) kamu. Kita akan memprogram sebuah kecerdasan buatan (Artificial Intelligence) tingkat dasar yang akan bertindak sebagai lawan mainmu. Komputer akan memilih senjatanya secara acak, lalu mesin JavaScript akan menjadi wasit yang menentukan siapa pemenangnya secara adil.
Proyek ini adalah taman bermain yang sangat sempurna untuk melatih pemahamanmu tentang logika percabangan (If/Else), penggunaan kumpulan data (Array), dan manipulasi dokumen (DOM). Mari kita siapkan segelas minuman segar, buka perangkat penulisan kodemu, dan mulai merakit arena pertarungan ini!
Langkah 1: Membangun Arena Pertarungan (HTML)
Sama seperti membangun sebuah stadion olahraga, kita harus membuat arena fisiknya terlebih dahulu. Arena permainan kita membutuhkan sebuah papan skor besar, sebuah teks pengumuman yang akan menyampaikan pesan dari wasit, dan tiga buah tombol senjata (Batu, Gunting, Kertas) yang bisa ditekan oleh pemain.
Silakan buat file baru dan ketikkan kerangka struktur arena berikut ini:
<div id="wadah-arena">
<h1>Batu, Gunting, Kertas!</h1>
<div class="papan-skor">
<h3>Pemain: <span id="skor-pemain">0</span></h3>
<h3>Komputer: <span id="skor-komputer">0</span></h3>
</div>
<p id="pesan-wasit">Pilih senjatamu untuk memulai pertarungan!</p>
<div class="grup-senjata">
<button class="tombol-senjata" id="batu">Batu</button>
<button class="tombol-senjata" id="gunting">Gunting</button>
<button class="tombol-senjata" id="kertas">Kertas</button>
</div>
</div>
Rahasianya terletak pada penyisipan elemen khusus bernama span dengan identitas (ID) masing-masing. Identitas ini ibarat sebuah mikrofon. Nantinya, bahasa JavaScript akan memegang mikrofon ini untuk mengubah angka nol menjadi angka skor yang sesungguhnya setiap kali ada yang menang.
Langkah 2: Menghias Arena Menjadi Megah (CSS)
Jika kamu hanya melihat kerangka HTML di atas, tampilannya pasti sangat kaku. Tombol-tombolnya mungkin terlihat kecil dan teksnya berjejal di pojok kiri atas layar. Mari kita gunakan sihir CSS agar arena pertarungan kita berada tepat di tengah layar dan memiliki desain yang memanjakan mata dengan warna dominan gelap serta aksen yang menyala terang.
body {
background-color: #1a1a2e;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
margin: 0;
}
#wadah-arena {
background: rgba(255, 255, 255, 0.05);
padding: 40px;
border-radius: 16px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.papan-skor {
display: flex;
justify-content: space-around;
margin: 20px 0;
color: #00ffff;
font-size: 24px;
}
#pesan-wasit {
font-size: 20px;
margin-bottom: 30px;
font-weight: bold;
}
.tombol-senjata {
background-color: transparent;
color: #00ffff;
border: 2px solid #00ffff;
padding: 15px 30px;
font-size: 18px;
border-radius: 8px;
cursor: pointer;
margin: 0 10px;
transition: 0.3s;
}
.tombol-senjata:hover {
background-color: #00ffff;
color: #1a1a2e;
transform: scale(1.1);
}
Cobalah simpan dan buka file tersebut! Sekarang tombol senjatamu memiliki efek animasi yang mengagumkan. Saat kamu menyentuhnya dengan kursor, tombol tersebut akan membesar dan warnanya membalik secara dramatis. Namun, sehebat apapun desainnya, tombol ini masih kosong melompong dan tidak bisa memberikan perlawanan. Mari kita buat mesin kecerdasan buatannya!
Langkah 3: Menyuntikkan Kecerdasan Wasit dan Lawan (JavaScript)
Di sinilah letak keseruan yang sesungguhnya. Kita harus membuat komputer memilih senjatanya secara rahasia setiap kali kita mengeklik tombol. Setelah itu, wasit akan membandingkan senjata kita dengan senjata komputer menggunakan aturan permainan yang sudah disepakati (Batu menghancurkan Gunting, Gunting memotong Kertas, Kertas membungkus Batu).
Silakan tambahkan kode logika JavaScript yang menakjubkan ini ke dalam proyekmu:
let angkaSkorPemain = 0;
let angkaSkorKomputer = 0;
const teksPesan = document.getElementById("pesan-wasit");
const elemenSkorPemain = document.getElementById("skor-pemain");
const elemenSkorKomputer = document.getElementById("skor-komputer");
const tombolPilihan = document.querySelectorAll(".tombol-senjata");
const daftarSenjata = ["batu", "gunting", "kertas"];
function dapatkanPilihanKomputer() {
let angkaAcak = Math.floor(Math.random() * 3);
return daftarSenjata[angkaAcak];
}
function tentukanPemenang(pilihanPemain, pilihanKomputer) {
if (pilihanPemain === pilihanKomputer) {
return "Seri! Kalian berdua memilih " + pilihanPemain;
}
if (pilihanPemain === "batu") {
if (pilihanKomputer === "gunting") {
angkaSkorPemain++;
return "Kamu Menang! Batu menghancurkan Gunting.";
} else {
angkaSkorKomputer++;
return "Kamu Kalah! Kertas membungkus Batu.";
}
}
if (pilihanPemain === "gunting") {
if (pilihanKomputer === "kertas") {
angkaSkorPemain++;
return "Kamu Menang! Gunting memotong Kertas.";
} else {
angkaSkorKomputer++;
return "Kamu Kalah! Batu menghancurkan Gunting.";
}
}
if (pilihanPemain === "kertas") {
if (pilihanKomputer === "batu") {
angkaSkorPemain++;
return "Kamu Menang! Kertas membungkus Batu.";
} else {
angkaSkorKomputer++;
return "Kamu Kalah! Gunting memotong Kertas.";
}
}
}
tombolPilihan.forEach(function(tombol) {
tombol.addEventListener("click", function() {
let senjataPemain = this.id;
let senjataKomputer = dapatkanPilihanKomputer();
let hasilPertarungan = tentukanPemenang(senjataPemain, senjataKomputer);
teksPesan.innerText = "Komputer memilih " + senjataKomputer + ". " + hasilPertarungan;
elemenSkorPemain.innerText = angkaSkorPemain;
elemenSkorKomputer.innerText = angkaSkorKomputer;
});
});
Membedah Logika Permainan: Bagaimana Ini Terjadi?
Bagi kamu yang matanya mulai berkunang-kunang melihat baris logika bersarang di atas, tenang saja! Mari kita bedah rahasianya menggunakan bahasa manusia yang sangat masuk akal.
Rahasia pertama ada pada fungsi bernama Math.random(). Komputer menggunakan mesin pengocok dadu gaib ini untuk menghasilkan angka acak. Karena kita mengalikannya dengan angka 3, komputer akan selalu mendapatkan angka bulat antara 0, 1, atau 2. Angka inilah yang dipakai oleh komputer untuk mengambil senjata dari dalam gudang array daftarSenjata. Komputer tidak pernah curang, ia murni mengandalkan keberuntungan!
Rahasia kedua ada pada struktur logika if...else yang panjang tersebut. Ini adalah otak dari sang wasit. Logikanya sangat sederhana: Wasit pertama-tama mengecek apakah senjata kalian berdua sama. Jika sama, maka langsung dinyatakan Seri dan fungsi dihentikan seketika.
Namun, jika senjatanya berbeda, wasit akan melihat apa senjata yang kamu pegang (misalnya Batu). Jika kamu memegang Batu, maka wasit hanya memiliki dua kemungkinan tersisa untuk dicek: apakah komputer memegang Gunting, atau memegang Kertas? Jika komputer memegang Gunting, maka skor pemain ditambah satu dan pesan kemenangan dikirimkan. Sebaliknya, jika komputer memegang Kertas, maka skor komputer yang ditambah.
Pola percabangan seperti inilah yang mendasari pembuatan semua sistem permainan cerdas di seluruh dunia!
Kesimpulan Proyek
Selamat dan berikan tepuk tangan yang paling meriah untuk dirimu sendiri! Kamu baru saja berhasil menciptakan sistem kecerdasan buatan tingkat dasar dan menyatukannya ke dalam antarmuka interaktif yang sangat menawan.
Dengan menyelesaikan proyek game Batu Gunting Kertas ini, kamu telah membuktikan bahwa kamu mampu menggunakan logika bersarang yang kompleks tanpa kebingungan. Teruslah berlatih, ubah warnanya sesuai selera pribadimu, dan pamerkan game buatanmu ini kepada teman-teman terdekat. Sampai jumpa di proyek epik Jurnal Coding berikutnya!
Apa pendapatmu tentang artikel ini?
Artikel Terkait
Proyek 29 Artikel
Baca →
Proyek Menyenangkan: Membangun Aplikasi Papan Ketik Piano Virtual Interaktif
Proyek 29 Artikel
Baca →
Proyek Fungsional: Membangun Aplikasi Konverter Mata Uang Cerdas dengan API
Proyek 29 Artikel
Baca →