Creando nuestro algoritmo para el juego del ahorcado

Clase 32 de 50 • Curso de Programación Básica 2014

Clase anteriorSiguiente clase

Fernando López Moreno

student•

Les comparto mi juego de Ahorcado. Saludos.

http://example.developerlopez.com/ahorcado/

Santiago Demierre

student•

Te quedo excelente!

Carlo Santino Salazar Loaiza

student•

no me deja entrar

Cesar David Ramírez Dimaté

student•

Dejo la tarea de elegir una palabra aleatoria de un vector de palabras.

var palabras = new Array();  
  
palabras[0] = "Tamarindo";  
palabras[1] = "Accesibilidad";  
palabras[2] = "Conexiones";  
palabras[3] = "Desarrollo";  
palabras[4] = "Platzi";  
  
var palabra = palabras[Math.floor((Math.random() * 5) + 0)];

Saludos.

José Antonio Rueda Gutiérrez

student•

Para que se quede el cursor en la caja con la funcion focus()

function agregarLetra()
{
var letra = l.value;
//Para que se borre el texto una vez dado al botón
l.value= " ";
//Deja el cursor en la caja cada vez que introduces una palabra
l.focus();
//Permítenos mostrar as letras correctas introducidas
mostrarPalabra(palabra, hombre, letra);

}

Cristopher Dávila

student•

Aquí está mi tarea del ahorcado:

Link del Juego: ahorcadoplatzi.webcindario.com

Código:

Javascript:

// valores de la funcion arc:  
// 1º y 2º valor = centro del círculo  
// 3º valor = radio del círculo  
// 4º y 5º valor = inicio y fin del arco  
// 6º valor = true: en contra del sentido de las manecillas del reloj ; false: sentido de las manecilas del reloj  
// dibujo.arc(150, 140, 40, 0, Math.PI * 2, false);  
  
var palabras = ["Liga", "Futbol", "Aspirina", "Cris", "Pantufla", "Amoxicilina", "Desoxirribonucleico", "Otorrinolaringologo"];  
var palabra = aleatorio(0,7);  
var hombre, l, espacio, poste, cabeza, torso, brazos, piernas, cara;  
var direccion = ["poste.png", "cabeza.png", "torso.png", "brazos.png", "piernas.png", "cara.png"];  
  
//Declaración de la clase Ahorcado  
var Ahorcado = function (con)  
{  
    //this es las variables locales de la clase, accesibles en toda la clase  
    //this.contexto es el context de dibujo del canvas, que llega por parámetro  
    //desde la variable con  
    this.contexto = con;  
    this.maximo = 5;  
    this.intentos = 0;  
    this.vivo = true;  
    this.dibujar();  
}  
  
Ahorcado.prototype.dibujar = function ()  
{  
    var dibujo = this.contexto;  
  
    //Poste:  
    poste = new Image();  
    poste.src = direccion[0];  
    poste.onload = function ()  
    {  
        dibujo.drawImage(poste, 125, 0);  
    }  
  
    if(this.intentos > 0)  
    {  
        //intentos = 1 --> cabeza  
        cabeza = new Image();  
        cabeza.src = direccion[1];  
        cabeza.onload = function ()  
        {  
            dibujo.drawImage(cabeza, 125, 0);  
        }  
  
        if(this.intentos > 1)  
        {  
            //intentos = 2 --> torso  
            torso = new Image();  
            torso.src = direccion[2];  
            torso.onload = function ()  
            {  
                dibujo.drawImage(torso, 125, 0);  
            }  
  
            if(this.intentos > 2)  
            {  
                //intentos = 3 --> brazos  
                brazos = new Image();  
                brazos.src = direccion[3];  
                brazos.onload = function ()  
                {  
                    dibujo.drawImage(brazos, 125, 0);  
                }  
  
                if(this.intentos > 3)  
                {  
                    //intentos = 4 --> piernas  
                    piernas = new Image();  
                    piernas.src = direccion[4];  
                    piernas.onload = function ()  
                    {  
                        dibujo.drawImage(piernas, 125, 0);  
                    }  
  
                    if(this.intentos > 4)  
                    {  
                        //intentos = 5 --> cara  
                        cara = new Image();  
                        cara.src = direccion[5];  
                        cara.onload = function ()  
                        {  
                            dibujo.drawImage(cara, 125, 0);  
                        }  
                    }  
                }  
            }  
        }  
    }  
}  
  
Ahorcado.prototype.trazar = function ()  
{  
    this.intentos++;  
    if (this.intentos >= this.maximo)  
    {  
        this.vivo = false;  
        alert("Perdiste! Vuelve a intentarlo");  
    }  
    this.dibujar();  
}  
  
function iniciar()  
{  
    l = document.getElementById("letra");  
    var b = document.getElementById("boton");  
    var canvas = document.getElementById("c");  
    canvas.width = 500;  
    canvas.height = 400;  
    var contexto = canvas.getContext("2d");  
    hombre = new Ahorcado(contexto);  
    l.focus();  
  
    //Convierte a mayúsculas un texto  
    palabras[palabra] = palabras[palabra].toUpperCase();  
  
    //Declaro un array con n espacios de acuerdo al largp palabra  
    espacio = new Array(palabras[palabra].length);  
  
    //Agregamos una función que se dispare al dar click al boton  
    b.addEventListener("click", agregarLetra);  
  
    mostrarPista(espacio);  
}  
  
function aleatorio(minimo, maximo)  
{  
    var numero = Math.floor(Math.random() * (maximo - minimo + 1) + minimo);  
    return numero;  
}  
  
function agregarLetra()  
{  
    var escogidas = document.getElementById("escogidas");  
    var letra = l.value;  
    l.value = "";  
    l.focus();  
    if(letra.length == 1)  
    {  
    escogidas.innerText += letra.toUpperCase() + "\n";  
    mostrarPalabra(palabras[palabra], hombre, letra);  
    }  
}  
  
function mostrarPalabra(palabra, ahorcado, letra)  
{  
    var encontrado = false;  
    var p;  
    letra = letra.toUpperCase();  
    for(p in palabra)  
    {  
        if(letra == palabra[p])  
        {  
            espacio[p] = letra;  
            encontrado = true;  
        }  
    }  
    mostrarPista(espacio);  
  
    //Si NO lo encontré  
    if(!encontrado)  
    {  
        ahorcado.trazar();  
    }  
  
    if(!ahorcado.vivo)  
    {  
        mostrarPista(palabra);  
    }  
}  
  
function mostrarPista(espacio)  
{  
    var pista = document.getElementById("pista");  
    var texto = "";  
    var i;  
    var largo = espacio.length;  
  
    for(i = 0; i < largo; i++)  
    {  
        if(espacio[i] != undefined)  
        {  
            texto += espacio[i] + " ";  
        }  
        else  
        {  
            texto += "_ ";  
        }  
    }  
    pista.innerText = texto;  
}

Html:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>Ahorcado</title>  
    <style type="text/css">  
    body  
    {  
        background: black;  
        color: white;  
        text-align: center;  
    }  
    </style>  
    <script type="text/javascript" src="ahorcado.js">  
    //Clase: Objeto maestro, del que se derivan otros objetos.  
    //Clase: Definición del objeto  
    </script>  
</head>  
<body>  
    <h1>Adivina letra a letra</h1>  
    <p>  
        Elige una letra:  
        <input type="text" id="letra" onkeydown="if (event.keyCode == 13) document.getElementById('boton').click()"/>  
        <input type="button" id="boton" value="Boom!!" />  
    </p>  
    <h2 id="pista">_ _ _ _ _ _ _ _ _ _ _</h2>  
    <canvas id="c" style="float:left"></canvas>  
    <h4>Letras Escogidas:</h4>  
    <p id="escogidas"></p>  
    <script type="text/javascript">  
    iniciar();  
    </script>  
</body>  
</html>

Anyelina Moreno Robledo

student•

Aquí dejo mi juego del ahorcado, le añadí para no se le pueden insertar dos caracteres a la vez, no acepta números ni signos .
También se encuentra la tarea:

El array aleatorio.
Muestra la palabra al morir.
Introduje el focus , y la caja se limpia cada vez que se introduce una letra.

http://anxhe.bitbucket.org/

var palabra = ["chimenea", "escalera", "roto", "abecedario", "acido", "tamarindo" ];  
var hombre, espacio, dibujo;  
var numero = Math.floor(Math.random() * (palabra.length - 1) + 1);  
var palabraAdivinar = palabra[numero];  
palabraAdivinar = palabraAdivinar.toUpperCase();  
  
var dibujar = {};  
  
// Declaracion de la clase ahorcado  
  
var Ahorcado = function(con){  
  //this son las variables locales de las clase, accesibles en toda la clase  
  //this.contexto es el context de dibujo del canvas que llega por parametro  
  //desde la variable con  
  this.contexto = con;  
  this.maximo = 6; // numero de intentos  
  this.intentos = 0; // inicia por el intento 0  
  this.vivo = true;  
  this.dibujar();  
}  
  
Ahorcado.prototype.dibujar = function(){  
  dibujo = this.contexto;  
  
  dibujar.poste = new Image();  
  dibujar.poste.src = "img/ahorcado1.png";  
  dibujar.poste.onload = dibujoPoste;  
  function dibujoPoste(){  
    dibujo.drawImage(dibujar.poste, 0 , 80);  
  }  
  
  //dibujo cabeza  
  if(this.intentos > 0){  
    // intentos = 1 --> rostro  
    dibujar.cabeza = new Image();  
    dibujar.cabeza.src = "img/ahorcado2.png";  
    dibujar.cabeza.onload = dibujoCabeza;  
    function dibujoCabeza(){  
      dibujo.drawImage(dibujar.cabeza, 0, 80);  
  }  
  
    //dibujo tronco  
    if(this.intentos > 1){  
      dibujar.tronco = new Image();  
      dibujar.tronco.src = "img/ahorcado3.png";  
      dibujar.tronco.onload = dibujoTronco;  
      function dibujoTronco(){  
        dibujo.drawImage(dibujar.tronco, 0, 80);  
      }  
      //dibujo brazoDerecho  
      if(this.intentos > 2){  
        dibujar.brazoDerecho = new Image();  
        dibujar.brazoDerecho.src = "img/ahorcado4.png";  
        dibujar.brazoDerecho.onload = dibujoBrazoDerecho;  
        function dibujoBrazoDerecho(){  
          dibujo.drawImage(dibujar.brazoDerecho, 0, 80);  
        }  
        // dibujo brazoIzquierdo  
        if(this.intentos > 3){  
          dibujar.brazoIzquierdo = new Image();  
          dibujar.brazoIzquierdo.src = "img/ahorcado5.png";  
          dibujar.brazoIzquierdo.onload = dibujoBrazoIzquierdo;  
          function dibujoBrazoIzquierdo(){  
            dibujo.drawImage(dibujar.brazoIzquierdo, 0, 80);  
          }  
          // dibujo piernaDerecha  
          if(this.intentos > 4){  
            dibujar.piernaDerecha = new Image();  
            dibujar.piernaDerecha.src = "img/ahorcado6.png";  
            dibujar.piernaDerecha.onload = dibujoPiernaDerecha;  
            function dibujoPiernaDerecha(){  
              dibujo.drawImage(dibujar.piernaDerecha, 0, 80);  
            }  
            //piernaIzquierda  
            if(this.intentos > 5){  
              dibujar.piernaIzquierda = new Image();  
              dibujar.piernaIzquierda.src = "img/ahorcado7.png";  
              dibujar.piernaIzquierda.onload = dibujoPiernaIzquierda;  
              function dibujoPiernaIzquierda(){  
                dibujo.drawImage(dibujar.piernaIzquierda, 0, 80);  
                dibujo.font = "bold 22px sans-serif"  
                dibujo.fillText("ESTAS MUERTO !!! :( ", 40, 350);  
              }  
            }  
          }  
        }  
      }  
    }  
  }  
}  
  
Ahorcado.prototype.trazar = function(){  
  this.intentos++;  
  if(this.intentos >= this.maximo){  
    this.vivo = false;  
  
  }  
  this.dibujar();  
}  
  
function iniciar(){  
  
  var canvas = document.getElementById("canvas");  
  canvas.width = 500;  
  canvas.height = 400;  
  var contexto = canvas.getContext("2d");  
  hombre = new Ahorcado(contexto);//cada vez que se invoca la funcion iniciar  
  var l = document.getElementById("letra");  
  var b = document.getElementById("boton");  
  espacio = new Array (palabraAdivinar.length);  
  boton.addEventListener("click", function(){  
    agregarletra(l);  
  });  
  mostrarPista();  
}  
  
function agregarletra(letra){  
  letra = l.value;  
  l.value = "";  
  l.focus();  
  letra = letra.toUpperCase();  
  
  if(letra.length > 1 || !isNaN(letra) || !letra.match(/[A-Z]/)) {  
    alert("Inserta una letra, por favor");  
  }  
  else {  
    mostrarPalabra(letra);  
  }  
}  
  
function mostrarPalabra(letra){  
  
  var encontrado = false;  
  var i;  
  
  for(i in palabraAdivinar){  
    if (letra == palabraAdivinar[i]){  
      espacio[i] = letra;  
      encontrado = true;  
    }  
  }  
  mostrarPista();  
  
  if(!encontrado){  
    hombre.trazar();  
  }  
  if(!hombre.vivo){  
    pista.innerText = palabraAdivinar  
  }  
}  
  
function mostrarPista(){  
  var pista = document.getElementById("pista");  
  
  var texto = "";  
  for (var i = 0; i < espacio.length; i++){  
    if(espacio[i] != undefined){  
        texto += espacio[i] + " ";  
    }  
    else{  
       texto += "_ "  
    }  
    pista.innerText = texto;  
  }  
  var ganastes = pista.innerHTML.replace(/\s+/g, '');  
  if(ganastes == palabraAdivinar){  
    dibujo.font = "bold 22px sans-serif"  
    dibujo.fillText("GANASTES !!! :) :) ", 40, 350);  
  }  
}

Santiago Avellaneda

student•

Quedó muy divertido jajaja, se puede mejorar reemplazando el Alert por un texto en la parte inferior o superior comentando que se debe incrustar una letra, muy creativo el aporte

Cesar Garzon

student•

Hola compañeritos dejo aquí mi trabajo con las dos tareas principales adicional a esto les cuento que tube que mirar 3 veces el vídeo para entenderlo.
gracias a estas personas que lo gravaron :D

prototype.py

var palabra = "helados";   
//var palabras =new Array ("helado","huevo", "helado","holas");  
var hombre, l, espacio;  
var fondo ={  
    imagenOK: true  
  
};  
var Ahorcado = function (con) {  
    this.contexto = con;  
    this.maximo = 7;  
    this.intentos =0;  
    this.vivo = true;  
    this.dibujar();  
}  
Ahorcado.prototype.dibujar = function (){   
    var dibujo = this.contexto;  
    if (dibujo = this.contexto) {  
    fondo.postes =  new Image();  
    fondo.postes.src = "poste.png";  
    fondo.postes.onload = function()  
    {  
        dibujo.drawImage(fondo.postes, 300, 0);  
    };  
    // dibujo.drawImage(fondo.imagen, 0, 0);  
    /*/      
    dibujo.beginPath();  
    dibujo.moveTo(150,100);  
    dibujo.lineTo(150,50);  
    dibujo.lineTo(400,50);  
    dibujo.lineTo(400,350);  
    dibujo.lineWidth = 15;  
    dibujo.strokeStyle ="#000000"  
    dibujo.stroke();          
    dibujo.closePath();    /*/  
if(this.intentos > 1)   
        {      
    fondo.imagen =  new Image();  
    fondo.imagen.src = "cabeza.png";  
    fondo.imagen.onload = function()  
    {  
        dibujo.drawImage(fondo.imagen, 45, 0);  
    }  
// intento 1  
    if(this.intentos > 2)   
        {      
    fondo.tro =  new Image();  
    fondo.tro.src = "tronco.png";  
    fondo.tro.onload = function()  
    {  
        dibujo.drawImage(fondo.tro, 90, 180);  
    }  
            /*/dibujo.beginPath();  
            dibujo.arc(150, 140, 40, 0, Math.PI*2, false);  
            dibujo.strokeStyle = "red";  
            dibujo.lineWidth = 5;  
            dibujo.stroke();      
            dibujo.closePath();/*/  
// intento 2  
            if(this.intentos > 3)  
            {  
                fondo.der =  new Image();  
                fondo.der.src = "der.png";  
                fondo.der.onload = function()  
                    {  
                        dibujo.drawImage(fondo.der, 200, 177);                          
                    }  
                    if(this.intentos > 4)  
                    {  
                            fondo.izq =  new Image();  
                            fondo.izq.src ="iz.png";  
                            fondo.izq.onload = function()  
                        {  
                            dibujo.drawImage(fondo.izq, 35, 180);                              
                        }                  
                /*/dibujo.beginPath();  
                dibujo.moveTo(150,180);  
                dibujo.lineTo(150,250);  
                dibujo.strokeStyle ="red"  
                dibujo.lineWidth = 5;                  
                dibujo.stroke();          
                dibujo.closePath();    /*/  
                // intento 3  
                        if (this.intentos > 5)  
                        {  
                            fondo.pies =  new Image();  
                            fondo.pies.src ="piernas.png";  
                            fondo.pies.onload = function()  
                        {  
                            dibujo.drawImage(fondo.pies, 90, 236);  
                        }  
                            /*/dibujo.beginPath();  
                            dibujo.moveTo(150,250);  
                            dibujo.lineTo(130,320);  
                            dibujo.moveTo(150,250);  
                            dibujo.lineTo(180,320);  
                            dibujo.strokeStyle ="red"  
                            dibujo.lineWidth = 5;                  
                            dibujo.stroke();          
                            dibujo.closePath();/*/  
                            // intento 4  
                            if (this.intentos > 6)  
                            {   
                                fondo.pierdes =  new Image();  
                                fondo.pierdes.src ="cuerpo.png";  
                                fondo.pierdes.onload = function()  
                                {  
                                    dibujo.drawImage(fondo.pierdes, 0, 250);  
                                }  
                                    /*/dibujo.beginPath();  
                                dibujo.moveTo(150,180);  
                                dibujo.lineTo(130,230);  
                                dibujo.moveTo(150,180);  
                                dibujo.lineTo(170,230);  
                                dibujo.strokeStyle = "red"  
                                dibujo.lineWidth = 5;                  
                                dibujo.stroke();          
                                dibujo.closePath();/*/  
                                // intento 5  
                                     // ojo izquierdo  
                                     /*/dibujo.beginPath();  
                                    dibujo.moveTo(125,120);  
                                    dibujo.lineTo(145,145);  
                                    dibujo.moveTo(145,120);  
                                    dibujo.lineTo(125,145);  
  
                                    // ojo derecho  
                                    dibujo.moveTo(155,120);  
                                    dibujo.lineTo(175,145);  
                                    dibujo.moveTo(175,120);  
                                    dibujo.lineTo(155,145);  
                                    dibujo.strokeStyle ="blue"  
                                    dibujo.lineWidth = 5;                  
                                    dibujo.stroke();          
                                    dibujo.closePath();/*/  
}}}}}}}}  
Ahorcado.prototype.trazar = function () {  
    this.intentos++;  
    if(this.intentos >= this.maximo)  
    {  
        this.vivo = false;  
        alert("acavas de morir XX :(")  
    }  
    this.dibujar();  
}  
function inicio ()  
{    //palabra = palabra[Math.floor(Math.random()*4)];  
    L =document.getElementById("letra");  
    var B =document.getElementById("boton");  
    var canvas = document.getElementById("c");  
    canvas.width = 700;  
    canvas.height = 850;  
    var contexto = canvas.getContext("2d");  
    hombre = new Ahorcado(contexto);  
    palabra = palabra.toUpperCase();  
    //alert(palabra.length);  
    // Agega,ps im arrat   
    espacio = new Array(palabra.length);  
    B.addEventListener("click", agregaralerta);  
    //espacio [1] = "h";  
    mostrarPista(espacio);  
    //palabra = palabra.toUpperCase();  
    //print(palabra);  
    //alert(palabra);      
}  
function agregaralerta() {  
    var letra = L.value;  
//    hombre.trazar();  
    mostrarpalabra(palabra,hombre, letra);  
}  
function mostrarpalabra(palabra, ahorcado, letra)  
{  
    var econtrado = false;  
    var p;   
    letra = letra.toUpperCase();  
    for (p in palabra)  
          {  
              if (letra == palabra[p])  
                  {  
                      espacio[p] = letra;  
                      econtrado = true;  
                  }  
          }  
          mostrarPista(espacio);  
  
          if(!econtrado)  
          {  
              ahorcado.trazar();  
          }  
          if (!ahorcado.vivo)  
                  {  
              alert("la palabra era " + palabra)  
              mostrarPista(espacio);  
            }   
}  
function mostrarPista(espacio)  
{  
    var pista = document.getElementById("pista");  
    var texto = "";  
    var i;  
    var largo = espacio.length;  
  
    for ( i = 0; i<largo; i++)   
    {  
        if (espacio[i] != undefined)  
        {  
            texto = texto + espacio[i] + " ";      
        }  
        else   
        {  
            texto += "_ ";      
            //alert("el texto de espacio es " + texto);  
        }  
        pista.innerText = texto;  
        if (!hombre.vivo)  
              {  
              texto = palabra;  
            }  
        pista.innerText = texto;          
    }}

objeto.html

<DOCTYPE html>  
<html>  
    <head>  
    <meta charset="utf-8"/>  
    <title>Ahorcado</title>  
    </style>  
    <script type="text/javascript" src = "prototype.js">  
    </script>  
    </head>  
    <body>  
        <h1>Adivina letra a letra</h1>  
        <p>  
            elige una letra:  
            <input type="text" id="letra"/>  
            <input type="button" id="boton" value="boom"/>  
        </p>  
        <h2 id="pista">_ _</h2>  
        <canvas id="c"></canvas>  
          
        <script type="text/javascript">      
        inicio();  
  
        </script>  
    </body>  
</html>

Santidad

student•

Hello esta es mi tarea!

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ahorcado</title> <script type="text/javascript" src="ahorcado.js"></script> </head> <body> <p> Elige una letra: <input type="text" id="letra" /> <input type="button" id="boton" value="Boom!!"> </p> <h2 id="pista"> - - - - - - </h2> <canvas id="Dios es amor"></canvas> <script type="text/javascript"> iniciar(); </script> </body> </html> JS

Diana Mora

student•

var palabras = ["Sushi","Pizza","Pasta", "Hamburger"];  
var aleatorio = [Math.floor(Math.random() * palabras.length)];  
var palabra = palabras [aleatorio];  
var hombre, l, espacio;  
var Ahorcado = function(con){  
    this.contexto = con;  
    this.maximo = 5;  
    this.intentos = 0;  
    this.vivo = true;  
    this.dibujar();  
}  
Ahorcado.prototype.dibujar = function(){  
    var dibujo = this.contexto;  
      
    dibujo.beginPath();  
    dibujo.moveTo(150,100);  
    dibujo.lineTo(150,50);  
    dibujo.lineTo(400,50);  
    dibujo.lineTo(400,350);  
    dibujo.lineWidth = 15;  
    dibujo.strokeStyle = "#000";  
    dibujo.stroke();  
    dibujo.closePath();  
    if(this.intentos > 1){  
        //intentos = 1 --> rostro  
        dibujo.beginPath();  
        dibujo.arc(150, 140, 40, 0, Math.PI*2, false);  
        dibujo.strokeStyle = "#F00";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
    }  
    if(this.intentos > 2){  
        //intentos = 2 --> tronco  
        dibujo.beginPath();  
        dibujo.moveTo(150,180);  
        dibujo.lineTo(150,250);  
        dibujo.strokeStyle = "#F00";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
    }  
    if(this.intentos > 3){  
        //intentos = 3 --> brazos  
        dibujo.beginPath();  
        dibujo.moveTo(120,220);  
        dibujo.lineTo(150,180);  
        dibujo.lineTo(180,220);  
        dibujo.strokeStyle = "#F00";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
    }  
    if(this.intentos > 4){  
        //intentos = 4 --> piernas  
        dibujo.beginPath();  
        dibujo.moveTo(120,290);  
        dibujo.lineTo(150,250);  
        dibujo.lineTo(180,290);  
        dibujo.strokeStyle = "#F00";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
    }  
    if(this.intentos > 5){  
        //intentos = 5 --> ojos muertos  
        dibujo.beginPath();  
        dibujo.moveTo(125,120);  
        dibujo.lineTo(145,145);  
        dibujo.moveTo(145,120);  
        dibujo.lineTo(125,145);          
        dibujo.strokeStyle = "blue";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
        dibujo.beginPath();  
        dibujo.moveTo(155,120);  
        dibujo.lineTo(175,145);  
        dibujo.moveTo(175,120);  
        dibujo.lineTo(155,145);          
        dibujo.strokeStyle = "blue";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
    }  
}  
Ahorcado.prototype.trazar = function (){  
    this.intentos ++;  
    if(this.intentos >= this.maximo){  
        this.vivo = false;  
    }  
    this.dibujar();  
}  
function iniciar(){  
    l = document.getElementById("letra");  
    var b = document.getElementById("boton");  
    var canvas = document.getElementById("c");  
    canvas.width = 500;  
    canvas.height = 400;  
    var contexto = canvas.getContext("2d");      
    hombre = new Ahorcado(contexto);  
    palabra = palabra.toUpperCase();  
    espacio = new Array(palabra.length);  
    agregarLetra();  
    b.addEventListener("click", agregarLetra);  
      
}  
function agregarLetra(){  
    var letra = l.value;  
    l.value = "";  
    l.focus();  
    mostrarPalabra(palabra,hombre,letra);  
}  
function mostrarPalabra (palabra, ahorcado, letra){  
    var encontrado = false;  
    var p;  
    letra = letra.toUpperCase();  
    for (p in palabra)  
    {  
        if(letra == palabra[p])  
        {      
            espacio[p] = letra;  
            encontrado = true;  
        }  
          
    }  
    mostrarPista(espacio);  
    if(!encontrado){  
        ahorcado.trazar();  
    }  
    if(!ahorcado.vivo){  
         pista.innerText = palabra;  
    }  
}  
function mostrarPista(espacio){  
    var pista = document.getElementById("pista");  
    var texto = "";  
    var i;  
    var largo = espacio.length;  
    for (i=0; i<largo; i++)  
    {  
        if(espacio[i] != undefined)  
        {  
            texto = texto + espacio[i] + " ";  
        }  
        else{  
            texto += "_ ";  
          
        }  
    }  
    pista.innerText = texto;  
}

Karenn Yeraldin Hernández Duarte

student•

Para mostrar la palabra completa cuando se pierde:
...
if(!ahorcado.vivo){
perder(palabra);
}
}

function perder(palabra){
var p;
for(p in palabra)
{
espacio[p] = palabra[p];
}
mostrarPista(espacio);
}

Cesar David Ramírez Dimaté

student•

No es necesario crear una nueva función, sólo es enviar como parámetro la palabra en el método mostrarPista ya que él hace todo el recorrido y lo muestra.

if(!encontrado)  
    ahorcado.trazar();  
if(!ahorcado.vivo)  
    mostrarPista(palabra);

Alex Pacheco

company_admin•

Para mostrar la palabra completa cuando pierdes, usas la misma función "mostarPista" pero le pasas la palabra original.

function mostrarPalabra(word, ahorcado, letter)  
{  
    //word -> es la palabra ogiginal  
    //ahorcado -> es la instancia de la clase Ahorcado  
    //letter -> es la letra que escogio el usuario  
    var encontrado = false;  
    for(var p in word)  
    {  
        if(letter == word[p])  
        {  
            palabraVacia[p] = letter;  
            encontrado = true;  
        }  
    }  
    mostrarPista(palabraVacia);  
  
    if(!encontrado)  
    {  
        ahorcado.trazar();  
    }  
  
    if(!ahorcado.vivo)  
    {  
        mostrarPista(word);  
    }  
  
}

Jaimito Beniamin

student•

Hola este es mi código de HTML.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>Ahorcado</title>  
    <script type="text/javascript" src="ahorcado.js"></script>  
</head>  
<body>  
     <p>  
        Elige una letra:  
        <input type="text" id="letra" />  
        <input type="button" id="boton" value="Boom!!" />  
     </p>  
     <h2 id="pista">_ _ _ </h2>  
      <canvas id="ectopollo"></canvas>  
     <script type="text/javascript">  
     iniciar();  
     </script>  
</body>  
</html>  
  
                            //////////////////JS//////////////////////////////////  
  
  
//Elijan de un array de palabras aleatorio  
var palabras = ["Justicia","Jose","Gregorio","Juan","Jahimito"];  
var aleatorio = [Math.floor(Math.random() * palabras.length)];  
var palabra = palabras[aleatorio];  
var hombre, l, espacio;  
//Declaración de la clase Ahorcado  
var Ahorcado = function (con)  
{  
    this.contexto = con;  
    this.maximo = 5;  
    this.intentos = 0;  
    this.vivo = true;  
    this.dibujar();  
}  
Ahorcado.prototype.dibujar = function ()   
{  
    var dibujo = this.contexto;  
    //Dibujo el poste  
    dibujo.beginPath();  
    dibujo.moveTo(150,100);  
    dibujo.lineTo(150,50);  
    dibujo.lineTo(400,50);  
    dibujo.lineTo(400,350);  
    dibujo.lineWidth = 15;  
    dibujo.strokeStyle = "#000000";  
    dibujo.stroke();  
    dibujo.closePath();  
    if(this.intentos > 0)  
    {  
        //intentos = 1 --> rostro  
        dibujo.beginPath();  
        dibujo.arc(150, 140, 40, 0, Math.PI * 2, false);  
        dibujo.strokeStyle = "red";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
        if(this.intentos > 1)  
        {  
            // intentos = 2 --> torso  
            dibujo.beginPath();  
            dibujo.moveTo(150,180);  
            dibujo.lineTo(150,250);  
            dibujo.strokeStyle = "red";  
            dibujo.lineWidth = 5;  
            dibujo.stroke();  
            dibujo.closePath();  
            if(this.intentos > 2)  
            {  
                // intentos = 3 --> brazos  
                dibujo.beginPath();  
                dibujo.moveTo(120,220);  
                dibujo.lineTo(150,180);  
                dibujo.lineTo(180,220);  
                dibujo.strokeStyle = "red";  
                dibujo.lineWidth = 5;  
                dibujo.stroke();  
                dibujo.closePath();  
                if(this.intentos > 3)  
                {  
                    // intentos = 4 --> piernas  
                    dibujo.beginPath();  
                    dibujo.moveTo(120,290);  
                    dibujo.lineTo(150,250);  
                    dibujo.lineTo(180,290);  
                    dibujo.strokeStyle = "red";  
                    dibujo.lineWidth = 5;  
                    dibujo.stroke();  
                    dibujo.closePath();  
                    if(this.intentos > 4)  
                    {  
                        // intentos = 5 --> ojos muertos  
                        dibujo.beginPath();  
                        //Ojo izquierdo  
                        dibujo.moveTo(125,120);  
                        dibujo.lineTo(145,145);  
                        dibujo.moveTo(145,120);  
                        dibujo.lineTo(125,145);  
                        //Ojo derecho  
                        dibujo.moveTo(155,120);  
                        dibujo.lineTo(175,145);  
                        dibujo.moveTo(175,120);  
                        dibujo.lineTo(155,145);  
                        dibujo.strokeStyle = "blue";  
                        dibujo.lineWidth = 5;  
                        dibujo.stroke();  
                        dibujo.closePath();  
                    }  
                }  
            }  
        }  
    }  
}  
Ahorcado.prototype.trazar = function ()  
{  
    this.intentos++;  
    if(this.intentos >= this.maximo)  
    {  
        this.vivo = false;  
        alert("Estás muerto!!");  
    }  
    this.dibujar();  
}  
function iniciar ()  
{  
    l = document.getElementById("letra");  
    var b = document.getElementById("boton");  
    var inaho = document.getElementById("ectopollo");  
    inaho.width = 500;  
    inaho.height = 400;  
    var contexto = inaho.getContext("2d");  
    hombre = new Ahorcado(contexto);  
    //Convierte a mayúscula un texto  
    palabra = palabra.toUpperCase();  
    //Declaro un Array con n espacios de acuerdo al largo de la palabra  
    espacio = new Array(palabra.length);  
    //Agregamos una funcion que se dispare al dar click al botón  
    b.addEventListener("click", agregarLetra);  
    //espacio[1] = "O";  
    //espacio[3] = "N";  
    mostrarPista(espacio);  
}   
function agregarLetra()  
{  
    var letra = l.value;  
    l.value = "";  
    mostrarPalabra(palabra, hombre, letra);  
}  
function mostrarPalabra(palabra, ahorcado, letra)  
{  
    var encontrado = false;  
    var p;  
    letra = letra.toUpperCase();  
    for(p in palabra)  
    {  
        if(letra == palabra[p])  
        {  
            espacio[p] = letra;  
            encontrado = true;  
        }  
    }  
    mostrarPista(espacio);  
    //Si No lo encontré  
    if(!encontrado)  
    {  
        ahorcado.trazar();  
    }  
    if(!ahorcado.vivo)  
    {  
        alert(palabra);  
    }  
}  
function mostrarPista(espacio)  
{  
    var pista = document.getElementById("pista");  
    var texto = "";  
    var i;  
    var largo = espacio.length;  
    for (i = 0; i<largo; i++)  
    {  
        if(espacio[i] != undefined)  
        {  
            texto = texto + espacio[i] + " ";  
        }  
        else  
        {  
            texto += "_ ";  
        }  
    }  
    pista.innerText = texto;  
}

David Rangel

student•

Esta es la explicación que manda la documentación:

Los segmentos de captura general (Catch-all Segments) pueden hacerse opcionales al incluir el parámetro entre corchetes dobles: [[...nombreDeCarpeta]].

Por ejemplo, las páginas/tienda/[[...slug]].js también coincidirán con /tienda, además de /tienda/ropa, /tienda/ropa/sudaderas, /tienda/ropa/tops/camisetas.

Tomando en cuenta el ejemplo de la clase:

[[...productId]].js

const { query: { productId }, } useRouter();

return <div> Nombre de la ruta: { productId } </div>

Y puedes escribir en tu navegador

/product/loquesea/a/b/c/d/etc o /product/loquesea/a

incluso

/product/

Por que los [slugs], no son obligatorios.

Aldo Juarez Virgen

student•

Aquí está mi juego del ahorcado, que muestra la palabra al perder y que al ganar no deja seguir jugando :B

var palabras = ["Alexandra", "Amor", "Guitarra", "Darkho"];
var hombre, espacio, l, numeroA, palabra;

function numeroAleatorio (minimo, maximo)
{
		var numero = Math.floor( Math.random() * (maximo - minimo + 1) + minimo );
	    return numero;
}

var Ahorcado = function (con)
{
	this.contexto = con;
	this.intentosMax = 5;
	this.intentos = 0;
	this.vivo = true;
	this.completado = false;

	this.dibujar();
}

Ahorcado.prototype.dibujar = function ()
{
	var dibujo = this.contexto;

	dibujo.beginPath();
	dibujo.moveTo(150,100);
	dibujo.lineTo(150,50);
	dibujo.lineTo(400,50);
	dibujo.lineTo(400,350);
	dibujo.lineWidth = 15;
	dibujo.strokeStyle = "#000";
	dibujo.stroke();
	dibujo.closePath();

	if(this.intentos > 0)
	{

		dibujo.beginPath();
		dibujo.arc(150,140, 40, 0, Math.PI * 2, false);
		dibujo.strokeStyle = "red";
		dibujo.lineWidth = 5;
		dibujo.stroke();
		dibujo.closePath();

		if(this.intentos > 1)
		{
			dibujo.beginPath();
        	dibujo.moveTo(150,180);
        	dibujo.lineTo(150,250);
        	dibujo.lineWidth = 5;
	        dibujo.strokeStyle = "#FF";
        	dibujo.stroke();
         	dibujo.closePath();
			
			if(this.intentos > 2)
			{
				dibujo.beginPath();
        	    dibujo.moveTo(120,210);
        	    dibujo.lineTo(150,181);
        	    dibujo.lineTo(180,210);
        	    dibujo.lineWidth = 5;
	            dibujo.strokeStyle = "#FF";
        	    dibujo.stroke();
         	    dibujo.closePath();
				
	         	if(this.intentos > 3)
	            	{
	            		dibujo.beginPath();
                 	    dibujo.moveTo(120,280);
                 	    dibujo.lineTo(150,250);
                	    dibujo.lineTo(180,280);
                 	    dibujo.lineWidth = 5;
	                    dibujo.strokeStyle = "#FF";
                	    dibujo.stroke();
                	    dibujo.closePath();
		                if(this.intentos > 4)
		                    {
		                    	dibujo.beginPath();
                        	    dibujo.moveTo(120,140);
                        	    dibujo.lineTo(140,120);
                        	    dibujo.moveTo(120,120);
                        	    dibujo.lineTo(140,140);

                        	    dibujo.moveTo(160,140);
                        	    dibujo.lineTo(180,120);
                        	    dibujo.moveTo(160,120);
                        	    dibujo.lineTo(180,140);

                        	    dibujo.lineWidth = 5;
	                            dibujo.strokeStyle = "#4433FF";
                	            dibujo.stroke();
                         	    dibujo.closePath();
		                    }
		            }
			}
		}
	}
}

Ahorcado.prototype.trazar = function()
{
	this.intentos++;
	if(this.intentos >= this.intentosMax)
	{
		this.vivo = false;
		alert("Moriste viejo");
	}
	this.dibujar();
}

function inicio() 
{
	numeroA = numeroAleatorio(0, 3);
	l = document.getElementById("letras");
	var boton = document.getElementById("botoncito");
	var canvas = document.getElementById("ahorcadiño");
	canvas.width = 500;
	canvas.height = 400;
	var contexto = canvas.getContext("2d");
	hombre = new Ahorcado(contexto);

	palabra = palabras[numeroA].toUpperCase();
	espacio = new Array(palabra.length);

	boton.addEventListener("click", checarLetra);

	mostrarPista(espacio);

}

function mostrarPista(espacio)
{
	var pista = document.getElementById("pista");
	var texto = "";
	var i;
	var c = 0;
	var largo = espacio.length;

	for(i = 0; i<largo; i++)
	{
		if(espacio[i] != undefined)
		{
			texto = texto + espacio[i] + " ";
			c++;
		}
		else
		{
			texto += "_ "; 
		}
		
	}
	if(c == largo)
	{
		hombre.completado = true;
	}
	pista.innerText = texto;
}

function checarLetra(tecla)
{

	var letra = l.value
	letra = letra.toUpperCase();
	l.value = "";
	mostrarPalabra(letra, hombre, palabra);
    
}

function mostrarPalabra(letra, ahorcado, palabra) 
{
	var p;
	var encontrado = false;
	var i;

	if(ahorcado.vivo)
	{
		
	 if(!ahorcado.completado)
	 {  for(p in palabra)
	   {
		 if(letra == palabra[p])
		 {
			espacio[p] = letra;
			encontrado = true;
		 }
	   }
	   mostrarPista(espacio);

	   if(!encontrado)
	   {
		ahorcado.trazar();
	   }

	   if(!ahorcado.vivo)
	   {
		mostrarPista(palabra);
	   }

	 }
    }
}```
y aquí el html que sólo deja ingresar una letra:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Ahorcado jeje</title> <script type="text/javascript" src="ahorcado.js"></script> </head> <body> <h1>Juego del ahorcado, ingresa una letra</h1> <div> <canvas id="ahorcadiño"></canvas> <p> <input type="text" id="letras" maxlength="1"> <input type="button" id="botoncito" value="Checar letra"> <h2 id="pista">_ _ _ </h2> </p> </div>

<script type="text/javascript">
	inicio();
</script>

</body> </html>```

Denis Morales

student•

mi Codigo :)

function aleatorio(minimo, maximo)  
{  
    var numero = Math.floor( Math.random() * (maximo - minimo + 1) + minimo );  
    return numero;  
}  
var opcionesPalabras = ["RICARDO","BARCELONA","TRUJILLO","JAVASCRIPT","POKEMON","TIFIS"];  
var unaPalabra = opcionesPalabras[aleatorio(0,5)];  
var hombre,vBoton,vLetra,vPista;  
  
var Ahorcado = function(con, pal)  
{  
    this.palabra = pal;  
    console.log(pal);  
    console.log(pal.length);  
    this.pista = new Array(pal.length);  
    this.contexto = con;  
    this.maximo = 5;  
    this.intentos = 0;  
    this.vivo = true;  
    this.dibujar();  
}  
  
Ahorcado.prototype.dibujar = function ()  
{  
    var pistaActual = "";  
    var resuelto = 0;  
    var j=0;  
    for(var i = 0; i < this.pista.length;i++)  
    {  
        if(this.pista[i]== undefined)  
        {  
            pistaActual = pistaActual + "_ ";  
            resuelto++;  
        }  
        else  
        {  
            pistaActual = pistaActual + this.pista[i]+" ";  
        }  
    }  
    vPista.innerHTML = pistaActual;  
    var dibujo = this.contexto;  
    //Dibujando el poste  
    dibujo.beginPath();  
    dibujo.moveTo(150,100);  
    dibujo.lineTo(150,50);  
    dibujo.lineTo(400,50);  
    dibujo.lineTo(400,350);  
    dibujo.lineWidth = 15;  
    dibujo.strokeStyle = "peru";  
    dibujo.stroke();  
    dibujo.closePath();  
  
    if(this.intentos > 0)  
    {  
        dibujo.beginPath();  
        dibujo.strokeStyle = "red";  
        dibujo.lineWidth = 5;  
        dibujo.arc(150,120,20,0,Math.PI*2,false);  
        if(this.intentos > 1)  
        {  
            dibujo.moveTo(150,140);  
            dibujo.lineTo(150,190);  
            if(this.intentos > 2)  
            {  
                dibujo.moveTo(120,160);  
                dibujo.lineTo(180,160);  
                if(this.intentos > 3)  
                {  
                    dibujo.moveTo(120,230);  
                    dibujo.lineTo(150,190);  
                    dibujo.lineTo(180,230);  
                    if(this.intentos > 4)  
                    {  
                        dibujo.lineWidth = 2;  
                        dibujo.moveTo(140,120);  
                        dibujo.lineTo(145,110);  
                        dibujo.moveTo(140,110);  
                        dibujo.lineTo(145,120);  
                        dibujo.moveTo(155,120);  
                        dibujo.lineTo(160,110);  
                        dibujo.moveTo(155,110);  
                        dibujo.lineTo(160,120);  
                    }  
                }  
            }  
        }  
        dibujo.stroke();  
        dibujo.closePath();  
    }  
    if(!this.vivo) alert("Perdiste, estas ahorcado!!!...");  
    if(resuelto == 0) alert("Ganaste!!!...");  
  
}  
  
Ahorcado.prototype.jugarLetra = function(letraBuscada)  
{  
    var encontrado = false;  
    var i=0;  
  
    for(i in this.palabra)  
    {  
        if(this.palabra[i] == letraBuscada)  
        {  
            encontrado = true;  
            this.pista[i] = letraBuscada;  
        }  
    }  
    if(!encontrado) this.intentos++;  
    if(this.intentos == this.maximo) this.vivo = false;  
    this.dibujar();  
}  
  
function iniciar()  
{  
    var canvas = document.getElementById("c");  
    var contexto = canvas.getContext("2d");  
    vboton = document.getElementById("boton");  
    vLetra = document.getElementById("letra");  
    vPista = document.getElementById("pista");  
    hombre = new Ahorcado(contexto,unaPalabra);  
    hombre.dibujar();  
    boton.addEventListener("click",probarLetra);  
}  
function probarLetra(){  
    var unaLetra = vLetra.value;  
    vLetra.value = "";  
    unaLetra = unaLetra.toUpperCase();  
    if(unaLetra == "") alert("debes escribir una letra");  
    else hombre.jugarLetra(unaLetra);  
}

Eduardo Lemus Zavala

student•

l.value -> obtiene el valor de una caja de texto.

Jhon Carlos Colorado Angulo

student•

Muy bueno el juego. Ahora hacer la tarea que deja freddy.

José Antonio Rueda Gutiérrez

student•

if(!hombre.vivo)  
    {  
        //Según está mostrarPista con pasarle la palabra ya bastaría  
        mostrarPista(palabra);  
    }  
}

Diego Aguilar

student•

Si yo tomara el valor de un input con .value como convierto de string a number, osea que no sea una alabra sino un numero?

Cesar David Ramírez Dimaté

student•

Para convertir un string a un número entero sería:

numero = parseInt(texto);

Las Historias Abuelo

student•

Buenas a todos un saludo espero les guste mi código en realidad lo hice de otra manera ya que esta 100 % creado por mi, cualquier duda o recomendación no duden en hacerla ;)
JAVASCRIPT

var hombre,doc;  
var correcto=true,incial=true;  
var palabras=["Actualizacionesautomaticas","xolaje","otracosa","perro","milpalabras","CAMINAR","ALELUYA"];  
var palabra;  
var textoAdivinado="";  
  
  
var  Ahorcado = function (con){  
    this.contexto = con;  
    this.intentos = 0;  
    this.maximo= 5;   
    this.vivo=true;  
    this.dibujar();  
}  
  
Ahorcado.prototype.dibujar = function (){  
    var trazo = this.contexto;  
    var ancho=10;  
    //TRAZO DE EL POSTE  
    trazo.beginPath();  
    trazo.moveTo(50,500);  
    trazo.lineTo(50,50);  
    trazo.lineTo(400,50);  
    trazo.lineTo(400,100);  
    trazo.lineWidth=ancho;  
    trazo.strokeStyle="#000000";  
    trazo.stroke();  
    trazo.closePath();  
        //TRAZO DE LA CABEZA  
        if(this.intentos>0){  
            trazo.beginPath();  
            trazo.arc(400,150,50,0,Math.PI*2,false);  
            trazo.lineWidth=ancho;  
            trazo.strokeStyle="#000";  
            trazo.stroke();  
            trazo.closePath();  
            //TRAZO DEL TORSO  
            if(this.intentos>1){  
                trazo.beginPath();  
                trazo.moveTo(400,200);  
                trazo.lineTo(400,300);  
                trazo.lineWidth=ancho;  
                trazo.strokeStyle="#000";  
                trazo.stroke();  
                trazo.closePath();  
                //TRAZO DE BRAZOS  
                if(this.intentos>2){  
  
                    trazo.beginPath();  
                    trazo.moveTo(340,260);  
                    trazo.lineTo(400,210);  
                    trazo.lineTo(460,260);  
                    trazo.lineWidth=ancho;  
                    trazo.strokeStyle="#000";  
                    trazo.stroke();  
                    trazo.closePath();  
                    //TRAZO DE PIERNAS  
                    if(this.intentos>3){  
                        trazo.beginPath();  
                        trazo.moveTo(340,350);  
                        trazo.lineTo(400,300);  
                        trazo.lineTo(460,350);  
                        trazo.lineWidth=ancho;  
                        trazo.strokeStyle="#000";  
                        trazo.stroke();  
                        trazo.closePath();  
                        //TRAZO DE OJOS+  
                        if(this.intentos>4){  
                            trazo.beginPath();  
                            //PRIMER OJO  
                            trazo.moveTo(395,130);  
                            trazo.lineTo(375,145);  
                            trazo.moveTo(395,145);  
                            trazo.lineTo(375,130);  
                            //SEGUNDO OJO  
                            trazo.moveTo(405,130);  
                            trazo.lineTo(425,145);  
                            trazo.moveTo(405,145);  
                            trazo.lineTo(425,130);  
  
                            trazo.lineWidth=5;  
                            trazo.strokeStyle="blue";  
                            trazo.stroke();  
                            trazo.closePath();  
                        }  
                    }  
                }  
            }  
        }  
}  
  
Ahorcado.prototype.trazoLinea = function(){  
    this.intentos++;  
    if(this.intentos>=this.maximo){  
        this.vivo=false;  
        alert("ESTAS MUERTO");  
        var tamaño = palabra.length;  
        /*AQUI LLAMAMOS A LA FUNCION rayitas(x,y) PARA PONER LA PALABRA CORRECTA  
         SI SE MURIO*/  
        rayitas(palabra,tamaño);  
    }  
    this.dibujar();  
}  
//CLASE PARA CREAR ELEMENTOS HTML  
var documentoHtml = function(){  
    this.c = document.getElementById("lienzo");  
    this.contexto = this.c.getContext("2d");  
    this.botonEntrar = document.getElementById("boton");  
    this.cajaTexto=document.getElementById("cajaTexto");  
    this.under=document.getElementById("underscore1");  
    this.botonOtra= document.getElementById("recomenzar");  
}  
  
//FUNCION PARA CREAR NUMEROS RANDOM  
function numerosRandom(minimo, maximo){  
    var numero= Math.floor(Math.random()*(maximo-minimo+1)+minimo);  
    return numero;  
}  
  
function inicio(){  
    incial=true;  
    doc = new documentoHtml();  
    doc.c.width = 500;  
    doc.c.height = 500;      
    hombre = new Ahorcado (doc.contexto);  
    //CONVERTIMOS LA PALABRA A MAYUSCULAS  
    palabra=palabras[numerosRandom(0,7)];      
    palabra = palabra.toUpperCase();  
    var tamaño = palabra.length;  
    compararLetras2(tamaño);  
    doc.botonEntrar.addEventListener("click",compararLetras1);       
    doc.botonOtra.addEventListener("click",inicio);  
}  
  
function compararLetras1(){      
    var tamaño = palabra.length;  
    compararLetras2(tamaño);  
}  
//METODO PARA COMPARAR LA LETRA  
function compararLetras2(tamaño){  
    var i = 0;  
    var texto = new Array(tamaño);  
    var letra = doc.cajaTexto.value;  
    var corregir=false;  
    letra=letra.toUpperCase();  
    /*EN ESTE CICLO ME HIZE PEDADOS XD PERO COMPARA CON LA VARIABLE TEXTOADIVINADO  
     Y DESPUES COMPARA SI LA LETRA SE ADIVINO*/  
    do{  
  
        if(textoAdivinado[i] == palabra[i]){  
            texto[i] = textoAdivinado[i];  
        }          
        if(letra == palabra[i]){              
            texto[i]  =  letra;  
            correcto = true;  
            if(correcto){  
                corregir=true;  
            }  
        }else{  
            if(corregir==false){  
            correcto = false;  
            }  
        }  
        i++;  
    }while(tamaño>i);  
  
    rayitas(texto,tamaño);  
}  
//METODO PARA AGREGAR LA LETRA Y LAS RAYITAS AL SUELO (SALUDOS FREDY)  
  
function rayitas(texto,tamaño){  
    var i = 0;  
    var pista="";  
    textoAdivinado="";  
    do{  
  
        if(texto[i]== undefined){  
            pista += " _ ";  
            textoAdivinado +="_"  
        }else{  
            pista += texto[i];  
            textoAdivinado+=texto[i];  
        }  
        i++;  
    }while(i<tamaño);  
    doc.under.innerText = pista;  
    /*COMPARAMOS SI LA PALABRA ES IGUAL AL TEXTO ADIVINADO SI ES ASI HAY DE DOS  
    LA PRIMERA ES ROMPER EL CICLO DEL METODO revisar() Y LA SEGUNDA SABER SI GANO  
    PD: SI NO LO ENTIENDEN QUITEN EL IF Y SOLO LLAMEN A revisar() VERAN UN CICLO INFINITO xD*/  
    if(palabra==textoAdivinado){  
        //SI ESTA VIVO GANO  
        if(hombre.vivo){  
            alert("GANASTE!! la palabra escondida es: "+palabra);  
        }  
          
    }else{  
    revisar();  
    }  
}  
//FUNCION REVISAR SIRVE PARA SABER SI SE EMPEZO EL JUEGO O SI HUBO ALGUN FALLO  
function revisar (){  
    if (incial==true) {  
        incial=false;  
     }else if (correcto==false){  
         //SI SE FALLA LLAMA A LA FUNCION DE hombre.trazoLinea() PARA DIBUJAR ALGUNA PARTE DEL MONITO  
        hombre.trazoLinea();  
    }  
}

HTML

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>AHORCADO</title>  
    <script type="text/javascript" src="script.js"></script>  
</head>  
<body>  
    <h1 style="font-size: 32px">ADIVINA LA PALABRA LETRA POR LETRA</h1>  
    <canvas id="lienzo"></canvas>  
    <div>  
        <p style="font-size: 32px">Dame una letra:</p>  
        <input type="Button" id="boton" value="INSERTAR LETRA">  
  
        <input type="text" id="cajaTexto">  
        <h2 id="underscore1" style="font-size: 40px">_ _ _ _ _</h2>          
  
          
            <input type="Button" id="recomenzar" value="OTRA PALABRA :(">  
          
    </div>  
    <script type="text/javascript">  
            inicio();  
        </script>  
</body>  
</html>

Cesar Anzules

student•

Mi deber :) (Y)
function aletorio(minimo,maximo)
{
var numero =Math.floor(Math.random()*(maximo-minimo+1)+minimo);

return numero;
}
var opciones=["papa","madera","cuadriceps","impresora","google"];
var palabrasaletorias=aletorio(0,4);
var palabra=opciones[palabrasaletorias];
var hombre, l, espacio;
//declaracion de la calses ahorcado
var Ahorcado = function(con)
{
this.contexto=con;//exlcusica de this
this.maximo=5;
this.intentos=0;
this.vivo=true;

this.dibujar();
}
Ahorcado.prototype.dibujar = function()
{
var dibujo =this.contexto;
//dibujando el poste
dibujo.beginPath();
dibujo.moveTo(150,100);
dibujo.lineTo(150,50);
dibujo.lineTo(400,50);
dibujo.lineTo(400,350);
dibujo.lineWidth=15;//gureso de la liena
dibujo.strokeStyle="#000000";
dibujo.stroke();
dibujo.closePath();

if(this.intentos>0)
{//intento=1 -->rosto
dibujo.beginPath();
dibujo.arc(150, 140, 40, 0,Math.PI*2,false);
dibujo.strokeStyle="red";
dibujo.lineWidth=5;
dibujo.stroke();
dibujo.closePath();

if(this.intentos>1)
{
//si intentos =2 dibujo el trozo
dibujo.beginPath();
dibujo.moveTo(150,180);
dibujo.lineTo(150,250);
dibujo.strokeStyle="red";
dibujo.lineWidth=5;
dibujo.stroke();
dibujo.closePath();

if(this.intentos>2)
{
//si intentos =2 dibujo el trozo
dibujo.beginPath();
dibujo.moveTo(120,220);
dibujo.lineTo(150,180);
dibujo.lineTo(180,220);
dibujo.strokeStyle="red";
dibujo.lineWidth=5;
dibujo.stroke();
dibujo.closePath();

}

          if(this.intentos>3)
{
//si intentos =2 dibujo el trozo
dibujo.beginPath();
dibujo.moveTo(120,290);
dibujo.lineTo(150,250);
dibujo.lineTo(180,290);
dibujo.strokeStyle="red";
dibujo.lineWidth=5;
dibujo.stroke();
dibujo.closePath();
}
if(this.intentos>4)
{
//si intentos =2 dibujo el trozo
dibujo.beginPath();
//ojo izqyierdo
dibujo.moveTo(125,120);
dibujo.lineTo(145,145);
dibujo.moveTo(145,120);
dibujo.lineTo(125,145);
//ojo derecho le sume 30pixles
dibujo.moveTo(155,120);
dibujo.lineTo(175,145);
dibujo.moveTo(175,120);
dibujo.lineTo(155,145);
//lo traza
dibujo.strokeStyle="blue";
dibujo.lineWidth=5;
dibujo.stroke();
dibujo.closePath();
}
}
}
}
Ahorcado.prototype.trazar= function()
{
this.intentos++;
if(this.intentos>=this.maximo)
{
this.vivo=false;
alert("Esta muerto");
}
this.dibujar();
}
function iniciar ()
{
l = document.getElementById("letra");
var b = document.getElementById("boton");
var canvas = document.getElementById("c");
canvas.width = 500;
canvas.height = 400;
var contexto = canvas.getContext("2d");
hombre = new Ahorcado(contexto);
//Convierte a mayúscula un texto
palabra = palabra.toUpperCase();
//Declaro un array con n espacios de acuerdo al largo de la plabara
espacio = new Array(palabra.length);
//Agregamos una función que se dispare al dar click al botón
b.addEventListener("click", agregarLetra);
mostrarPista(espacio);
//mostrarPista(palabra, espacio);
}
function agregarLetra ()
{ //guarda la letra
var letra =l.value;
l.value= "";
mostrarPalabra(palabra, hombre, letra);
}
function mostrarPalabra(palabra, hombre, letra)
{

var encontrado = false;
var p;
letra =letra.toUpperCase();
for( p in palabra)
{
if(letra==palabra[p])
{
espacio[p] = letra;
encontrado = true;

}
}
mostrarPista(espacio);
var res =espacio.join("");//convierte a string
if(!encontrado)
{
hombre.trazar();
}
if(!hombre.vivo)
{
mostrarPista(palabra);
}
if(palabra==res)
{
alert("Ganaste :D");
}
}
function mostrarPista(espacio)
{
var pista = document.getElementById("pista");
var texto= "";
var i;
var largo = espacio.length;
for ( i=0; i<largo; i++) {

if (espacio[i] != undefined)
{
texto = texto+ espacio[i] +" ";
}
else
{
texto +="_ ";
}
}
pista.innerText = texto;
}

Joanner Peña Peña

student•

Mi Codigo completo!

var palabra;  
var hombre,l,espacio;  
//Clase Ahorcado  
var Ahorcado = function(con){  
    this.contexto = con;  
    this.maximo = 5;  
    this.intentos = 0;  
    this.dibujar();  
    this.vivo = true;  
}  
Ahorcado.prototype.dibujar = function(){  
    var dibujo = this.contexto;  
    //Dibujando el poste  
    dibujo.beginPath();  
    dibujo.moveTo(150,100);  
    dibujo.lineTo(150,50);  
    dibujo.lineTo(400, 50);  
    dibujo.lineTo(400,350);  
    //lineWidth para el tamaño en pixeles de el trazo  
    dibujo.lineWidth = 15;  
    dibujo.strokeStyle = "black"  
    dibujo.stroke();  
    dibujo.closePath();  
    if (this.intentos > 0) {  
        //Intento = 1 --> rostro  
        dibujo.beginPath();  
        dibujo.arc(150,140,40,0,Math.PI * 2,false);  
        dibujo.strokeStyle = "blue";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
        //Intento = 2 --> torso  
        if (this.intentos > 1) {  
        dibujo.beginPath();  
        dibujo.moveTo(150, 180);  
        dibujo.lineTo(150,250);  
        dibujo.strokeStyle = "blue";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
            //Intento = 3 --> brazos  
            if (this.intentos > 2) {  
            dibujo.beginPath();  
            dibujo.moveTo(120, 220);  
            dibujo.lineTo(150,185);  
            dibujo.lineTo(180,220);  
            dibujo.strokeStyle = "blue";  
            dibujo.lineWidth = 5;  
            dibujo.stroke();  
            dibujo.closePath();  
                //Intento = 4 --> pies  
                if (this.intentos > 3) {  
                    dibujo.beginPath();  
                    dibujo.moveTo(120, 295);  
                    dibujo.lineTo(150,250);  
                    dibujo.lineTo(180,295);  
                    dibujo.strokeStyle = "blue";  
                    dibujo.lineWidth = 5;  
                    dibujo.stroke();  
                    dibujo.closePath();  
                        //Intentos = 5 --> ojos en X  
                        if (this.intentos > 4) {  
                            //Ojo izquierdo  
                            dibujo.beginPath();  
                            dibujo.moveTo(125, 120);  
                            dibujo.lineTo(145,145);  
                            dibujo.moveTo(145,120);  
                            dibujo.lineTo(125,145);  
                            dibujo.strokeStyle = "red";  
                            dibujo.lineWidth = 5;  
                            dibujo.stroke();  
                            dibujo.closePath();  
                            //Ojo derecho  
                             dibujo.beginPath();  
                             dibujo.moveTo(155, 120);  
                             dibujo.lineTo(175,145);  
                             dibujo.moveTo(175,120);  
                             dibujo.lineTo(155,145);  
                             dibujo.strokeStyle = "red";  
                             dibujo.lineWidth = 5;  
                             dibujo.stroke();  
                             dibujo.closePath();  
                        }  
                }  
        }  
        }  
    }  
}  
Ahorcado.prototype.trazar = function(){  
    this.intentos ++;  
    if(this.intentos >= this.maximo){  
        this.vivo = false;  
        alert("Estas Muerto!");  
    }  
    this.dibujar();  
}  
function iniciar(){  
    palabraAzar();  
    l = document.getElementById("letra");  
    var b = document.getElementById("boton");  
    var canvas = document.getElementById("c");  
    // Podemos darle el tamaño al canvas  
    canvas.width = 500;  
    canvas.height = 400;  
    //Declarar el contexto  
    var contexto = canvas.getContext("2d");  
    hombre = new Ahorcado(contexto);  
    espacio = new Array(palabra.length);  
    palabra = palabra.toUpperCase();  
    b.addEventListener("click", agregarLetra);  
    mostrarPista(espacio);  
}  
function agregarLetra(){  
    var letra = l.value;  
    l.value = "";  
    mostrarPalabra(palabra,hombre,letra);  
}  
function mostrarPalabra(palabra,ahorcado,letra){  
    var encontrado = false;  
    var p;  
    letra = letra.toUpperCase();  
    for (p in palabra){  
        if (letra == palabra[p]) {  
            espacio[p] = letra;  
            encontrado = true;  
        }  
        mostrarPista(espacio);  
    }  
    if(!encontrado){  
            ahorcado.trazar();  
    }  
    if(!ahorcado.vivo){  
            var pista = document.getElementById("pista");  
            pista.innerText = palabra;  
    }  
}  
function mostrarPista(espacio){  
    var pista = document.getElementById("pista");  
    var texto = "";  
    var i;  
    var largo = espacio.length;  
    for (i = 0; i < largo; i++) {  
        if (espacio[i] != undefined) {  
            texto = texto + espacio[i] + " ";  
        }  
        else{  
            texto += "_ ";  
        }  
        pista.innerText = texto;  
    }  
}  
function palabraAzar(){  
    var azar = ["Tamarindo","Amor","Jugo","Reincor","Corazon","Ahorcado","Hola"];  
    var numero = Math.floor(Math.random()*(azar.length-0+1)+0);  
    palabra = azar[numero];  
}

Creando nuestro algoritmo para el juego del ahorcado

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas

Dibujar con eventos

Preguntas y respuestas

Programando juegos con canvas

Tipos de imágenes

Insertar imágenes en canvas

Dibujo de múltiples imágenes en canvas

Dibujar al enemigo y controlar a Diana

Sesión de preguntas y respuestas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Objetos en JavaScript con Prototype

Creando el juego del Ahorcado

Dibujo de un ahorcado usando Canvas

Sesión de preguntas y respuestas

Cómo crear un algoritmo para el juego del ahorcado

Extendiendo la funcionalidad de los Strings