Cara Membuat Game Tebak Gambar dengan JavaScript

Posted on

Cara Membuat Game Tebak Gambar dengan JavaScript – Game Tebak Gambar dengan JavaScript adalah permainan yang menguji kemampuan pemain untuk menebak gambar yang ditampilkan di layar. Tujuan utama dari permainan ini adalah untuk mengidentifikasi gambar yang ditampilkan dan memberikan jawaban yang benar.

Game Tebak Gambar dengan JavaScript dapat memiliki berbagai tingkat kesulitan, mulai dari yang sangat mudah hingga yang sangat sulit, tergantung pada gambar yang digunakan dan petunjuk yang diberikan kepada pemain.

Alat yang Dibutuhkan untuk Membuat Game Tebak Gambar dengan JavaScript

Sebelum memulai proyek membuat game tebak gambar menggunakan JS, pastikan Anda telah menyiapkan beberapa alat berikut:

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar dan berkarya.

Setelah kamu menyiapkan beberapa hal diatas, kamu bisa memulai membuat game tebak gambar yang sudah kelasjava buat dan bisa kamu terapkan langkah-langkahnya dibawah ini.

Cara Membuat Game Tebak Gambar Sederhana dengan JavaScript

1. Siapkan Folder dan File

Buka editor teks pilihanmu dan buat folder khusus untuk proyek Game Tebak Gambar, di dalam folder proyek game tebak gambar tersebut buat tiga file: index.html, style.css, dan script.js.

Baca Juga:   Cara Membuat Game Tetris dengan JavaScript

2. Coding HTML (index.html)

Buatlah file index.html dan tambahkan struktur dasar HTML untuk membuat permainan Tebak Gambar, untuk kode HTML dari game tebak gambar tersebut bisa salin kode dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="gameContainer">
        <img id="gambarTebakan" src="" alt="Tebak Gambar"><br/>
        <input type="text" id="tebakan" placeholder="Tebak Gambar"><br/>
        <button id="btnTebak">Tebak</button>
        <p id="result"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Coding CSS (style.css)

Buatlah file style.css untuk menambahkan tampilan yang menarik pada permainan Tebak Gambar, untuk kode CSS dari game tebak gambar tersebut bisa salin kode dibawah ini.

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
}

#gameContainer {
    text-align: center;
}

img {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin-bottom: 10px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

input[type="text"] {
    padding: 5px;
    margin-bottom: 10px;
}

button {
    padding: 5px 10px;
    background-color: #008CBA;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #005f6b;
}

#result {
    font-weight: bold;
}

4. Coding JavaScript (script.js)

Buatlah file script.js dan tambahkan kode JavaScript untuk mengatur logika permainan Tebak Gambar, untuk kode JavaScript dari game tebak gambar tersebut bisa salin kode dibawah ini.

const gambar = [
    { url: 'kucing.png', tebakan: 'kucing' },
    { url: 'gambar2.jpg', tebakan: 'mobil' },
    { url: 'gambar3.jpg', tebakan: 'bola' }
];

const imgElement = document.getElementById('gambarTebakan');
const tebakanInput = document.getElementById('tebakan');
const resultElement = document.getElementById('result');
const btnTebak = document.getElementById('btnTebak');

let currentIdx = 0;

function displayImage() {
    imgElement.src = gambar[currentIdx].url;
    imgElement.alt = 'Tebak Gambar';
}

function tebakGambar() {
    const tebakan = tebakanInput.value.toLowerCase().trim();
    if (tebakan === gambar[currentIdx].tebakan) {
        resultElement.textContent = 'Tebakan Anda Benar!';
    } else {
        resultElement.textContent = 'Tebakan Anda Salah!';
    }
}

displayImage();
btnTebak.addEventListener('click', tebakGambar);

5. Menjalankan Kode

Setelah semua kode HTML, CSS, JavaScript ditulis, jalankan kode tersebut dengan membuka file index.html pada folder yang kamu simpan tadi atau bisa klik kanan di file tersebut lalu Open in Browser.

Baca Juga:   Cara Membuat Program Kubus dan Balok dengan JavaScript

6. Menampilkan Hasil

Kamu telah berhasil Membuat Game Tebak Gambar dengan JavaScript! Untuk menambahkan komponen atau lebih mempercantik tampilannya menggunakan CSS, kamu bisa mengubahnya sesuai dengan kebutuhanmu.

Akhir Kata

Itulah tutorial mengenai cara membuat game Tebak Gambar sederhana dengan JavaScript yang bisa kamu terapkan dengan mudah. Diharapkan dengan mencoba tutorial tersebut, dapat memberikan manfaat bagi kalian yang ingin memulai belajar dalam pembuatan game menggunakan JavaScript.