Pemrograman web/ web developer merupakan salah satu bagian dari pekerjaan yang mengandalkan kemampuan coding. Dalam pemrograman web seorang programmer dituntut untuk menguasai bahasa pemrograman yang digunakan untuk membuat sebuah website.
Salah satu salah tiga dari jenis bahasa yang perlu dimengerti oleh seorang web developer adalah HTML, CSS, dab Javascript. Kemampuan mengenali Pemrograman HTML menjadi sangat penting, sebab HTML adalah bahasa yang digunakan untuk membangun kerangka dari sebuah web. CSS dan JS yang merupakan pelengkap juga tidak kalah pentingnya, CSS berguna untuk memperindah tampilan website sehingga lebih nyaman dilihat dan Javascript berguna untuk membuat sebuah website lebih interaktif .
Pada artikel kali ini akan membuat sebuah project sederhana dengan menggunakan bahasa HTML, CSS dan Javascript.
Akan banyak sekali tutorial tentang cara membuat game tebak angka di internet, namun pada artikel kali ini kamu akan ditemani dengan source code dan juga penjelasan yang nantinya membantu kamu memahami kode yang ada.
Apa yang perlu dipersiapkan?
Hal yang perlu dipersiapkan sendiri tidaklah banyak, namun kamu wajib untuk memilikinya. Text Editor. Karena yang kita lakukan adalalah menambah, menghapus dan mengedit kode maka peran code editor sangatlah diperlukan.
Gunakan code editor yang interaktif, sehingga membuatmu lebih nyaman untuk menulis kode.
Beberapa rekomendasi kode editor yang dapat kamu gunakan yaitu : Visual Studio Code, Sublime Text, Notepad ++.
Namun, jika kamu tidak ingin menginstal code editor di perangkatmu, aku akan memberikan rekomendasi website IDE seperti replit dan stackblitz.
Bagaimana cara kerjanya?
Game tebak angka ini menggunakan JavaScript buat bikin seru-seruan di web. Begitu halaman kebuka, langsung muncul angka random antara 1 sampe 10 yang harus ditebak. Pengguna disuruh tebak lewat kotak isian, dan tiap kali tebakannya masuk, JavaScript cek dulu apakah tebakannya valid. Kalo tebakannya masuk rentang yang benar, skripnya akan langsung membandingkan tebakannya dengan angka acaknya. Kemudian, user bakal diberi tau hasil tebakannya lewat pesan-pesan yang muncul, dan tampilan pesan-pesannya juga disesuaikan agar semakin menarik. Pengguna juga bisa melakukan refresh halaman jika mau mengulang dari awal dan dapet angka acak baru.
Tutorial :
1. Hal yang pertama harus kamu lakukan adalah membuat folder baru dengan nama 'game tebak angka', tujuannya agar lebih mudah dimengerti dan lebih rapi dalam managemen berkas nantinya.
2. Didalam folder tersebut, tambahkan 3 file berbeda. yaitu : index.html, styles.css, dan script.js. Itu merupakan file program yang nantinya akan membangun kode kamu.
3. Didalam file HTML, ketikkan code berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Tebak Angka</title>
</head>
<body>
</body>
</html><main>
<div class="game-container">
<h1>Game Tebak Angka</h1>
<form id="game">
<div class="form-group">
<label for="guess">Tebak Angka yang akan muncul 1 - 10</label>
<input type="text" id="guess" />
</div>
<button type="submit" class="submit">Tebak</button>
<button class="refresh">Refresh</button>
</form>
<p id="feedback"></p>
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html,
main {
width: 100%;
height: 100%;
}
body {
background: linear-gradient(to right top, #0766f3, #6cdbeb);
font-family: "Poppins", sans-serif;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.game-container {
max-width: 60%;
padding: 4rem 2rem;
background-color: white;
background: linear-gradient(
to right bottom,
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0.3)
);
backdrop-filter: blur(2rem);
border-radius: 1.5rem;
}
.form-group {
padding: 1rem 0;
}
input {
max-width: 100%;
outline: none;
border: 1px solid grey;
border-radius: 0.5rem;
}
button {
color: white;
padding: 0.5rem 1rem;
cursor: pointer;
border-radius: 0.5rem;
}
button.submit {
background: #0d4cfa;
border: 1px solid #65dfc9;
}
button.refresh {
background: black;
border: 1px solid black;
}
#feedback {
font-weight: bold;
padding: 1rem 0;
}
.winner {
text-transform: uppercase;
}
.error {
color: red;
}Kode Css ini akan memberikan tampilan webnya menjadi lebih menarik, kemudian kamu juga bisa merubah bagian seperti warna terdapat, ukuran font, jarak, dll pada kode diatas. Untuk itu kamu harus mengerti dasar-dasar dari css. kamu bisa melihat halaman dari situs mozila developer agar lebih lengkap.
function guessingGame() { //ini adalah fungsi dasar yang berisi fungsi fungsi yang diperlukan
const randomNo = Math.round(Math.random() * 10); //menghasilkan nomor acak dari 1 - 10 dan menyimpan didalam variable RandomNo
let guess; //membuat deklarasi variabel dalam js bernama guess tanpa memberikan nilai awal
let feedback; //membuat deklarasi variable dalam js bernama feeback tanpa memberikan nilai awal
const message = document.querySelector('#feedback'); //mengamvil elemen html yang memiliki id feedback
document.querySelector('.refresh').addEventListener('click', () => {
history.go(0); //sebuah even listerner dengan nilai refresh, sehingga ketika tombol refres di tekan maka, halaman akan dimuat ulang
});
document.querySelector('#game').addEventListener('submit', (e) => { //berfungsi untuk menangani permintaan submit pada tombol
e.preventDefault(); //yang memiliki id game
guess = parseInt(document.getElementById('guess').value);
// ini adalah fungsi if untuk memberikan logika pada halaman
if (guess < 11 && guess > 0) { //fungsi if yang memeriksa apakah tebakan berada direntang 1-10
//fungsi yang akan terlaksana jika tebakan yg diberikan pengguna masuk dalam rentang 1-10
if (randomNo > guess) { //memeriksa apakah nomor random yg ditebak lebih besar daripada tebakan
feedback = 'Tebakanmu terlalu rendah'; //jika ya, maka akan muncul pesan ini
message.classList.remove('winner'); //menghapus elemen winner dari variabel yang disimpan dalam message
message.classList.add('error'); //menambahkan kelas css ke elemen yang sama dengan sebelumnya
} else if (randomNo < guess) { //menebak apakah angka yang ditebak lebih kecil dari angka yang diberikan user
feedback = 'Tebakanmu terlalu tinggi.'; //jika ya, maka akan muncul pesan ini
message.classList.remove('winner');
message.classList.add('error');
} else { //memeriksa apakah, angka yang ditebak sama dengan angka yang diberikan oleh user
feedback = 'Kamu berhasil'; //jika ya, maka akan muncul pesan berikut
message.classList.add('winner');
message.classList.remove('error');
}
}
// fungsi if ini akan menghandle jika angka yang diberikan oleh user tidak termasuk dalam rentang 1-10
else if (guess > 10 || guess < 1) { //memeriksa apakah user memasukkan angka diluar rentang 1-10
feedback = 'Tebak salah satu angka 1 - 10'; //jika ya, maka akan muncul pesan ini
message.classList.add('error');
message.classList.remove('winner');
}
// fungsi if untuk memeriksa apakah tebakan yang diberikan user bukanlah angka.
else {
feedback = 'Masukkan angka'; //jika bukan angka, maka akan muncul pesan berikut ini
message.classList.remove('error');
message.classList.remove('winner');
}
// menampilkan fee
document.querySelector('#feedback').innerHTML = feedback;
});
}
guessingGame(); //menjalankan fungsi
Kode diatas sudah selesai, dan hasilnya akan menjadi seperti ini.
