<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description"
content="El típico juego del ahorcado en el que se deben ir introduciendo letras para adivinar una palabra, programado con Javascript">
<meta name="robots" content="noindex, follow">
<title>Juego del ahorcado con Javascript</title>
</head>
<body>
<div class="container">
<h1>Juego del ahorcado con Javascript</h1>
<div class="row">
<div id="juego">
<div id="current_word"></div>
<p class="bold">Introduzca una letra:</p>
<input type="text" id="letra">
<input type="button" id="btn" value="Verificar letra">
<div class="message">:_( ¡¡Noooo!! ¡¡Sigue intentándolo!!</div>
</div>
<div id="ahorcado"></div>
</div>
<div id="contador"></div>
</div>
<script src="javascript.js"></script>
</body>
</html>
@font-face {
font-family: myFont;
src: url(https://pablomonteserin.com/wp-content/themes/m/fonts/Poppins-Regular.ttf);
}
body {
font-family: myFont;
}
.container {
max-width: 1024px;
margin: auto;
font-family: myFont;
}
#ahorcado {
background: url(/res/javascript-es6/ex/ahorcado/hangman-game_pm.png);
width: 300px;
height: 330px;
}
.row {
display: flex;
justify-content: space-evenly;
}
#current_word {
font-size: 2rem;
font-weight: bold;
}
#btn {
margin-top: 15px;
display: block;
color: #fff !important;
background-color: #f77754 !important;
font-size: 1rem !important;
font-weight: bold;
padding: 12px 32px !important;
transition: 0.8s;
border-radius: 30px !important;
box-shadow: inset 0 0 0 0 #fbfbfb;
text-align: center;
cursor: pointer;
border: 1px solid #f77754;
}
.message {
margin-top: 15px;
display: none;
font-weight: bold;
}
#juego {
min-width: 400px;
}
#letra {
font-size: 1.8rem;
padding: 5px;
}
.bold {
font-weight: bold;
}
let contadorErrores = 0;
let secretWords = ["coche", "casa", "pollo", "garbanzo"];
let secretWord = secretWords[Math.floor(Math.random() * secretWords.length)];
let currentWord = secretWord.replace(/./g, "_ ");
document.querySelector("#current_word").innerHTML = currentWord;
evaluaLetra = _ => {
//Recojo la letra introducida por el usuario
let letra = document.querySelector("#letra").value;
//Obtengo la posición de dicha letra en la palabra secreta(si no está, será -1)
let posicionCoincidencia = secretWord.indexOf(letra);
//Evalúo si la letra está dentro de la palabra
if (posicionCoincidencia >= 0) {
//Si la letra es encontrada, el siguiente bucle se encarga de sustituir el guión bajo de currentWord por la letra pertinente
for (i in secretWord) {
if (secretWord[i] == letra) {
currentWord = currentWord.replaceAt(i * 2, letra);
}
}
document.querySelector("#current_word").innerHTML = currentWord;
document.querySelector("#letra").value = "";
} else {
contadorErrores++;
var movimiento = -310 * contadorErrores;
if (contadorErrores > 3) {
document.querySelector('.message').style.display = 'block';
} else {
document.querySelector("#ahorcado").style.backgroundPosition = movimiento + "px 0px"
}
}
if (currentWord.indexOf("_") < 0) {
document.querySelector("#juego").innerHTML = '<span style="font-size:4em">VICTORIA</span>';
}
document.querySelector("#contador").innerHTML = contadorErrores;
}
String.prototype.replaceAt = function (index, character) {
return this.substr(0, index) + character + this.substr(index + character.length);
}
document.querySelector('#btn').addEventListener('click', evaluaLetra);