Selamat datang di blog kami! Di sini, kami berbagi pengetahuan, wawasan, dan tips terkini seputar Pemograman Web. Siap untuk menjelajahi dunia Pemograman bersama-sama?
Pada artikel ini, kita akan membahas langkah demi langkah dalam membuat game hangman sederhana menggunakan HTML, CSS, dan JavaScript. Mari kita mulai!
Langkah 1: Membuat Struktur HTML
Kita akan memulai dengan membuat struktur dasar HTML untuk projek kita. Buka editor teks favorit Anda dan buatlah file HTML baru. Kemudian, tambahkan kode berikut:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <title>Hangman</title> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="game-details"> | |
| <span class="hangman">Hangman Game</span> | |
| <span class="kategori">Kategori:</span> | |
| </div> | |
| <div class="game-container"> | |
| <svg height="250" width="200" class="figure-container"> | |
| <!-- Rod --> | |
| <line x1="60" y1="20" x2="140" y2="20" /> | |
| <line x1="140" y1="20" x2="140" y2="50" /> | |
| <line x1="60" y1="20" x2="60" y2="230" /> | |
| <line x1="20" y1="230" x2="100" y2="230" /> | |
| <!-- Head --> | |
| <circle cx="140" cy="70" r="20" class="figure-part" /> | |
| <!-- Body --> | |
| <line x1="140" y1="90" x2="140" y2="150" class="figure-part" /> | |
| <!-- Arms --> | |
| <line x1="140" y1="120" x2="120" y2="100" class="figure-part" /> | |
| <line x1="140" y1="120" x2="160" y2="100" class="figure-part" /> | |
| <!-- Legs --> | |
| <line x1="140" y1="150" x2="120" y2="180" class="figure-part" /> | |
| <line x1="140" y1="150" x2="160" y2="180" class="figure-part" /> | |
| </svg> | |
| <div class="wrong-letters-container"> | |
| <div id="wrong-letters"></div> | |
| </div> | |
| <div class="word" id="word"></div> | |
| </div> | |
| <!-- Container for final message --> | |
| <div class="popup-container" id="popup-container"> | |
| <div class="popup"> | |
| <h2 id="final-message"></h2> | |
| <h3 id="final-message-reveal-word"></h3> | |
| <button class="button" id="play-button">Main Lagi</button> | |
| </div> | |
| </div> | |
| <!-- Notification --> | |
| <div class="notification-container" id="notification-container"> | |
| <p>Kamu sudah memilih kata ini</p> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
Langkah 2: Mengatur Tampilan dengan CSS
Selanjutnya, kita perlu mengatur tampilan projek menggunakan CSS. Buat file CSS baru dengan nama "style.css" dan tambahkan kode berikut:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| background-image: linear-gradient(to left, grey, black, teal); | |
| font-family: Arial, Helvetica, sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| .wrapper { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| overflow: hidden; | |
| flex-direction: column; | |
| justify-content: center; | |
| border-radius: 5px; | |
| background: rgba(0, 0, 0, 0.5); | |
| box-shadow: 0 0 10px 5px black; | |
| } | |
| .game-details { | |
| color: #B8C6DC; | |
| font-weight: 500; | |
| font-size: 1.2rem; | |
| padding: 20px 27px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .game-container { | |
| padding: 20px 30px; | |
| position: relative; | |
| margin: auto; | |
| height: 350px; | |
| width: 450px; | |
| background-color: #4CAF50; | |
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); | |
| border-radius: 10px; | |
| } | |
| .figure-container { | |
| fill: transparent; | |
| stroke: #000000; | |
| stroke-width: 4px; | |
| stroke-linecap: round; | |
| } | |
| .figure-part { | |
| display: none; | |
| } | |
| .wrong-letters-container { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| text-align: right; | |
| } | |
| .wrong-letters-container p { | |
| margin: 0 0 5px; | |
| } | |
| .wrong-letters-container span { | |
| font-size: 24px; | |
| } | |
| .word { | |
| display: flex; | |
| position: absolute; | |
| bottom: 10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| color: #000000; | |
| } | |
| .letter { | |
| border-bottom: 3px solid #000000; | |
| display: inline-flex; | |
| font-size: 30px; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 3px; | |
| height: 50px; | |
| width: 20px; | |
| } | |
| .popup-container { | |
| background-color: rgba(0, 0, 0, 0.3); | |
| position: fixed; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .popup { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| justify-content: center; | |
| border-radius: 5px; | |
| padding: 20px; | |
| text-align: center; | |
| color: #fff; | |
| transform: translate(-50%, -50%); | |
| background-image: linear-gradient(to left, grey, black, teal); | |
| box-shadow: 0 0 10px 5px black; | |
| } | |
| .popup button { | |
| cursor: pointer; | |
| background-color: #fff; | |
| color: #000000; | |
| margin-top: 20px; | |
| padding: 12px 20px; | |
| font-size: 16px; | |
| border: none; | |
| border-radius: 5px; | |
| box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .popup button:hover { | |
| background-color: #000; | |
| color: #fff; | |
| } | |
| .popup button:active { | |
| transform: scale(0.98); | |
| } | |
| .popup button:focus { | |
| outline: 0; | |
| } | |
| .notification-container { | |
| background-color: rgba(0, 0, 0, 0.3); | |
| border-radius: 10px 10px 0 0; | |
| padding: 15px 20px; | |
| position: absolute; | |
| bottom: -50px; | |
| transform: translateX(-50%); | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .notification-container p { | |
| margin: 0; | |
| color: #fff; | |
| } | |
| .notification-container.show { | |
| transform: translateY(-50px); | |
| } |
Selanjutnya, kita akan menambahkan logika JavaScript untuk membuat projek berfungsi dengan benar. Buat file JavaScript baru dengan nama "script.js" dan tambahkan kode berikut:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const wordEl = document.getElementById('word'); | |
| const wrongLettersEl = document.getElementById('wrong-letters'); | |
| const playAgainBtn = document.getElementById('play-button'); | |
| const popup = document.getElementById('popup-container'); | |
| const notification = document.getElementById('notification-container'); | |
| const finalMessage = document.getElementById('final-message'); | |
| const finalMessageRevealWord = document.getElementById('final-message-reveal-word'); | |
| const categorySpan = document.querySelector('.kategori'); | |
| const figureParts = document.querySelectorAll('.figure-part'); | |
| const words = { | |
| programming: ["php", "javascript", "dart","css","phyton"], | |
| Anime: ["bleach", "boruto","parasite","dragonball","naruto"], | |
| Hewan: ["capung", "komodo","biawak","anoa","tapir"], | |
| Negara: ["laos", "bolivia","peru","meksiko","uzbeskistan"] | |
| }; | |
| const categories = Object.keys(words); | |
| let selectedCategory = categories[Math.floor(Math.random() * categories.length)]; | |
| let selectedWord = words[selectedCategory][Math.floor(Math.random() * words[selectedCategory].length)]; | |
| let playable = true; | |
| const correctLetters = []; | |
| const wrongLetters = []; | |
| // Show hidden word | |
| function displayWord() { | |
| wordEl.innerHTML = ` | |
| ${selectedWord | |
| .split('') | |
| .map( | |
| letter => ` | |
| <span class="letter"> | |
| ${correctLetters.includes(letter) ? letter : ''} | |
| </span> | |
| ` | |
| ) | |
| .join('')} | |
| `; | |
| const innerWord = wordEl.innerText.replace(/[ \n]/g, ''); | |
| if (innerWord === selectedWord) { | |
| finalMessage.innerText = 'Selamat! Kamu Menang! 😃'; | |
| finalMessageRevealWord.innerText = ''; | |
| popup.style.display = 'flex'; | |
| playable = false; | |
| } | |
| } | |
| // Update the wrong letters | |
| function updateWrongLettersEl() { | |
| // Display wrong letters | |
| wrongLettersEl.innerHTML = ` | |
| ${wrongLetters.length > 0 ? '<p>Wrong</p>' : ''} | |
| ${wrongLetters.map(letter => `<span>${letter}</span>`).join('')} | |
| `; | |
| // Display parts | |
| figureParts.forEach((part, index) => { | |
| const errors = wrongLetters.length; | |
| if (index < errors) { | |
| part.style.display = 'block'; | |
| } else { | |
| part.style.display = 'none'; | |
| } | |
| }); | |
| // Check if lost | |
| if (wrongLetters.length === figureParts.length) { | |
| finalMessage.innerText = 'Sayang sekali, kamu kalah. 😕'; | |
| finalMessageRevealWord.innerText = `Kata tersebut adalah: ${selectedWord}`; | |
| popup.style.display = 'flex'; | |
| playable = false; | |
| } | |
| } | |
| // Show notification | |
| function showNotification() { | |
| notification.classList.add('show'); | |
| setTimeout(() => { | |
| notification.classList.remove('show'); | |
| }, 2000); | |
| } | |
| // Keydown letter press | |
| window.addEventListener('keydown', e => { | |
| if (playable) { | |
| if (e.keyCode >= 65 && e.keyCode <= 90) { | |
| const letter = e.key.toLowerCase(); | |
| if (selectedWord.includes(letter)) { | |
| if (!correctLetters.includes(letter)) { | |
| correctLetters.push(letter); | |
| displayWord(); | |
| } else { | |
| showNotification(); | |
| } | |
| } else { | |
| if (!wrongLetters.includes(letter)) { | |
| wrongLetters.push(letter); | |
| updateWrongLettersEl(); | |
| } else { | |
| showNotification(); | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Restart game and play again | |
| playAgainBtn.addEventListener('click', () => { | |
| playable = true; | |
| // Empty arrays | |
| correctLetters.splice(0); | |
| wrongLetters.splice(0); | |
| selectedCategory = categories[Math.floor(Math.random() * categories.length)]; | |
| selectedWord = words[selectedCategory][Math.floor(Math.random() * words[selectedCategory].length)]; | |
| displayWord(); | |
| updateWrongLettersEl(); | |
| // Update category | |
| categorySpan.textContent = `Kategori: ${selectedCategory}`; | |
| popup.style.display = 'none'; | |
| }); | |
| // Initialize game | |
| function init() { | |
| // Update category | |
| categorySpan.textContent = `Kategori: ${selectedCategory}`; | |
| displayWord(); | |
| } | |
| init(); |
Langkah 4: Menjalankan Projek
Setelah menambahkan semua kode di atas, kita tinggal menyimpan semua file (HTML, CSS, dan JavaScript) dalam satu folder. Lalu, buka file HTML menggunakan browser, dan Anda akan melihat dan memainkna game hangman sederhana tersebut .
Selamat! Anda telah berhasil membuat game hangman sederhana menggunakan HTML, CSS, dan JavaScript. Anda dapat mengembangkan game hangman ini dengan menambahkan lebih banyak soal, kategori dan hal lainnya atau meningkatkan tampilannya sesuai keinginan Anda.
Kalian juga dapat menonton tutorial lengkap dibawah ini mengenai tutorial membuat game hangman sederhana.
Dalam video di atas, kamu bisa melihat tahapan proses pembuatan game hangman sederhana, bukan itu saja jika kamu suka dengan program ini kamu bisa juga melihat kode tersebut dan mempraktekkannya secara langsung.
Semoga tutorial ini bermanfaat bagi Anda dalam mempelajari dasar-dasar pembuatan aplikasi web menggunakan HTML, CSS, dan JavaScript. Terima kasih telah membaca!
Jangan lupa untuk membaca artikel selanjutnya di blog kami, Tetaplah terhubung!
0 Comments