Juego del Ahorcado en JavaScript

javascript

Otra forma de aprender  a programar didácticamente es realizando pequeños juegos de los cuales conocemos su lógica, para esta ocasión les traigo el famoso juego El Ahorcado programado en JavaScript, básicamente tendremos una lista de palabras almacenadas en un Array, de las cuales el usuario escogerá una con un número del 0 al 7, posteriormente se mostrarán el numero de caracteres ocultos de la palabra, los cuales se irán reemplazando según el usuario valla ingresando letras, así mismo el usuario en cualquier momento podrá ingresar la palabra completa y ganar el juego. veamos el código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
< !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Ahorcado</title>
    <script src="jquery.js"></script>
</head>
<body>
    <h3>Ahorcado</h3>
    <p id="incognita"  style="font-size: 40px;"></p>
    <p>Para esta palabra tienes: <em id="infoIntento"></em> Intentos.</p>
    <script>
    $(document).ready(function () {
        var palabras = ["parangaricutirimicuaro", "esternocleidomastoideo", "silla", "automovil", "ventana", "morrocoy", "metronidazol", "televisor"];
        var r="";
        var palabra_seleccionada="";
        var itn=0;
        var temp = new Array();
        $("#btn_listo").prop("disabled", true)
        $("#btn_intento").prop("disabled", true)
        $("#letra").prop("disabled", true)
        $("#img").hide()
        $("#img2").hide()
        var seleccion = prompt("Para seleccionar su palabra ingrese un número del 0 al 7");
        if(seleccion !=null){
            for (var i = 0; i < palabras[seleccion].length; i++) {
                if((palabras[seleccion].length)-1==i){
                    r+='_';
                }else{
                    r+='_ ';
                }
            };
            $("#incognita").text(r);
            $("#infoIntento").text(palabras[seleccion].length+2);
            itn=palabras[seleccion].length+2;
            temp = r.split(" ");
            palabra_seleccionada = palabras[seleccion];
            $("#btn_listo").prop("disabled", false)
            $("#btn_intento").prop("disabled", false)
            $("#letra").prop("disabled", false)
        }
        $("#btn_intento").click(function () {
            itn--;
            $("#infoIntento").text(itn);
            if(itn>0){
                var letra = $("#letra").val().toLowerCase();
                for (var i = 0; i < temp.length; i++) {
                    if(palabra_seleccionada[i] == letra){
                        temp[i] = letra;
                    }else{
                        if(temp[i]!="_"){
                            // Sin Acciones
                        }else{
                            temp[i] = "_ ";
                        }
                    }
                };
                $("#incognita").text("");
                $("#incognita").html(temp);
                $("#letra").val("");
                $("#letra").focus();
                if(temp.join('')==palabra_seleccionada){
                    $("#img2").show()
                    alert("Ganaste, Efectivamente esa era la palabra!! :D")
                    window.location.reload(true)
                }
            }else{
                $("#img").show()
                alert(":(  Perdiste! Intentalo de nuevo.")
                window.location.reload(true)
            }
        });
        $("#btn_listo").click(function () {
            var opcion = prompt("Ingresa tu palabra: ");
        if(opcion !=null){
            if(opcion == palabra_seleccionada){
                $("#img2").show()
                alert("Ganaste, Efectivamente esa era la palabra!! :D")
                window.location.reload(true)
            }else{
                $("#img").show()
                alert("Perdiste!, Intentalo nuevamente");
                window.location.reload(true)
            }
          }
        });
        $("#letra").focus();
    });
    </script>
    <input type="text" id="letra"/>
    <button id="btn_intento">Intentar</button>
    <button id="btn_listo">Ya se cual es!</button>
    <img id="img" src="ahorcado.jpg" alt=""/>
    <img id="img2" src="win.jpg" alt=""/>
</script></body>
</html>

Si deseas puedes realizar la parte de ir mostrando el muñeco a partir de las equivocaciones del usuario que es la manera clásica de jugar al ahorcado, nos vemos en una próxima entrada de la sección de JavaScript el lenguaje que llego para reinventar Internet.

Si cuentas con algún problema con el código puedes chequear en cualquier momento el repositorio en GitHub.

También puedes ver el código en funcionamiento desde acá.