Project Number Guessing Game in HTML, CSS, & JavaScript: Panduan Lengkap

Membuat game sederhana adalah cara yang menyenangkan untuk meningkatkan keterampilan coding Anda. Dalam artikel ini, kita akan membahas cara membuat Number Guessing Game (Game Tebak Angka) menggunakan HTML, CSS, dan JavaScript. Game ini memungkinkan pemain menebak angka antara 1 hingga 100, dengan 10 kesempatan untuk menebak dengan benar.

Proyek ini cocok untuk pemula yang ingin mempelajari dasar-dasar pengembangan web dan logika pemrograman. Mari kita mulai!

Apa yang Akan Kita Buat?

Kita akan membuat game tebak angka dengan fitur berikut:

Input Angka: Pemain dapat memasukkan angka tebakan.
Feedback: Memberi tahu pemain apakah tebakan terlalu tinggi, terlalu rendah, atau benar.
Kesempatan: Pemain memiliki 10 kesempatan untuk menebak.
Antarmuka Pengguna: Menggunakan HTML dan CSS untuk tampilan yang menarik.

Tools dan Teknologi yang Dibutuhkan

Text Editor: Seperti Visual Studio Code, Sublime Text, atau Notepad++.
Browser: Untuk menjalankan dan menguji game.
Pengetahuan Dasar: HTML, CSS, dan JavaScript.

Langkah 1: Persiapan Proyek

Buat Folder Proyek:
- Buat folder baru dengan nama number-guessing-game.
Buat File:
- Di dalam folder, buat tiga file:
  - index.html
  - style.css
  - script.js

Langkah 2: Membuat Struktur HTML

Buka file index.html dan tambahkan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Number Guessing Game - Azroi</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="wrapper">
    <header>Guess a number from 1 to 100</header>
    <p class="guess"></p>
    <div class="input-field">
      <input type="number" />
      <button>Check</button>
    </div>
    <p>You have <span class="chances">10</span> chances</p>
  </div>
  <script src="script.js"></script>
</body>
</html>

Run HTML

Langkah 3: Menambahkan Styling dengan CSS

Buka file style.css dan tambahkan kode berikut:

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#f1fff4, #cbfff4);

}

.wrapper {
  padding: 30px 40px;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.wrapper header {
  font-size: 18px;
  font-weight: 400;
  color: #333;
}

.wrapper p {
  color: #333;
  margin-top: 10px;
}

.wrapper .input-field {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 25px 0;
}

.input-field input,
.input-field button {
  height: 50px;
  width: calc(100% / 2 - 20px);
  outline: none;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 18px;
}

.input-field input {
  text-align: center;
  color: #707070;
  width: 110px;
  border: 1px solid #aaa;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  display: none;
}

.input-field input:disabled {
  cursor: not-allowed;
}

.input-field button {
  border: none;
  background: #4a98f7;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.input-field button:active {
  transform: scale(0.97);
}

Langkah 4: Menambahkan Logika Game dengan JavaScript

Buka file script.js dan tambahkan kode berikut:

// Initialize DOM elements
const input = document.querySelector("input"),
  guess = document.querySelector(".guess"),
  checkButton = document.querySelector("button"),
  remainChances = document.querySelector(".chances");

// Set initial focus on the input field
input.focus();

// Generate a random number between 1 and 100
let randomNum = Math.floor(Math.random() * 100) + 1;
let chance = 10;

// Function to check the user's guess
const checkGuess = () => {
  const userGuess = parseInt(input.value);

  if (isNaN(userGuess) {
    guess.textContent = "Please enter a valid number!";
    guess.style.color = "red";
    return;
  }

  if (userGuess < 1 || userGuess > 100) {
    guess.textContent = "Please enter a number between 1 and 100!";
    guess.style.color = "red";
    return;
  }

  chance--;
  remainChances.textContent = chance;

  if (userGuess === randomNum) {
    guess.textContent = "Congratulations! You guessed the correct number!";
    guess.style.color = "green";
    input.disabled = true;
    checkButton.textContent = "Play Again";
    checkButton.removeEventListener("click", checkGuess);
    checkButton.addEventListener("click", resetGame);
  } else if (userGuess < randomNum) {
    guess.textContent = "Too low! Try again.";
    guess.style.color = "red";
  } else {
    guess.textContent = "Too high! Try again.";
    guess.style.color = "red";
  }

  if (chance === 0) {
    guess.textContent = `Game over! The correct number was ${randomNum}.`;
    guess.style.color = "red";
    input.disabled = true;
    checkButton.textContent = "Play Again";
    checkButton.removeEventListener("click", checkGuess);
    checkButton.addEventListener("click", resetGame);
  }

  input.value = "";
  input.focus();
};

// Function to reset the game
const resetGame = () => {
  randomNum = Math.floor(Math.random() * 100) + 1;
  chance = 10;
  input.disabled = false;
  remainChances.textContent = chance;
  guess.textContent = "";
  guess.style.color = "#333";
  input.value = "";
  checkButton.textContent = "Check";
  checkButton.removeEventListener("click", resetGame);
  checkButton.addEventListener("click", checkGuess);
};

// Add event listener to the check button
checkButton.addEventListener("click", checkGuess);

Langkah 5: Menjalankan Game

Buka File index.html:
- Buka file index.html di browser Anda.
Uji Coba Fitur:
- Masukkan angka tebakan dan klik Check.
- Game akan memberi tahu apakah tebakan Anda terlalu tinggi, terlalu rendah, atau benar.
- Jika kesempatan habis, game akan berakhir dan menampilkan angka yang benar.

Kesimpulan

Dengan mengikuti panduan ini, Anda telah berhasil membuat Number Guessing Game menggunakan HTML, CSS, dan JavaScript. Proyek ini melatih kemampuan Anda dalam:

Membuat antarmuka pengguna dengan HTML dan CSS.
Mengimplementasikan logika game dengan JavaScript.
Menangani interaksi pengguna dengan event listener.

Project Number Guessing Game in HTML, CSS, & JavaScript