Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 39
Tutorial para Criar o Jogo da Forca

Neste tutorial veremos como criar o famoso Jogo da Forca. Esse nosso jogo é bem simples, você não sabe qual a palavra que o programa escolheu, mas você poderá incrementá-lo criando categorias de palavras e tempo para terminar.
Vejamos então o exemplo:
Exemplo: Nesse exemplo vamos utilizar três arquivos separados, um HTML, um CSS e um JavaScript. Você deve executar o arquivo html primeiro que ele chamará os outros quando necessário:
Arquivo jogoForca.html:
<!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>Jogo da Forca</title> <script src='/google_analytics_auto.js'></script></head> <body> <h1>Jogo da Forca</h1> <p>Descura a palavra escondida - Digite uma letra <div class="game-container"> <svg height="250" width="200" class="figure-container">  <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" />  <circle cx="140" cy="70" r="20" class="figure-part" />  <line x1="140" y1="90" x2="140" y2="150" class="figure-part" />  <line x1="140" y1="120" x2="120" y2="100" class="figure-part" /> <line x1="140" y1="120" x2="160" y2="100" class="figure-part" />  <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>  <div class="popup-container" id="popup-container"> <div class="popup"> <h2 id="final-message"></h2> <h3 id="final-message-reveal-word"></h3> <button id="play-button">Jogar Novamente</button> </div> </div>  <div class="notification-container" id="notification-container"> <p>Você já digitou esta letra</p> </div> <script src="script.js"></script> </body> </html>
Arquivo style.css:
* { box-sizing: border-box; } body { background-color: #34495e; color: #fff; font-family: Arial, Helvetica, sans-serif; display: flex; flex-direction: column; align-items: center; height: 80vh; margin: 0; overflow: hidden; } h1 { margin: 20px 0 0; } .game-container { padding: 20px 30px; position: relative; margin: auto; height: 350px; width: 450px; } .figure-container { fill: transparent; stroke: #fff; 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%); } .letter { border-bottom: 3px solid #2980b9; 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: flex; */ display: none; align-items: center; justify-content: center; } .popup { background: #2980b9; border-radius: 5px; box-shadow: 0 15px 10px 3px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; } .popup button { cursor: pointer; background-color: #fff; color: #2980b9; border: 0; margin-top: 20px; padding: 12px 20px; font-size: 16px; } .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; transition: transform 0.3s ease-in-out; } .notification-container p { margin: 0; } .notification-container.show { transform: translateY(-50px); }
Arquivo script.js:
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 figureParts = document.querySelectorAll('.figure-part'); const words = ['application', 'programming', 'interface', 'wizard']; let selectedWord = words[Math.floor(Math.random() * words.length)]; let playable = true; const correctLetters = []; const wrongLetters = []; // Mostra a palavra escondida. 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 = 'Parabéns! Você ganhou! ??'; finalMessageRevealWord.innerText = ''; popup.style.display = 'flex'; playable = false; } } // Atualiza as letras erradas function updateWrongLettersEl() { // Display wrong letters wrongLettersEl.innerHTML = ` ${wrongLetters.length > 0 ? '<p>Wrong</p>' : ''} ${wrongLetters.map(letter => `<span>${letter}</span>`)} `; // Cria o Boneco. figureParts.forEach((part, index) => { const errors = wrongLetters.length; if (index < errors) { part.style.display = 'block'; } else { part.style.display = 'none'; } }); // Checa se perdeu. if (wrongLetters.length === figureParts.length) { finalMessage.innerText = 'Infelizmente você perdeu. ??'; finalMessageRevealWord.innerText = `...a palavra era: ${selectedWord}`; popup.style.display = 'flex'; playable = false; } } // Mostra a notificação function showNotification() { notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 2000); } // Keydown - letra pressionada. 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(); } } } } }); // Recomeça o Jogo. playAgainBtn.addEventListener('click', () => { playable = true; // Empty arrays correctLetters.splice(0); wrongLetters.splice(0); selectedWord = words[Math.floor(Math.random() * words.length)]; displayWord(); updateWrongLettersEl(); popup.style.display = 'none'; }); displayWord();
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar um Tocador Musical
Tutorial para Calcular o Índice de Massa Corporal >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino