Está en la página 1de 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const palabra = ['chorizo', 'patata', 'lechuga', 'tornillo', 'esperanza',
'boniato', 'tortilla', 'biblia', 'ermita', 'bigote', 'carpeta', 'esqueje', 'nariz',
'vampiro', 'procrear', 'zarpas', 'gato', 'miel', 'peluca', 'tendedero', 'nube',
'suave', 'galleta', 'adorable', 'pluma', 'bota', 'piscina', 'almohada', 'juguete',
'feria', 'mojito', 'igualdad', 'ordenador', 'lupa', 'hibrido', 'tesla', 'motor',
'ruido', 'felicidad', 'caramelo', 'dragon', 'secador', 'corazon', 'botella',
'hada', 'puja', 'manta', 'ahorcado', 'espada', 'croqueta', 'caricia',
'golpe','bolsillo', 'peluche','tren', 'bosque', 'pantera', 'joya', 'esmeralda',
'zafiro', 'cucaracha', 'cerdo', 'ordenador', 'grande', 'moflete', 'fibra',
'zanahoria', 'pimiento', 'espuma', 'profundo', 'mascarilla', 'burbuja', 'tierno',
'peludo', 'contar', 'destornillador', 'timbre', 'habichuela', 'puerro', 'pantalon',
'ventana', 'brisa', 'pirtola', 'dinosaurio', 'elefante', 'cachorro', 'navidad',
'verano', 'castillo', 'perfume', 'acido', 'brillante', 'estrella', 'penumbra',
'magia', 'hogar', 'calor', 'llovizna', 'niebla', 'ornitorrinco']
let tabla = false
let randomice
let letrasok = 0
let fallos = 0
let intentos = 1

function jugar()
{
document.getElementById('respuesta').innerHTML = ""
document.images[0].src =`images/ahorcado0.png`
letrasok = 0
intentos = 1
randomice = Math.ceil(Math.random()*palabra.length) - 1
let nodetd1
let nodetd2
let nodeabcd
let nodebutt
let nodeimg
if(tabla == true)
{
let elemento = document.getElementById("fila")
while(elemento.firstChild)
{
elemento.removeChild(elemento.firstChild)
}
}

for(let j = 0; j < palabra[randomice].length; j++)


{
nodetd1 = document.createElement("td")

nodetd1.setAttribute("width", "50")
nodetd1.setAttribute("height", "50")
nodetd1.setAttribute("id", `0${j}`)
document.getElementById("fila").appendChild(nodetd1)
}
if(tabla == true)
{
let elemento = document.getElementById("fila2")
while(elemento.firstChild)
{
elemento.removeChild(elemento.firstChild)
}
}

for(let j = 0; j < palabra[randomice].length; j++)


{
nodetd2 = document.createElement("td")
nodeimg = document.createElement("img")
nodetd2.setAttribute("width", "50")
nodetd2.setAttribute("height", "50")
nodetd2.setAttribute("id", `1${j}`)
nodeimg.setAttribute("width", "50")
nodeimg.setAttribute("width", "50")
nodeimg.setAttribute("src", "images/linea.png")
document.getElementById("fila2").appendChild(nodetd2)
document.getElementById(`1${j}`).appendChild(nodeimg)

}
if(tabla == true)
{
let elemento = document.getElementById("abcd")
while(elemento.firstChild)
{
elemento.removeChild(elemento.firstChild)
}
}

let ascii = 65
for(let j = 0; j < 4; j++)
{
nodeabcd = document.createElement("tr")
nodeabcd.setAttribute("id", `abc${j}`)
document.getElementById("abcd").appendChild(nodeabcd)
for(let i = 0; i < 7; i++)
{
nodetd3 = document.createElement("td")
nodebutt = document.createElement("button")
nodetd3.setAttribute("id", `abc${i}${j}`)
nodebutt.setAttribute("id", `${String.fromCharCode(ascii+32)}`)
nodebutt.setAttribute("value", `$
{String.fromCharCode(ascii+32)}`)
nodebutt.setAttribute("onclick", `enviar('$
{String.fromCharCode(ascii+32)}')`)
document.getElementById(`abc${j}`).appendChild(nodetd3)
document.getElementById(`abc${i}${j}`).appendChild(nodebutt)
document.getElementById(`$
{String.fromCharCode(ascii+32)}`).innerHTML = String.fromCharCode(ascii)
ascii++
if(j == 3 && i == 4)
(
i = 6
)
}
}
tabla = true
}

function enviar(boton)
{
document.getElementById(`${boton}`).style.visibility = 'hidden'

if(fallos == 0)
{
for(let k = 0; k < palabra[randomice].length; k++)
{
if(palabra[randomice].charAt(k) == boton)
{
document.getElementById(`0${k}`).innerHTML = boton
letrasok++
}
else
{
fallos++
}
}
}

if(fallos == palabra[randomice].length)
{
document.images[0].src =`images/ahorcado${intentos}.png`
intentos++
if(intentos == 8)
{
document.images[0].src =`images/perdido.png`
if(tabla == true)
{
let elemento = document.getElementById("fila")
while(elemento.firstChild)
{
elemento.removeChild(elemento.firstChild)
}
}
if(tabla == true)
{
let elemento = document.getElementById("fila2")
while(elemento.firstChild)
{
elemento.removeChild(elemento.firstChild)
}
}
if(tabla == true)
{
let elemento = document.getElementById("abcd")
while(elemento.firstChild)
{
elemento.removeChild(elemento.firstChild)
}
}
document.getElementById('respuesta').innerHTML = `La palabra
correcta era ${palabra[randomice]}`
}
}
fallos = 0
if(letrasok == palabra[randomice].length)
{
document.images[0].src =`images/ganado.png`
if(tabla == true)
{
let elemento = document.getElementById("fila")
while(elemento.firstChild)
{
elemento.removeChild(elemento.firstChild)
}
}
if(tabla == true)
{
let elemento = document.getElementById("fila2")
while(elemento.firstChild)
{
elemento.removeChild(elemento.firstChild)
}
}
if(tabla == true)
{
let elemento = document.getElementById("abcd")
while(elemento.firstChild)
{
elemento.removeChild(elemento.firstChild)
}
}
document.getElementById('respuesta').innerHTML = `La palabra
correcta era ${palabra[randomice]}`
}
}

</script>
<style>
@font-face{
font-family: 'Tiza';
src: url(Chalk-Regular.ttf);
}
*{
font-family: 'Tiza';
font-size: 50pt;
color: white;
}
BODY{
background-color: #2B372C;
background-image: url(images/pizarra.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.botonjugar{
display: flex;
justify-content: center;
}
.ajugar{
outline: none;
border: none;
background: none;
font-size: 40pt;
margin-top: 40px;
}
.ajugar:hover{
cursor: pointer;
color: #DFC05C;
text-shadow: 0px 0px 3px #DFC05C;
}
.juego{
display: flex;
justify-content: center;
align-items: center;
margin-top: 80px;
padding: 20px;
}
.derecha{
display: inline-flex;
flex-direction: column;
margin-top: 40px;
align-items: center;
padding-left:20px;
}
#tabla{
text-align: center;
width: fit-content;
}
#abcd{
margin-top: 10px;
border:none;
text-align: center;
vertical-align: middle;
}
BUTTON{
outline: none;
border: none;
background: none;
}
BUTTON:hover{
cursor: pointer;
color: #DFC05C;
text-shadow: 0px 0px 3px #DFC05C;
}
.arana{
position: absolute;
top:0;
left:0;
opacity: 0.8;
}
.love{
position: absolute;
top:66%;
left:87%;
rotate: 340deg;
opacity: 0.8;
}
.caras{
position: absolute;
top:81%;
left:84%;
opacity: 0.8;
rotate: 340deg;
}
#muerte{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#respuesta{
font-size: 27pt;
color: #DFC05C;
}
</style>
</head>
<body>
<div class="juego">
<div id="muerte">
<img src="images/inicio.png" height="460">
<h2 id="respuesta"></h2>
</div>
<div class="derecha" id="derecha">
<table id="tabla">
<tr id="fila"></tr>
<tr id="fila2"></tr>
</table>
<table id="abcd"></table>
</div>
</div>

<div class="botonjugar"><button onclick="jugar()" class="ajugar"


type="button">Jugar</button></div>
<img class="arana" src="images/araña.png" width="170px">
<img class="love" src="images/amor.png" width="150px">
<img class="caras" src="images/caras.png" width="180px">

</body>
</html>

También podría gustarte