From 2e4d57efb641ae1ac49d6c9db4f77da15b4716cb Mon Sep 17 00:00:00 2001
From: profesor <correo@rafaelgomez.es>
Date: Fri, 12 Jun 2026 10:20:59 +0200
Subject: [PATCH] Subir archivos a "/"

---
 ahorcado.css | 123 +++++++++++++++++++++++++++++++++++++++++
 ahorcado.js  | 152 +++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html   |  62 +++++++++++++++++++++
 3 files changed, 337 insertions(+)
 create mode 100644 ahorcado.css
 create mode 100644 ahorcado.js
 create mode 100644 index.html

diff --git a/ahorcado.css b/ahorcado.css
new file mode 100644
index 0000000..1bae21f
--- /dev/null
+++ b/ahorcado.css
@@ -0,0 +1,123 @@
+#fin_juego{
+	border: 2px solid red;
+	background-color: #dddddd;
+	width: 45%;
+	height: 50%;
+	position: absolute;
+	left: 50px;
+	top: 60px;
+	opacity: 0.8;
+	z-index: 1000;
+	visibility:hidden;
+	color: green;
+	font-size: 6em;
+	text-align: center;
+	padding-top: 30px;
+}
+#reiniciar_juego{
+	background-color:blue;
+	color:white;
+	font-weight:bold;
+	border: 2px solid white;
+	padding: 5px;
+	font-size:0.3em;
+	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.3);
+}
+#reiniciar_juego:hover{
+	color:red;
+}
+
+#monigote, #palabra{
+	width:50%;
+	display:flex;
+	flex-wrap:wrap;
+	font-size: 6em;
+	justify-content:center;
+	margin-bottom:30px;
+}
+#estadisticas{
+	width:20%;
+	background-color: #cccccc;
+	position:absolute;
+	left: 55%;
+	font-size:1.5em;
+	font-family:fantasy;
+}
+#marcador{
+	font-weight: bold;
+	text-transform: uppercase;
+}
+#jugadas{
+	color: blue;
+	margin-left:10px;
+}
+#ganadas{
+	color: green;
+	margin-left:10px;
+}
+#perdidas{
+	color:red;
+	margin-left:10px;	
+}
+#cuerda, #cabeza{
+	width: 100%;
+	text-align:center;
+	vertical-align:top;
+}
+#brazo_izq{
+	width: 45%;
+	text-align:right;
+}
+#tronco{
+	width: 10%;
+	text-align:center;
+	font-weight:bold;
+}
+#brazo_der{
+	width: 45%;
+	text-align:left;
+}
+#pierna_izq{
+	width: 50%;
+	text-align:right;
+}
+#pierna_der{
+	width: 50%;
+	text-align:left;
+}
+
+
+#teclado{
+	display:flex;
+	flex-wrap:wrap;
+	width:50%;
+}
+
+.tecla{
+	width:5%;
+	border: 1px solid red;
+	margin: 10px;
+	padding: 10px;
+	color: red;
+	text-align:center;
+}
+
+.tecla:hover{
+	background-color:red;
+	color:white;
+}
+
+.letra{
+	width: 10%;
+	height: 1.2em;
+	border-bottom: 2px solid blue;
+	margin: 10px;
+	text-align:center;
+}
+h1{
+	width:50%;
+	text-align:center;
+	font-size:3em;
+	font-family: fantasy;
+	color:blue;
+}
\ No newline at end of file
diff --git a/ahorcado.js b/ahorcado.js
new file mode 100644
index 0000000..e39930f
--- /dev/null
+++ b/ahorcado.js
@@ -0,0 +1,152 @@
+
+//definimos todas las letras que formarán el  teclado
+const letras_validas = 'QWERTYUIOPASDFGHJKLÑZXCVBNM';
+let palabras = [
+  "ARNES", "ASTRO", "ATAJO", "AXILA", "BALON", "BOXER", "BURRO", "BUSTO", "CAFES", "CAJAS", "CALIZ", "CALLO", "CANAS", "CANES", "COMIC", "DANOS", "DATOS", "DEDOS", "DONAS", "DONES", 
+  "DRAMA", "DUBAI", "ELLAS", "ENCIA", "ENOJO", "ENVIO", "ERROR", "ESQUI", "EUROS", "FEMUR", "FORMA", "FOSIL", "FOTOS", "FRENO", "FRESA", "GAFAS", "GALES", "GASES", "GATOS", "GENES", 
+  "GHANA", "GOLES", "GORRA", "GRUAS", "GRUMO", "HAITI", "HOTEL", "HUEVO", "HURTO", "IDEAS", 
+  "IGLUS", "INGLE", "ISLAS", "JAPON", "JARRA", "JEFES", "JERGA", "JUGOS", "JULIO", "LAGOS", 
+  "LAZOS", "LEYES", "LOROS", "LUNAR", "MAGOS", "MANOS", "MAPAS", "MARES", "MEDIA", "MEMES", 
+  "MENTA", "MENUS", "MESAS", "METAS", "MILES", "MODAS", "MONOS", "MOSCU", "MOVIL", "MULTA", 
+  "NAVES", "NEPAL", "NINOS", "NOTAS", "NUBES", "NUDOS", "OBRAS", "OJERA", "OLLAS", "ONDAS", 
+  "ONZAS", "OPERA", "OSITO", "OVULO", "OXIDO", "PANAL", "PANES", "PARIS", "PASAS", "PASEO", 
+  "PATOS", "PAUSA", "PAUTA", "PAVOS", "PECAS", "PECES", "REGLA", "REINO", "REYES", "RIMEL", 
+  "RIOSA", "RITOS", "RULOS", "RUSIA", "SANTA", "SAPOS", "VACAS", "VALLE", "VASOS", "VIAJE", 
+  "ARMAR", "AULLO", "AYUDA", "AYUNA", "BURLA", "CALMO", "CANSA", "CANTA", "CANTO", "DANCE", 
+  "DEBEN", "DEBES", "DEJAS", "DICES", "DILES", "DONAN", "ESPIO", "ESTAR", "EVADE", "EVOCA", 
+  "EXIGE", "FUMAR", "GASTO", "GRABE", "GRITO", "HABIA", "HABLA", "HABRA", "HACEN", "HACES", 
+  "HALLA", "IRIAS", "JUGAR", "LADRO", "LOGRA", "MANDA", "MARCO", "MIRAS", "MORIR", "NADAR", 
+  "ODIAS", "OIRTE", "PAGAR", "PASAR", "QUEMO", "REZAN", "RIMAR", "ROBAR", "RODAR", "SABIA", 
+  "SALIR", "SALTA", "SANAR", "SERAS", "TENGO", "TENIA", "TIENE", "VENGO", "VIMOS", "VOLAR", 
+  "VOTAR", "YENDO", "ABAJO", "ACASO", "AHORA", "ANTES", "ATRAS", "BUENO", "CERCA", "DETRAS", 
+  "DONDE", "ENTRE", "FUERA", "JAMAS", "JUSTO", "LEJOS", "LUEGO", "MITAD", "MUCHO", "NUNCA", 
+  "QUIEN", "QUIZA", "SOBRE", "DEBIL", "DENSA", "DULCE", "DUROS", "EBRIO", "FLACA", "GORDA", 
+  "GRAVE", "GUAPO", "ILUSO", "INDIA", "INDIO", "IRANI", "ISLAM", "LARGA", "LENTA", "LIBRE", 
+  "LINDA", "LOCAS", "LOCOS", "MALES", "MALOS", "PATAN", "ROJAS", "RUSAS", "TAPON", "PLATA", 
+  "NATAL", "PLANA", "LATON", "CITAN", "ANULO", "CINCA", "TACON", "ANCLO", "CUNIT", "UNITO", 
+  "CANUT", "NACIO", "ACTUO", "CUITA", "LUCIA", "CLICA", "AUTUN", "LUCAN", "CINTA"
+];
+let numeroAleatorio = Math.floor(Math.random() * palabras.length);
+let palabra_secreta = palabras[numeroAleatorio];
+//console.log(palabra_secreta);
+let fallos = 0;
+let aciertos = 0;
+let ganadas = 0;
+let perdidas = 0;
+
+dibujar();
+crear_teclado();
+
+function crear_teclado(){
+	document.getElementById('teclado').innerHTML = '';
+	//un bucle recorre el array de letras y va creando las teclas en pantalla
+	for(let n=0; n<letras_validas.length;n++){
+		//creamos un div con la letras
+		let letra = document.createElement('div');
+		//Ponemos los atributos a cada capa de letra
+		letra.setAttribute('id', letras_validas[n]);
+		letra.setAttribute('class', 'tecla');
+		letra.innerHTML=letras_validas[n];
+		//colocamos la letra creada dentro de la capa de teclado
+		document.getElementById('teclado').appendChild(letra);
+		letra.addEventListener('click', evaluar);//añadimos un listener para el clic sobre la letra
+	}	
+}
+
+function evaluar(event){
+	//desactivar la tecla.
+	//document.getElementById(event.target.id).style.border = '1px solid grey';
+	event.target.style.border = '1px solid grey';
+	event.target.style.color = 'white';
+	event.target.style.background = 'grey';
+	event.target.removeEventListener('click', evaluar);
+	
+	//para comprobar si la letra seleccionada está en la palabra, recorremos cada letra de la palabra y la comparamos con la pulsada
+	let acierto = false;//esta variable nos servirá para comprobar si hay algún acierto. Seguirá valiendo false hasta que haya un acierto
+	for(let n=0;n<palabra_secreta.length;n++){
+		if(event.target.id == palabra_secreta[n]){//si la letra pulsada coincide con esta letra de la palabra, hay algún acierto.
+			document.getElementById(n).innerHTML=event.target.id;
+			acierto = true;//cuando alguna letra coincide, marcamos la variable como true, el acierto queda registrado
+			aciertos++;
+		}
+	}
+	if(acierto == false){//si la variable sigue valiendo false, significa que ninguna letra coincidió
+		//alert('la letra no coincide');
+		fallos++;
+		dibujar();
+	}else if (aciertos == palabra_secreta.length){
+		document.getElementById('mensaje').innerHTML='¡Enhorabuena, la has adivinado!';
+		document.getElementById('fin_juego').style.visibility='visible';
+		ganadas++;
+		actualizar_marcador();
+	}
+}
+
+function dibujar(){
+	if(fallos==0){
+		document.getElementById('cabeza').style.visibility='hidden';
+		document.getElementById('tronco').style.visibility='hidden';
+		document.getElementById('brazo_izq').style.visibility='hidden';
+		document.getElementById('brazo_der').style.visibility='hidden';
+		document.getElementById('pierna_izq').style.visibility='hidden';
+		document.getElementById('pierna_der').style.visibility='hidden';
+	}
+	if(fallos==1){
+		document.getElementById('cabeza').style.visibility='visible';	
+	}
+	if(fallos==2){
+		document.getElementById('tronco').style.visibility='visible';	
+	}
+	if(fallos==3){
+		document.getElementById('brazo_izq').style.visibility='visible';	
+	}
+	if(fallos==4){
+		document.getElementById('brazo_der').style.visibility='visible';	
+	}
+	if(fallos==5){
+		document.getElementById('pierna_izq').style.visibility='visible';	
+	}	
+	if(fallos==6){
+		document.getElementById('pierna_der').style.visibility='visible';
+		//En este punto el juego está terminado
+		
+		//Informamos de que el juego está terminado
+		document.getElementById('fin_juego').style.visibility='visible';
+		document.getElementById('mensaje').innerHTML='El juego ha terminado.';
+		perdidas++;
+		actualizar_marcador();
+		//Mostrar la palabra que no ha adivinado. Rellenamos las posiciones vacías en letra roja
+		
+		//Tenemos que recorrer la palabra (bucle for). Para cada letra, si la capa de la letra está vacía, es que no se ha adivinado: tenemos que escribirla en rojo.
+		
+		for(let n=0;n<palabra_secreta.length;n++){
+			if(document.getElementById(n).innerHTML == ''){//si la capa no contiene nada dentro.
+				document.getElementById(n).innerHTML = palabra_secreta[n];//escribimos la letra
+				document.getElementById(n).style.color = 'red';
+				//ponemos el texto de la capa en rojo
+			}
+		}
+	}
+}
+
+
+function reiniciarJuego(){
+	aciertos=0;
+	fallos=0;
+	actualizar_marcador();
+	dibujar();
+	numeroAleatorio = Math.floor(Math.random() * palabras.length);
+	palabra_secreta = palabras[numeroAleatorio];
+	//console.log(palabra_secreta);
+	document.getElementById('fin_juego').style.visibility='hidden';
+	for(let n=0;n<palabra_secreta.length;n++){
+		document.getElementById(n).innerHTML = '';
+		document.getElementById(n).style.color = 'black';
+	}
+	crear_teclado();
+}
+function actualizar_marcador(){
+	document.getElementById('ganadas').innerHTML = 'Ganadas: ' + ganadas;
+	document.getElementById('perdidas').innerHTML = 'Perdidas: ' + perdidas;
+	document.getElementById('jugadas').innerHTML = 'Jugadas: ' + (ganadas+perdidas);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5211abb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html lang="ES">
+	<head>
+		<title>El ahorcado Precario</title>
+		<meta lang="es">
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta name="author" content="Rafael Gómez">
+		<meta name="copyright" content="&copy; 2026 todos los derechos reservados.">
+		<meta name="keywords" content="prácticas javascript">
+		<meta name="date" content="2026-06-08">
+		<link rel="stylesheet" href="ahorcado.css" media="all"/>
+
+	</head>
+
+	<body>
+		<div id="contenedor">
+			<h1>El juego del ahorcado</h1>
+			<div id="fin_juego">
+				<div id="mensaje"></div>
+				<div id="boton_reinicio">
+					<form><input id="reiniciar_juego" type="button" value="Jugar otra vez" onclick="reiniciarJuego('pierde')"/></form>
+				</div>
+			</div>
+			<div id="estadisticas">
+				<div id="marcador">Marcador</div>
+				<div id="jugadas">Jugadas: 0</div>
+				<div id="ganadas">Ganadas: 0</div>
+				<div id="perdidas">Perdidas: 0</div>
+			</div>
+			<div id="monigote">
+				<div id="cuerda">---|---</div>
+				<div id="cabeza">o</div>
+				<div id="brazo_izq">/</div>
+				<div id="tronco">|</div>
+				<div id="brazo_der">\</div>
+				<div id="pierna_izq">/</div>
+				<div id="pierna_der">\</div>				
+			</div>
+			<div id="palabra">
+				<div id="0" class="letra"></div>
+				<div id="1" class="letra"></div>
+				<div id="2" class="letra"></div>
+				<div id="3" class="letra"></div>
+				<div id="4" class="letra"></div>
+			</div>			
+			<div id="teclado">
+			</div>			
+		</div><!-- cierre del contenedor -->
+
+
+<script src="ahorcado.js" type="text/javascript"></script>
+
+	</body>
+	
+</html>
+	
+	
+	
+	
+	
+	
+