diff --git a/app.js b/app.js new file mode 100644 index 0000000..de12a52 --- /dev/null +++ b/app.js @@ -0,0 +1,76 @@ +let numeroSecreto = 0; +let intentos = 0; +let listaNumerosSorteados = []; +let numeroMaximo = 10; + + + +function asignarTextoElemento(elemento, texto) { + let elementoHTML = document.querySelector(elemento); + elementoHTML.innerHTML = texto; + return; +} + +function verificarIntento() { + let numeroDeUsuario = parseInt(document.getElementById('valorUsuario').value); + + if (numeroDeUsuario === numeroSecreto) { + asignarTextoElemento('p',`Acertaste el número en ${intentos} ${(intentos === 1) ? 'vez' : 'veces'}`); + document.getElementById('reiniciar').removeAttribute('disabled'); + } else { + //El usuario no acertó. + if (numeroDeUsuario > numeroSecreto) { + asignarTextoElemento('p','El número secreto es menor'); + } else { + asignarTextoElemento('p','El número secreto es mayor'); + } + intentos++; + limpiarCaja(); + } + return; +} + +function limpiarCaja() { + document.querySelector('#valorUsuario').value = ''; +} + +function generarNumeroSecreto() { + let numeroGenerado = Math.floor(Math.random()*numeroMaximo)+1; + + console.log(numeroGenerado); + console.log(listaNumerosSorteados); + //Si ya sorteamos todos los números + if (listaNumerosSorteados.length == numeroMaximo) { + asignarTextoElemento('p','Ya se sortearon todos los números posibles'); + } else { + //Si el numero generado está incluido en la lista + if (listaNumerosSorteados.includes(numeroGenerado)) { + return generarNumeroSecreto(); + } else { + listaNumerosSorteados.push(numeroGenerado); + return numeroGenerado; + } + } +} + +function condicionesIniciales() { + asignarTextoElemento('h1','Juego del número secreto!'); + asignarTextoElemento('p',`Indica un número del 1 al ${numeroMaximo}`); + numeroSecreto = generarNumeroSecreto(); + intentos = 1; + console.log(numeroSecreto); +} + +function reiniciarJuego() { + //limpiar caja + limpiarCaja(); + //Indicar mensaje de intervalo de números + //Generar el número aleatorio + //Inicializar el número intentos + condicionesIniciales(); + //Deshabilitar el botón de nuevo juego + document.querySelector('#reiniciar').setAttribute('disabled','true'); + +} + +condicionesIniciales(); \ No newline at end of file diff --git a/img/Ruido.png b/img/Ruido.png new file mode 100644 index 0000000..342d06e Binary files /dev/null and b/img/Ruido.png differ diff --git a/img/bg.png b/img/bg.png new file mode 100644 index 0000000..1818e0a Binary files /dev/null and b/img/bg.png differ diff --git a/img/code.png b/img/code.png new file mode 100644 index 0000000..47a57c9 Binary files /dev/null and b/img/code.png differ diff --git a/img/ia.png b/img/ia.png new file mode 100644 index 0000000..e951bfe Binary files /dev/null and b/img/ia.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8a01bcc --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + JS Game + + + + +
+
+
+
+

+

+
+ +
+ + +
+
+ Una persona mirando a la izquierda +
+
+ + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ac1a45b --- /dev/null +++ b/style.css @@ -0,0 +1,111 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + color: white; +} + +body { + background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%); + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + + +body::before { + background-image: url("img/code.png"); + background-repeat: no-repeat; + background-position: right; + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + opacity: 0.4; +} + +.container { + width: 1200px; + height: 600px; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 24px; + border: 1px solid #1875E8; + box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15); + background-image: url("img/Ruido.png"); + background-size: 100% 100%; + position: relative; +} + + +.container__contenido { + display: flex; + align-items: center; + position: absolute; + bottom: 0; +} + +.container__informaciones { + flex: 1; + padding: 3rem; +} + +.container__boton { + border-radius: 16px; + background: #1875E8; + padding: 16px 24px; + width: 100%; + font-size: 24px; + font-weight: 700; + border: none; + margin-top: 2rem; +} + +.container__boton:disabled { + background: #898989; +} + +.container__texto { + margin: 16px 0 16px 0; +} + +.container__texto-azul { + color: #1875E8; +} + +.container__input { + width: 100%; + height: 72px; + border-radius: 16px; + background-color: #FFF; + border: none; + color: #1875E8; + padding: 2rem; + font-size: 24px; + font-weight: 700; + font-family: 'Inter', sans-serif; +} + +.container__botones { + display: flex; + gap: 2em; +} + +h1 { + font-family: 'Chakra Petch', sans-serif; + font-size: 72px; + padding-bottom: 3rem; +} + +p, +button { + font-family: 'Inter', sans-serif; +} + +.texto__parrafo { + font-size: 32px; + font-weight: 400; +} \ No newline at end of file