Adivina el número

La manera mas sencilla de aprender javascript o cualquier otro lenguaje desde cero, es realizando practicas sencillas en donde incluyan conceptos básicos (funciones, for, if, DOM, entre otros); vamos a realizar un juego de números en donde el jugador adivinará el número que esta en un rango del 1 al 100 y solo va a tener 10 posibilidades, como siempre al final les dejo el código fuente del CSS y Js.

La idea es esta:

Debería elegir un número aleatorio entre 1 y 100, luego desafiar al jugador a que adivine el número en 10 turnos. Después de cada turno, se debe informar al jugador si está bien o mal, y, si está equivocado, si la suposición fue demasiado baja o demasiado alta. También debe decirle al jugador qué números adivinaron previamente. El juego terminará una vez que el jugador adivine correctamente, o una vez que se queden sin turnos. Cuando el juego termina, el jugador debe tener una opción para comenzar a jugar nuevamente.

Como siempre vamos a enlistar los pasos a seguir:

1.- Generar un número aleatorio entre el 1 y el 100.

2.-Establecer un contador para definir los turnos inicializando con 9 (Para que cada vez que ingrese un numero el contador vaya disminuyendo -1).

3.- Proporcionar al jugador  una manera de adivinar el numero

4.-Guardar el numero y mostrarla ante el jugador

5.- Comprobar si el numero es correcto

      *si no es correcto y si el numero es menor al numero aleatorio:

         mostrar un mensaje en donde diga que el numero es menor, en este caso seria "bajo"

          *si no es correcto y el numero es mayor al numero aleatorio

             mostrar un mensaje en donde diga que el numero es mayor, en este caso seria "alto"

               *si el numero es igual al numero aleatorio 

                  mostrar un mensaje en donde diga "Felicidades Ganaste !!!"

                  desabilitar el botón

                  desabilitar en input donde ingresar el numero a adivinar

                  crear un botón para reiniciar el juego

                    crear un id del botón en este caso "Reiniciar"

                    incluir una función para reiniciar el juego en este caso "reiniciar juego"

6.- comprobar si el contador es igual 0

     * si el contador es igual a 0

        mostrar un mensaje: "perdiste, sigue jugando" 

        desabilitar el botón

        desabilitar en input donde ingresar el numero a adivinar

        crear un botón para reiniciar el juego

            crear un id del botón en este caso "Reiniciar"

            incluir una función para reiniciar el juego en este caso "reiniciar juego"     

7.- limpiar el input

8.- disminuir el contador -1

9.- crear función para reiniciar juego.   

           

Empecemos a programar: en el HTML vamos a incluir la instrucción en un parrafo, un input con id= "caja" y un botón con id="btnveri" para que el jugador pueda ingresar un numero, después vamos a incluir dos párrafos vacíos con el id="mostrar" que es donde se mostrara los números dados por el jugador y el otro párrafo con el id="medir" que es donde mostramos el mensaje si el numero dado es muy bajo o muy alto.

1.- Generar un número aleatorio entre el 1 y el 100.

2.-Establecer un contador para definir los turnos inicializando con 9 (Para que cada vez que ingrese un numero el contador vaya disminuyendo -1).

Aquí iniciamos con la función.

3.- Proporcionar al jugador  una manera de adivinar el numero

4.-Guardar el numero y mostrarla ante el jugador

5.- Comprobar si el numero es correcto

      *si no es correcto y si el numero es menor al numero aleatorio:

         mostrar un mensaje en donde diga que el numero es menor, en este caso seria "bajo"

         (Se incluye el color rojo al mensaje para tener mas diseño)

     *si no es correcto y el numero es mayor al numero aleatorio

             mostrar un mensaje en donde diga que el numero es mayor, en este caso seria "alto"

             (De igual manera incluimos el color verde en el mensaje)

    *si el numero es igual al numero aleatorio 

                  mostrar un mensaje en donde diga "Felicidades Ganaste !!!"

                  desabilitar el botón

                  desabilitar el input donde ingresar el numero a adivinar

                  crear un botón para reiniciar el juego

                    crear un id del botón en este caso "Reiniciar"

                    incluir una función para reiniciar el juego en este caso "reiniciar juego"

                    ( La función reiniciarJuego lo vamos a crear mas adelante)

6.- comprobar si el contador es igual 0

     * si el contador es igual a 0

        mostrar un mensaje: "perdiste, sigue jugando" 

        desabilitar el botón

        desabilitar en input donde ingresar el numero a adivinar

        crear un botón para reiniciar el juego

            crear un id del botón en este caso "Reiniciar"

            incluir una función para reiniciar el juego en este caso "reiniciar juego" 

            ( De igual manera la función reinciarJuego lo vamos a crear mas adelante)

7.- limpiar el input, la función focus() apunta el puntero al input una vez que se limpie

8.- disminuir el contador -1

9.- crear función para reiniciar juego, en este caso recargamos la pagina para que vuelva a la normalidad.

Como siempre menciono el modo de programar depende del programador, tal vez tu en vez de iniciar el contador con 9 lo inicies con 1 y en vez de restar el contador lo incrementas cada vez que el jugardor pulse el botón, pero bueno espero y te haya gustado vamos a seguir con estos proyectos para mejor nuestra forma de programar y para que la lógica se nos haga mas fácil.

A continuación dejo el código fuente tanto del Js como CSS dejando en claro que no soy muy bueno con el back-end.

CSS:

body{

  background-image: url(fondo.jpg);

  background-repeat: no-repeat;

  width: 500px; 

  padding:6%;

  margin: 0 auto;

}

input{

  font-size: 1.1em;

  text-align:center;

  border: 2px solid orange;

}

h1{

  background: linear-gradient(white,blue);

  -webkit-background-clip: text;

  color: transparent; 

  text-align:center;

  font-size:3.5em;

  text-shadow: 0 0 20px #fff;

}

#btnveri,#Reiniciar{

  color: #0099CC;

  background: transparent;

  border: 2px solid #0099CC;

  border-radius: 6px;

  border: none;

      color: white;

      padding: 7px 7px;

      text-align: center;

      display: inline-block;

      font-size: 16px;

      margin: 4px 2px;

      -webkit-transition-duration: 0.4s; /* Safari */

      transition-duration: 0.4s;

      cursor: pointer;

      text-decoration: none;

      text-transform: uppercase;

}

#btnveri,#Reiniciar {

      background-color: white; 

      color: black; 

      border: 2px solid #008CBA;

}

#btnveri:hover,#Reiniciar:hover#reiniciar {

      background-color: #008CBA;

      color: white;

 }

#mostrar{

  background: linear-gradient(white,blue);

  -webkit-background-clip: text;

  color: orange; 

  text-align:center;

  font-size:3.5em;

  text-shadow: 0 0 20px #fff;

}

#medir{

  background: linear-gradient(white,#c3e7f5);

  text-align:center;

  font-size:3.5em;

  text-shadow: 0 0 10px #fff;

  

}

.instruccion{

  //background: linear-gradient(white,blue);

  -webkit-background-clip: text;

  color: white; 

  text-align:center;

  font-size:1.3em;

  text-shadow: 0 0 20px;

}

}

JS:

var aleatorio=Math.floor(Math.random() * 100) + 1;
var cont=9;
var numero;
botonReset;

function verificar(){
  var numero=Number(document.getElementById("caja").value);
  document.getElementById("mostrar").textContent += numero + ' ';

  if(numero!=aleatorio && numero<aleatorio){
    document.getElementById("medir").innerHTML="bajo";
    document.getElementById("medir").style.color = "red";

    }else if(numero!=aleatorio && numero>aleatorio){
      document.getElementById("medir").innerHTML="alto";
      document.getElementById("medir").style.color = "green";

     }else if(numero==aleatorio){
        document.getElementById("medir").innerHTML="Felicidades Ganastes !!!";
        document.getElementById("medir").style.color = "orange";
        document.getElementById("btnveri").disabled=true;
        document.getElementById("caja").disabled=true;

        botonReset = document.createElement('button');
        botonReset.textContent = 'Reiniciar juego';
        botonReset.id = 'Reiniciar';
        document.body.appendChild(botonReset);
        botonReset.addEventListener('click', reiniciarJuego);
      }
 if(cont==0){
   document.getElementById("medir").innerHTML="Perdiste, sigue jugando";
   document.getElementById("btnveri").disabled=true;
   document.getElementById("caja").disabled=true;

   botonReset = document.createElement('button');
   botonReset.textContent = 'Reiniciar juego';
   botonReset.id = 'Reiniciar';
   document.body.appendChild(botonReset);
   botonReset.addEventListener('click', reiniciarJuego);
  }

   document.getElementById("caja").value="";
   document.getElementById("caja").focus();

   cont--;
 }

function reiniciarJuego(){
  location.reload(true);
}

Capturas