trading head

Membuat Game Tebak Angka Sederhana Dengan Node.js

oleh
oleh
Membuat Game Tebak Angka Sederhana Dengan Node.js

Pada artikel kali ini, saya akan memberikan sebuah cara membuat game sederhana dengan node.js, game sederhana tersebut adalah game tebak angka. Pengguna akan menebak angka antara 1 -100 dengan cara memasukkan angka tebakannya sampai berhasil. Berikut cara Membuat Game Tebak Angka Sederhana Dengan Node.js

Cara Membuat Game Tebak Angka Sederhana Dengan Node.js

Ada beberapa langkah untuk Membuat Game Tebak Angka Sederhana Dengan Node.js, ikuti langkah ini sampai habis ya.

Langkah 1 : Persiapan Proyek

Langkah pertama yaitu persiapan proyek node.js, meliputi pembuatan folder, memilih folder yang telah dibuat dan menginstall hal yang diperlukan. Untuk membuat folder dan menginstall depedensi yang diperlukan dapat menggunakan perintah berikut :

mkdir game-tebak-angka
cd game-tebak-angka
npm init -y
npm install express ejs body-parser

Langkah 2 : Struktur Proyek

Struktur proyek dari Membuat Game Tebak Angka Sederhana Dengan Node.js ini yang saya buat seperti berikut :

game-tebak-angka/
|-- app.js
|-- public/
|-- views/
|   |-- index.ejs
|   |-- win.ejs
|-- node_modules/
|-- package.json

Agar pembuatan program tidak terkendalan error, kalian ikuti struktur program tersebut,

Langkah 3 : Pengkodean Game Tebak Angka Sederhana Dengan Node.js

pengkodean akan melibatkan beberapa file, diantara file utama app.js kemudian file yang akan memuat tampilan utama index.ejs dan file yang memuat jika pengguna berhasil menebak win.ejs. jika kalian kebingungan dari ke-3 file mau ditaruh dimana, kalian cek kembali Langkah 2 : Struktur Proyek.

Kode Program : app.js

pengkodean dimuali dari app.js. Kita akan menggunakan Express.js untuk menangani rute dan EJS sebagai mesin tampilan. Berikut adalah kode programnya:

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

let randomNumber = generateRandomNumber(); // Fungsi baru untuk menghasilkan nomor acak
let guessCount = 0;

// Rute untuk mereset permainan
app.get('/reset', (req, res) => {
  randomNumber = generateRandomNumber();
  guessCount = 0;
  res.redirect('/');
});

function generateRandomNumber() {
  return Math.floor(Math.random() * 100) + 1;
}

app.get('/', (req, res) => {
  res.render('index', { message: '', guessCount });
});

app.post('/guess', (req, res) => {
  const userGuess = parseInt(req.body.guess);

  if (isNaN(userGuess)) {
    res.render('index', { message: 'Please enter a valid number.', guessCount });
    return;
  }

  guessCount++;

  if (userGuess === randomNumber) {
    res.render('win', { guessCount });
  } else {
    const message =
      userGuess > randomNumber ? 'Too high. Try again!' : 'Too low. Try again!';
    res.render('index', { message, guessCount });
  }
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

kode Program : index.ejs

berkas index.njs akan menjadi tampilan utaka ketika aplikasi dibuka, pada tampilan index.enjs ini akan memiliki formulih agar pengguna dapat mengoperasikan gamenya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Guess the Number</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-6 m-auto">
                <h1>Guess the Number Game</h1>
                <p><%= message %></p>
                <p>Guess Count: <%= guessCount %></p>
                    <form method="post" action="/guess">
                        <label for="guess">Enter your guess (1-100):</label>
                        <input class="form-control" type="number" id="guess" name="guess" required min="1" max="100">
                        <button type="submit" class="btn btn-info">Submit Guess</button>
                    </form>
                        <!-- Tombol reset permainan -->
                    <form method="get" action="/reset">
                        <button type="submit" class="btn btn-danger">Reset Game</button>
                    </form>
            </div>
        </div>
    </div>
  
</body>
</html>

Kode Program : win.ejs

kode program pada win.ejs adalah halaman yang akan ditampilkan ketika pengguna berhasil menebak angka.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Guess the Number</title>
</head>
<body>
  <h1>Congratulations! You guessed the number!</h1>
  <p>It took you <%= guessCount %> guesses.</p>
  <a class="btn btn-info" href="/">Play Again</a>
</body>
</html>

Penjelasan Kode Program

berikut sedikit penjelasan dari kode program diatas

Mari kita jelaskan kode program tersebut secara rinci baris per baris:

Berkas app.js

Import Modul dan Dependen

   const express = require('express');
   const bodyParser = require('body-parser');
   const path = require('path');
  • Mengimpor modul express untuk membuat aplikasi web.
  • Mengimpor modul body-parser untuk mengurai data yang dikirimkan dalam permintaan HTTP.
  • Mengimpor modul path untuk menangani path (jalur) file dan direktori.

Inisialisasi Aplikasi Express

   const app = express();
   const port = 3000;
  • Membuat objek aplikasi Express.
  • Menetapkan nomor port (3000) yang akan digunakan oleh server.

Middleware untuk Parsing Data Form

   app.use(bodyParser.urlencoded({ extended: true }));
  • Menggunakan middleware body-parser untuk mengurai data formulir yang dikirim dalam permintaan POST.

Menyajikan Berkas Statis dari Direktori ‘public’

   app.use(express.static('public'));
  • Mengizinkan server menyajikan berkas statis (seperti CSS atau gambar) dari direktori public.

Konfigurasi View Engine EJS

   app.set('views', path.join(__dirname, 'views'));
   app.set('view engine', 'ejs');
  • Menetapkan views sebagai direktori untuk menyimpan berkas tampilan (view).
  • Menggunakan mesin tampilan EJS (ejs) untuk merender berkas-berkas tampilan.

Inisialisasi Variabel Permainan

   let randomNumber = generateRandomNumber();
   let guessCount = 0;
  • Menghasilkan nomor acak sebagai jawaban yang akan ditebak.
  • Inisialisasi hitungan tebakan.

Rute untuk Halaman Utama

   app.get('/', (req, res) => {
     res.render('index', { message: '', guessCount });
   });
  • Menangani permintaan GET ke halaman utama.
  • Membuat dan merender halaman index.ejs dengan pesan kosong dan hitungan tebakan.

Rute untuk Proses Tebakan

   app.post('/guess', (req, res) => {
     // ... (lihat penjelasan di bawah)
   });
  • Menangani permintaan POST untuk proses menebak angka.

Rute untuk Mereset Permainan

   app.get('/reset', (req, res) => {
     // ... (lihat penjelasan di bawah)
   });
  • Menangani permintaan GET untuk mereset permainan.

Fungsi untuk Menghasilkan Nomor Acakfunction generateRandomNumber() { return Math.floor(Math.random() * 100) + 1; }

  • Fungsi yang mengembalikan nomor acak antara 1 dan 100.

Menjalankan Server
javascript app.listen(port, () => { console.log(`Server is running on http://localhost:${port}`); });

  • Menjalankan server pada port yang telah ditetapkan.
Berkas views/index.ejs

Deklarasi HTML dan Tampilan Umum

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Guess the Number</title>
   </head>
   <body>
  • Deklarasi dokumen HTML dan bagian kepala (head) dengan pengaturan tampilan.

Elemen Heading dan Pesan

     <h1>Guess the Number Game</h1>
     <p><%= message %></p>
     <p>Guess Count: <%= guessCount %></p>
  • Judul permainan dan elemen pesan ditampilkan.
  • Menampilkan hitungan tebakan.

Formulir untuk Tebakan Angka

     <form method="post" action="/guess">
       <label for="guess">Enter your guess (1-100):</label>
       <input type="number" id="guess" name="guess" required min="1" max="100">
       <button type="submit">Submit Guess</button>
     </form>
  • Formulir untuk pengguna memasukkan tebakan angka.
  • Tombol submit untuk mengirim formulir.

Formulir untuk Mereset Permainan

   <!-- Tombol reset permainan -->
   <form method="get" action="/reset">
     <button type="submit">Reset Game</button>
   </form>
  • Tombol untuk mereset permainan. Mengarahkan ke rute /reset saat diklik.

Penutup HTML

   </body>
   </html>
  • Penutup elemen badan (body) dan dokumen HTML.
Berkas views/win.ejs

Berkas ini memiliki struktur yang mirip dengan index.ejs dengan perubahan pesan untuk menunjukkan bahwa pengguna telah berhasil menebak angka.

Catatan:
  • Routing dan Handling Request/Response: Rute (app.get dan app.post) menangani permintaan HTTP dan memberikan tanggapan yang sesuai dengan merender berkas tampilan atau melakukan redirect.
  • Middleware: body-parser digunakan untuk mengurai data formulir dari permintaan POST.
  • Variabel dan Fungsi: Variabel randomNumber dan guessCount digunakan untuk melacak keadaan permainan, dan fungsi generateRandomNumber menghasilkan nomor acak.
  • Template Engine (EJS): EJS digunakan untuk membuat berkas HTML dinamis dengan menyertakan variabel dan logika template.

Hasi dari Membuat Game Tebak Angka Sederhana Dengan Node.js

Program dijalankan dengan menuliskan perintah

node app.js

untuk mengoperasikan program dengan cara mengunjungi link : localhost:3000

berikut tampilan saat program tebak game sederhana dijalankan :

Tampilan awal ketiga program dijalankan, pengguna akan diminta untuk memasukkan angka antara 1 – 100 untuk menebaknya, untuk menginputnya dengan cara klik submit, jika pengguna klik reset, maka game akan dimulai kembali ke sesi awal game.

tampilan ketika pengguna memasukkan angka terlalu tinggi dari tebakan angka, maka akan tampil pesan “too hight. try again!”

Tampilan ketika pengguna memasukkan angka terlalu rendah dari angka tebakan, maka akan muncul pesan ” too low. try again!”

ketika pengguna berhasil menebak angka yang diberikan, maka akan ada pesan selaman dan ditampilkan jumlah berapa kali kita menebak, dan terdapat tombol jika ingin kembali.

Itulah pembahasan dari kode, penjelasan sampai menjalankan perogram dari Membuat Game Tebak Angka Sederhana Dengan Node.js. Semoga artikel ini bermanfaat, sampaijumpa pada artikel berikutnya. !

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *