Dibujo de un ahorcado usando Canvas

Jhon Carlos Colorado Angulo

student•

Hola compañeros comparto con ustedes el juego de ahorcado muy completo.

link para jugar:

A continuación les dejo el código.

Index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Juego de Ahorcado</title>  
    <script type="text/javascript" src="ahorcado.js"></script>  
    <style>  
        body  
        {  
            text-align: center;      
        }  
  
        #cant_intentos  
        {  
            width: 25px;  
            text-align: center;  
        }  
          
    </style>  
</head>  
<body>  
      
    <h4>Juego de ahorcados</h4>  
    <p>  
        <label >Vida</label>  
        <label for=""> <input type="text" id="cant_intentos" disabled></label>  
    </p>  
    <h3 id="mostrar_frase">.</h3>  
      
    <canvas id="campo"></canvas>  
    <p>  
        <input type="text" id="palabra">  
        <input type="button" id="digitar" value="Bomm!!..">  
    </p>  
      
      
    <script type="text/javascript">  
    inicio()  
    </script>  
      
</body>  
</html>

ahorcado.js

var canvas, hombre, texto, b, mostar, j="";  
var espacio, largo, pista, mostrarIntentos;  
  
var fraseElegida = Math.floor(Math.random()* (5 - 0 + 1) + 0);  
var bdFrases = ["Hola", "Amar", "Seguramente", "Carlos", "Colorado", "Televisor"];  
var frase = bdFrases[fraseElegida];  
  
  
//Declacarion de la clase Ahorcado  
var Ahorcado = function(cont)  
{  
    this.contexto = cont;  
    this.maximo = 5;  
    this.intentos = 0;  
    this.vivo = true;  
  
    this.dibujar();  
  
}  
  
Ahorcado.prototype.dibujar = function()  
{  
      
    var dibujo = this.contexto;  
  
    dibujo.beginPath();  
    dibujo.moveTo(250, 150);  
    dibujo.lineTo(250, 100);  
    dibujo.lineTo(450, 100);  
    dibujo.lineTo(450, 400);  
    dibujo.lineWidth = 20;  
    dibujo.strokeStyle = "#00DD00";  
    dibujo.stroke();  
    dibujo.closePath();  
  
    if(this.intentos > 0)  
    {  
        // intentos = 1 --> Dibujar rostro  
        dibujo.beginPath();  
        dibujo.arc(250, 170, 20, 0, Math.PI * 2, false);  
        dibujo.strokeStyle = "red";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
  
          
        if(this.intentos > 1)  
        {  
            // intento = 2 --> Dibujar tronco  
            dibujo.beginPath();  
            dibujo.moveTo(250, 190);  
            dibujo.lineTo(250, 260);  
            dibujo.strokeStyle = "red";  
            dibujo.stroke();  
            dibujo.closePath();  
              
            if(this.intentos > 2)  
            {  
                // intento = 3 --> Dibujar manos  
                dibujo.beginPath();  
                dibujo.moveTo(250, 190);  
                dibujo.lineTo(220, 220);  
                dibujo.moveTo(250, 190);  
                dibujo.lineTo(280, 220);  
                dibujo.strokeStyle = "red";  
                dibujo.stroke();  
                dibujo.closePath();  
  
                if(this.intentos > 3)  
                {  
                    // intento = 4 --> Dibujar pies  
                    dibujo.beginPath();  
                    dibujo.moveTo(250, 260);  
                    dibujo.lineTo(220, 290);  
                    dibujo.moveTo(250, 260);  
                    dibujo.lineTo(280, 290);  
                    dibujo.strokeStyle = "red";  
                    dibujo.stroke();  
                    dibujo.closePath();  
  
                    if(this.intentos > 4)  
                    {  
                        // intento = 5 --> Dibujar ojos muertos  
                          
                        //Ojo izquierdo  
                        dibujo.beginPath();  
                        dibujo.moveTo(237, 165);  
                        dibujo.lineTo(245, 173);  
                        dibujo.moveTo(245, 165);  
                        dibujo.lineTo(237, 173);  
                        dibujo.strokeStyle = "blue";  
                        dibujo.stroke();  
                        dibujo.closePath();      
  
                        //Ojo derecho  
                        dibujo.beginPath();  
                        dibujo.moveTo(255, 165);  
                        dibujo.lineTo(263, 173);  
                        dibujo.moveTo(263, 165);  
                        dibujo.lineTo(255, 173);  
                        dibujo.strokeStyle = "blue";  
                        dibujo.stroke();  
                        dibujo.closePath();      
  
                    }  
                      
                }  
                  
            }  
  
        }  
  
  
    }  
}  
  
Ahorcado.prototype.trazar = function()  
{  
    this.intentos++;  
  
    mostrarIntentos.value = this.maximo - this.intentos;  
  
    if(this.intentos >= this.maximo)  
    {  
        this.vivo = false;  
        alert("Lo sentimos has perdido");  
    }  
  
    this.dibujar();  
}  
  
function inicio()  
{  
    canvas = document.getElementById("campo");  
    canvas.width = 500;  
    canvas.height = 400;  
    var contexto = canvas.getContext("2d");  
  
    hombre = new Ahorcado(contexto);  
  
    texto = document.getElementById("palabra");  
    b = document.getElementById("digitar");  
    mostrarIntentos = document.getElementById("cant_intentos");  
  
    mostrarIntentos.value = hombre.maximo;  
      
    frase = frase.toUpperCase();  
      
  
    //Declaro un array con n de espacios de acuerdo al largo de la palabra escojida  
    espacio = new Array(frase.length);  
  
    //Agrego la función que se disparará al dar click en el botón  
    b.addEventListener("click", adivina);  
  
    mostrarPista(espacio);  
  
  
}  
  
function mostrarPista(espacio)  
{  
    pista = document.getElementById("mostrar_frase");  
    var i, texto = "";  
    largo = espacio.length;  
  
    for(i = 0; i < largo; i++)  
    {  
        if(espacio[i] != undefined)  
        {  
            texto += espacio[i]+" ";  
        }  
        else  
        {  
            texto += "_ ";  
        }  
    }  
  
    pista.innerHTML = texto;  
  
}  
  
function adivina()  
{  
    var letra = texto.value;  
  
    if(texto.value.length == 1)  
    {  
        texto.value = "";  
  
        mostrarPalabra(frase, hombre, letra);      
    }  
      
}  
  
function mostrarPalabra(frase, ahorcado, letra)  
{  
    var encontrado = false;  
    var p;  
    var bandera = 0;  
    var verGanar = (largo * 2);  
  
    letra = letra.toUpperCase();  
  
    for(p in frase)  
    {  
        if(letra == frase[p])  
        {  
            espacio[p] = letra;  
            encontrado = true;  
        }  
    }  
  
    mostrarPista(espacio)  
  
    if(encontrado == false)  
    {  
        ahorcado.trazar();  
    }  
  
    if(ahorcado.vivo == false)  
    {  
        texto="";  
  
        for(i = 0; i < largo; i++)  
        {  
            texto += frase[i] + " ";  
        }  
        pista.innerHTML = texto;  
  
          
    }  
  
    for(i=0; i < largo; i++)  
    {  
        if(espacio[i] == undefined)  
        {  
            bandera = 1;  
        }  
          
    }  
  
    if(bandera == 0)  
    {  
        alert("Felicitaciones acabas de ganar un moto");  
          
        b.removeEventListener("click", adivina);  
    }  
}

Espero comentarios.

Cesar David Ramírez Dimaté

student•

Dejo la tarea documentada.

Vector de palabras aleatorio.
Mostrar la palabra completa al morir el ahorcado.

HTML

<!--  
    Juego del ahorcado:  
    1. Dibujar el poste.  
    2. Determinar la palabra.  
    3. Pasos para ahorcar:  
        Cabeza  
        Torso  
        Brazos  
        Pies  
        Ojos Muertos  
    4. Elegir las letras  
        Si la letra existe:  
            Ponerlo en la lista.  
        Si no:  
            Agrego un trazo al ahorcado.  
        Si ya dibuje al ahorcado completo.  
            Perdí  
        Si adivine la palabra  
            Gané  
-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>Ahorcado</title>  
        <meta charset="utf-8" />  
        <script type="text/javascript" src="js/ahorcado.js"></script>  
    </head>  
    <body>  
        <h1>Adivina letra a letra</h1>  
        <canvas id="c"></canvas>  
        <p>  
            Elige una letra:  
            <input type="text" id="letra" />  
            <input type="button" id="boton" value="Boom!" />  
        </p>  
        <h2 id="pista">_ _ _ _ _ _ _ _ _ </h2>  
        <script type="text/javascript">  
        iniciar();  
        </script>  
    </body>  
</html>

var palabras = new Array();  
  
palabras[0] = "Tamarindo";  
palabras[1] = "Accesibilidad";  
palabras[2] = "Conexiones";  
palabras[3] = "Desarrollo";  
palabras[4] = "Platzi";  
  
// Elijan de un array de palabras aleatorio (Tarea)  
var palabra = palabras[Math.floor((Math.random() * 5) + 0)];  
  
var hombre, l;  
  
// Declaración de la clase Ahorcado  
var Ahorcado = function (ctx) {  
    // this se utiliza para llamar las variables locales de la clase, accesibles en toda la clase  
    // this.contexto es el context de dibujo del canvas.  
    this.contexto = ctx;  
    this.maximo = 5;  
    this.intentos = 0;  
    this.vivo = true;  
  
    this.dibujar();  
}  
  
Ahorcado.prototype.dibujar = function() {  
    var dibujo = this.contexto;  
    // Dibujando el poste.  
    dibujo.beginPath(); // Inicia el trazo (Ejm: Colocar el mouse en el punto).  
    dibujo.moveTo(150,100); // Posición inicial.  
    dibujo.lineTo(150,50); // De la posición inicial es irse hasta...  
    dibujo.lineTo(400,50);  
    dibujo.lineTo(400,350);  
    dibujo.lineWidth = 15; // Definir una línea más gruesa.  
    dibujo.strokeStyle = "#000"; // Define la linea de color negro.  
    dibujo.stroke(); // Función que dibuja todo el poste.  
    dibujo.closePath(); // Finaliza el trazo (Ejm: Colocar el mouse en el punto).  
  
    // Intentos = 1 (Rostro)  
    if(this.intentos > 0) {          
        dibujo.beginPath();  
        dibujo.arc(150,140,40,0, Math.PI * 2, false); // Dibujar un círculo. arc(x, y, radio, radianes_iniciales, radianes_finales, manecillas_reloj)  
        dibujo.strokeStyle = "#F00";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
  
        // Intentos = 2 (Torso)  
        if(this.intentos > 1) {  
            dibujo.beginPath();  
            dibujo.moveTo(150,180);  
            dibujo.lineTo(150,250);  
            dibujo.strokeStyle = "#F00";  
            dibujo.lineWidth = 5;  
            dibujo.stroke();  
            dibujo.closePath();  
  
            // Intentos = 3 (Brazos)  
            if(this.intentos > 2) {  
                dibujo.beginPath();  
                dibujo.moveTo(120,220);  
                dibujo.lineTo(150,180);  
                dibujo.lineTo(180,220);  
                dibujo.strokeStyle = "#F00";  
                dibujo.lineWidth = 5;  
                dibujo.stroke();  
                dibujo.closePath();  
  
                // Intentos = 4 (Piernas)  
                if(this.intentos > 3) {  
                    dibujo.beginPath();  
                    dibujo.moveTo(120,290);  
                    dibujo.lineTo(150,250);  
                    dibujo.lineTo(180,290);  
                    dibujo.strokeStyle = "#F00";  
                    dibujo.lineWidth = 5;  
                    dibujo.stroke();  
                    dibujo.closePath();  
  
                    // Intentos = 5 (Ojos Muertos)  
                    if(this.intentos > 4) {  
                        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 = "#0000FF"; // Color Azul.  
                        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() {  
    var canvas = document.getElementById("c");  
    canvas.width = 500;  
    canvas.height = 400;  
  
    var contexto = canvas.getContext("2d");  
    hombre = new Ahorcado(contexto);  
  
    l = document.getElementById("letra");  
    var b = document.getElementById("boton");  
  
    palabra = palabra.toUpperCase(); // Convierte a mayúscula un texto  
    espacio = new Array(palabra.length); // Declara un array con n espacios según la longitud ee la palabra.  
    b.addEventListener("click", agregarLetra); // Agregamos una función que se dispare al dar clic al botón.  
  
    mostrarPista(espacio); // Crea la palabra con la estructura _ _ _   
}  
  
function agregarLetra() {  
    var letra = l.value;  
    l.value = ""; // Limpia la caja de texto.  
    mostrarPalabra(palabra, hombre, letra);  
}  
  
function mostrarPalabra(palabra, ahorcado, letra){  
    var encontrado = false;  
    var p; // Contador (0..n) de las letras de la palabra.  
    letra = letra.toUpperCase();  
    for(p in palabra) {  
        if(letra == palabra[p]) {  
            espacio[p] = letra; // El vector vacio se llenará con la letra que fue digitada si la encuentra.  
            encontrado = true;  
        }  
    }  
    mostrarPista(espacio); // Grafica la palabra, con o sin letras encontradas.  
    // Si no la encuentra  
    if(!encontrado)  
        ahorcado.trazar(); // Grafica el ahorcado si no lo encuentra.  
    if(!ahorcado.vivo)  
        mostrarPista(palabra); // Mostrar la palabra entera al morir (Tarea)  
}  
  
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;  
}

Saludos compañeros.

Diana Mora

student•

var palabra = "Tamarindo";  
var hombre;  
var contexto;  
var parte = 0;  
var fondo = {  
    imagenURL: "fondo.png",  
};  
var galleta = {  
    cabezaURL: "head.png",  
    brazosURL: "arms.png",  
    piernasURL: "feet.png",  
    cuerpoURL: "body.png",  
    ojosURL: "eyes.png"  
};  
function iniciar(){  
    var canvas = document.getElementById("c");  
    canvas.width = 500;  
    canvas.height = 375;  
    contexto = canvas.getContext("2d");      
    hombre = new Ahorcado(contexto);  
    hombre.trazar();  
    hombre.trazar();  
    hombre.trazar();  
    hombre.trazar();  
    hombre.trazar();  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibuja;  
    galleta.cabeza = new Image();  
    galleta.cabeza.src = galleta.cabezaURL;  
    galleta.cabeza.onload = dibuja;  
    galleta.cuerpo = new Image();  
    galleta.cuerpo.src = galleta.cuerpoURL;  
    galleta.cuerpo.onload = dibuja;  
    galleta.brazos = new Image();  
    galleta.brazos.src = galleta.brazosURL;  
    galleta.brazos.onload = dibuja;  
    galleta.piernas = new Image();  
    galleta.piernas.src = galleta.piernasURL;  
    galleta.piernas.onload = dibuja;  
    galleta.ojos = new Image();  
    galleta.ojos.src = galleta.ojosURL;  
    galleta.ojos.onload = dibuja;  
}  
function dibuja(){  
    contexto.drawImage(fondo.imagen,0,0);  
    if (parte == 1){  
        contexto.drawImage(galleta.cabeza,200,239);  
    }  
    if (parte == 2){  
        contexto.drawImage(galleta.cabeza,200,239);   
        contexto.drawImage(galleta.cuerpo,195,280);  
    }  
    if (parte == 3){  
        contexto.drawImage(galleta.cabeza,200,239);   
        contexto.drawImage(galleta.cuerpo,195,280);   
        contexto.drawImage(galleta.brazos,175,280);  
    }  
    if (parte == 4){  
        contexto.drawImage(galleta.cabeza,200,239);   
        contexto.drawImage(galleta.cuerpo,195,280);   
        contexto.drawImage(galleta.brazos,175,280);  
        contexto.drawImage(galleta.piernas,185,330);  
    }  
    if (parte == 5){  
        contexto.drawImage(galleta.cabeza,200,239);   
        contexto.drawImage(galleta.cuerpo,195,280);   
        contexto.drawImage(galleta.brazos,175,280);  
        contexto.drawImage(galleta.piernas,185,330);  
        contexto.drawImage(galleta.ojos,210,250);  
    }  
}  
//declaracion de la clase  
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;  
  
    if(this.intentos > 0){  
        //intentos = 1 --> rostro  
        parte=1;  
    }  
    if(this.intentos > 1){  
        //intentos = 2 --> tronco  
        parte =2;  
    }  
    if(this.intentos > 2){  
        //intentos = 3 --> brazos  
        parte=3;  
    }  
    if(this.intentos > 3){  
        //intentos = 4 --> piernas  
        parte=4;  
    }  
    if(this.intentos > 4){  
        //intentos = 5 --> ojos muertos  
        parte=5;  
    }  
  
}  
Ahorcado.prototype.trazar = function (){  
  
    this.intentos ++;  
    if(this.intentos >= this.maximo){  
        this.vivo = false;  
        //alert("estas muerto");  
    }  
    this.dibujar();  
}

Santiago Avellaneda

student•

Súper el aporte con imágenes, ten tu punto :)

Leonel Rosales

student•

el dibujo en canvas puede ser "dinámico"?? es decir q lo vaya dibujando poco a poco y que no aparezca todo el trazo de golpe?

Santiago Avellaneda

student•

Si es posible si no traes imágenes, por ejemplo creando un ciclo y haciendo que dibuja una parte de la línea, luego otra, luego otra, parecería que se va dibujando y a través de javascript colocas una función para hacer tiempo porque si no todo se dibujaria "de forma instantánea" para el ojo humano, igual es una forma, hay muuuuchas más

Juan pablo londoño

student•

var palabra = "Tamarindo";  
var hombre,caja;  
  
var fondo =   
{  
    fondoURL: "fondo.jpg",  
    fondoOK: false  
};  
  
var partes =  
{     
    //URL, CABEZA  
    cabezaURL: "cabeza.png",  
    cabezaOK: false,  
      
    //URL,TORSO  
    torsoURL: "torso.png",  
    torsoOK: false,  
  
    //URL,PIERNAS  
    piernasURL: "piernas.png",  
    piernasOK: false,  
  
    //URL,BRAZOS  
    brazosURL: "brazos.png",  
    brazosOK: false,  
  
    //URL,OJOS  
    ojosURL: "ojos.png",  
    ojosOK: false,  
      
    //URL DE IMAGEN DE PERDEDOR  
    perdisteURL: "perdiste.png",  
    perdisteOK: false,  
      
    //IMAGEN CON TEXTO GANME OVER  
    overURL: "over.png",  
    overOK: false  
};  
//DECLARACION DE LA CLASE AHORCADO  
var Ahorcado = function (con)   
{  
    this.contexto = con;  
    this.intentos = 0;  
    this.maximo = 5;  
    this.vivo = true;  
    this.dibujar()  
}  
  
function iniciar()  
{  
     caja = document.getElementById("letra");  
     var boton = document.getElementById("boton");  
     var canvas = document.getElementById("c");  
     canvas.width = 500;  
     canvas.height = 400;  
     var contexto = canvas.getContext("2d");  
  
     boton.addEventListener("click", agregarLetra);  
       
     //CREAMOS UNA NUEVA INSTANCIA DE LA CLASE LLAMADA HOMBRE,  
     // LA CUAL LE PASAMOS POR PARAMETRO  EL CONTEXTO DEL CANVAS,  
     hombre = new Ahorcado(contexto);  
  
     //IMAGEN DEL FONDO  
     fondo.imagen = new Image();  
     fondo.imagen.src = fondo.fondoURL;  
     fondo.imagen.onload = confirmarFondo;  
  
     //IMAGEN DE LA CABEZA  
     partes.cabeza = new Image();  
     partes.cabeza.src = partes.cabezaURL;  
     partes.cabeza.onload = confirmarCabeza;  
      
    //IMAGEN DEL TORSO  
     partes.torso = new Image();  
     partes.torso.src =  partes.torsoURL;  
     partes.torso.onload = confirmarTorso;  
  
    //IMAGEN DE LAS PIERNAS  
     partes.piernas = new Image();  
     partes.piernas.src = partes.piernasURL;  
     partes.piernas.onload = confirmarPiernas;  
   
     //IMAGEN DE LOS BRAZOS  
     partes.brazos = new Image();  
     partes.brazos.src = partes.brazosURL;  
     partes.brazos.onload = confirmarBrazos;  
      
     //IMAGEN DE LOS OJOS  
     partes.ojos = new Image();  
     partes.ojos.src = partes.ojosURL;  
     partes.ojos.onload = confirmarOjos;  
      
    //IMAGEN DE IMAGEN DE PERDEDOR  
     partes.perdiste = new Image();  
     partes.perdiste.src = partes.perdisteURL;  
     partes.perdiste.onload = confirmarPerdiste;  
  
     //IMAFEN DE TEXTO CON GAME OVER  
     partes.over = new Image();  
     partes.over.src = partes.overURL;  
     partes.over.onload = confirmarOver;  
  
  
    //INVOCACION DEL PROTOTIPO TRAZAR,DEL AHORCADO,PARA PORDER DIBUJAR LAS IMAGENES EN EL LIEMZO  
     //hombre.trazar();  
     //hombre.trazar();  
     //hombre.trazar();  
     //hombre.trazar();  
     //hombre.trazar();  
}  
//DECLARAMOS LA FUNCTION DEL EVENTO DEL BOTON LLAMADA AGREGAR LETRA  
function agregarLetra()  
{  
    var letra = caja.value;  
      
    hombre.trazar();  
    letra = letra.toUpperCase();  
      
}  
  
//CONFIRMAR QUE EL FONDO YA CARGO,GRACIAS A OMLOAD PODEMOS DISPARAR LA FUNCTION CONFIRMARFONDO   
function confirmarFondo()  
{  
    fondo.fondoOK = true;  
    hombre.dibujar();  
}  
//CONFIRMAR  QUE LA CABEZA YA CARGO,GRACIAS A LA FUNCTION OMLOAD, PODEMOS DISPARAR LA FUNTIOK CONFIRMARCABEZA  
function confirmarCabeza()  
{  
    partes.cabezaOK = true;  
    hombre.dibujar();  
}  
//CONFIRMAR  QUE EL TORSO  YA CARGO,GRACIAS AL EVENTO ONLOAD, PODEMOS DISPARAR LA FUNCTION CONFIRMARTORSO  
function confirmarTorso()  
{  
    partes.torsoOK = true;  
    hombre.dibujar();  
}  
// CONFIRMAR QUE LAS PIERNAS YA CARGO,GRAACIAS AÑ EVENTO ONLOAD, PODEMOS DISPARAR LA FUNTION CONFIRMARPIERNAS  
function confirmarPiernas()  
{  
    partes.piernasOK = true;  
    hombre.dibujar();  
}  
// CONFIRMAR QUE LOS OJOS YA CARGO,GRAACIAS AÑ EVENTO ONLOAD, PODEMOS DISPARAR LA FUNTION CONFIRMARBRAZOS  
function confirmarBrazos()  
{  
    partes.brazosOK = true;  
    hombre.dibujar();  
}  
// CONFIRMAR QUE LOS OJOS YA CARGO,GRAACIAS AÑ EVENTO ONLOAD, PODEMOS DISPARAR LA FUNTION CONFIRMAROJOS  
function confirmarOjos()  
{  
    partes.ojosOK = true;  
    hombre.dibujar();  
}  
function confirmarPerdiste()  
{  
   partes.perdisteOK = true;  
   hombre.dibujar();  
}  
function confirmarOver()  
{  
   partes.overOK = true;  
   hombre.dibujar();  
}  
Ahorcado.prototype.dibujar = function ()  
{  
     var lienzo = this.contexto;  
     //DIBUJAMOS EL FONDO  
     if(fondo.fondoOK == true)  
     {  
         lienzo.drawImage(fondo.imagen,0,0);  
     }  
     // DIBUJAMOS LA CABEZA  
     if(partes.cabezaOK == true && this.intentos > 0)  
     {  
        lienzo.drawImage(partes.cabeza,30,110);  
     }  
     //DIBUJAMOS EL TORSO  
     if(partes.torsoOK == true && this.intentos > 1)  
     {   
        lienzo.drawImage(partes.cabeza,30,110);  
        lienzo.drawImage(partes.torso,12,153);  
     }  
     //DIBUJAMOS LAS PIRNAS  
     if(partes.piernasOK == true && this.intentos > 2)  
     {  
        lienzo.drawImage(partes.cabeza,30,110);  
        lienzo.drawImage(partes.torso,12,153);  
        lienzo.drawImage(partes.piernas,22,220);  
     }  
     //DIBUJAMOS LAS PIERNAS  
     if(partes.brazosOK == true && this.intentos > 3)  
     {  
        lienzo.drawImage(partes.cabeza,30,110);  
        lienzo.drawImage(partes.brazos,-40,163);  
        lienzo.drawImage(partes.torso,12,153);  
        lienzo.drawImage(partes.piernas,22,220);  
     }  
    if(partes.ojosOK == true && partes.perdisteOK == true && this.intentos > 4)  
     {  
        lienzo.drawImage(partes.cabeza,30,110);  
        lienzo.drawImage(partes.brazos,-40,163);  
        lienzo.drawImage(partes.torso,12,153);  
        lienzo.drawImage(partes.piernas,22,220);  
        lienzo.drawImage(partes.ojos,24,120);  
        lienzo.drawImage(partes.perdiste,250,200);  
        lienzo.drawImage(partes.over,200,5);  
     }  
}  
//CUANDO INVOCAN TRAZAR SE LE AYADE PARTE AL AHORCADO  
Ahorcado.prototype.trazar = function ()  
{  
    this.intentos++  
    if(this.intentos >= this.maximo)  
    {  
        this.vivo = false;  
    }  
    this.dibujar();  
}

David Flores

teacher•

mi tarea, le puso unos sprites de doom, espero y no este tan mal ;)

David Flores

teacher•

listo

Ernesto Valtierra Galvan

student•

Les dejo mi tarea de ponerle imagenes :)
Link funcionando

html

<html>  
<head>  
    <meta charset="utf-8" />  
    <title>Ahorcado</title>  
    <script type="text/javascript" src="ahorcado.js"></script>  
    <style type="text/css">  
    body  
    {  
        text-align: center;  
    }  
    </style>  
</head>  
<body>  
        <h1>Dibujo de un Ahorcado Usando Canvas</h1>  
        <p>Aqui use imagenes</p>  
        <p>  
        Elige una letra:  
        <input type="text" id="letra" />  
        <input type="button" id="boton" value="boomm!!">  
    </p>  
  
    <h1>Adivina letra a letra</h1>  
    <canvas id="c"></canvas>  
  
    <h2 id="pista">_ _ _ _ _ _ _ _ _ _</h2>  
    <script type="text/javascript">  
        iniciar();  
    </script>  
</body>  
</html>

var palabra = "Tamarindo";  
var hombre;  
  
var foto ={};  
//Declaracionde la clase ahorcado  
var Ahorcado = function (con)  
{  
    this.contexto = con;  
    this.maximo = 5;  
    this.intentos = 5;  
    this.vivo = true;  
  
    this.dibujar();  
}  
  
  
Ahorcado.prototype.dibujar = function ()  
{  
    var dibujo = this.contexto;  
    //dibujando el fondo  
  
    foto.fondo = new Image();  
    foto.fondo.src = "fondo.jpg";  
    foto.fondo.onload = dib;  
    function dib(){dibujo.drawImage(foto.fondo, 0, 0);}  
  
    if(this.intentos > 0)  
    {  
        //intentos = 1 --> rostro  
        foto.rostro = new Image();  
        foto.rostro.src = "rostro.jpg";  
        foto.rostro.onload = dib;  
        function dib(){dibujo.drawImage(foto.rostro, 0, 0);}  
  
        if(this.intentos > 1)  
        {  
            //intentos = 2 --> torso  
            foto.torso = new Image();  
            foto.torso.src = "torso.jpg";  
            foto.torso.onload = dib;  
            function dib(){dibujo.drawImage(foto.torso, 0, 0);}  
  
            if(this.intentos > 2)  
            {  
                //intentos = 3 --> brazos  
                foto.brazos = new Image();  
                foto.brazos.src = "brazos.jpg";  
                foto.brazos.onload = dib;  
                function dib(){dibujo.drawImage(foto.brazos, 0, 0);}  
  
                if(this.intentos > 3)  
                {  
                    //intentos = 4 --> piernas  
                    foto.piernas = new Image();  
                    foto.piernas.src = "piernas.jpg";  
                    foto.piernas.onload = dib;  
                    function dib(){dibujo.drawImage(foto.piernas, 0, 0);}  
  
                    if(this.intentos > 4)  
                    {  
                        //intentos = 5 --> ojos muertos  
                        foto.muerto = new Image();  
                        foto.muerto.src = "muerto.jpg";  
                        foto.muerto.onload = dib;  
                        function dib(){dibujo.drawImage(foto.muerto, 0, 0);}  
  
  
  
                    }              
                }  
            }  
        }  
    }  
  
  
  
}  
  
Ahorcado.prototype.trazar = function()  
{  
    this.intentos++;  
    if(this.intentos >= this.maximo)  
    {  
        this.vivo = false  
        alert("¡Estas muerto!");  
    }  
    this.dibujar();  
}  
function iniciar ()  
{  
    var canvas = document.getElementById("c");  
    canvas.width = 600;  
    canvas.height = 400;  
    var contexto = canvas.getContext("2d");  
    var hombre = new Ahorcado(contexto);  
  
      
  
    //hombre.trazar();  
    //hombre.trazar();  
    //hombre.trazar();  
    //hombre.trazar();  
    //hombre.trazar();      
}

EDUARDO GONZALEZ

student•

Una pregunta porque todas cierran al final y no cada una independiente?

              dibujo.strokeStyle = "blue";  
                        dibujo.lineWidth = 5;  
                        dibujo.stroke();  
                        dibujo.closePath();  
                    }  
                }  
            }  
  
        }  
  
    }  
}

Carlos Enrique Rojas Falcone

student•

porque cada if está dentro de otro if:
if ()
{
if ()
{
if ()
{
....
}
}
}

Anyi Beniamin

student•

Hola este es mi código de HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ahorcado</title> <style type="text/css"> body { background: grey; color: blue; text-align: center; }

</style>
<script type="text/javascript" src="ahorcadoan.js"></script>

</head> <body> <p> Elige una letra: <input type="text" id="letra" /> <input type="button" id="boton" value="Boom!!!" /> <canvas"c"></canvas> </p> <h2 id="pista">\_ \_ \_ \_ \_ \_ \_ \_ \_ \_</h2> <canvas id="campo" width="500" height="400" ></canvas> <script type="text/javascript"> inicio(); </script> </body> </html>

///////////////////////////////////////////////////////JS//////////////////////////////////////////////////////////////

//Elijan de un array de palabras aleatorio
var palabras = ["Accesibilidad","Verdad","Justicia","Juicio","Jesus"];
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 = "peru";
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 = "blue";
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 = "blue";
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 = "blue";
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 = "blue";
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 = "red";
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;
}

J. Carlos Salgado

student•

Les dejo mi tarea usando imaganes y agregando funciones con prototype.

Emmanuel Crisanto Crisanto

student•

Prueba de código:
NOTA: En consola invocar el método hombre.trazar(); N veces para que se vayan agregando las partes del cuerpo.

NOTA2: El tiempo de carga de imágenes es muy importante, ésto derivó en un problema con el fondo. Si se carga antes que las partes del cuerpo, éstas quedan ocultas.

HTML:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>Ahorcado</title>  
    <script type="text/javascript" src="js/ahorcadoScare.js"></script>  
    <style type="text/css">  
        body{              
            text-align: center;  
        }  
    </style>  
</head>  
<body>  
    <h1>Juego de ahorcado.</h1>  
    <p>  
        Elige una letra  
        <input type="text" id="letra"></input>  
        <input type="button" id="boton" value="Probar letra"></input>  
        <h2 id="pista">_ _ _ _ _ _ _ _ _ </h2>  
    </p>  
    <canvas id="c"></canvas>      
    <script type="text/javascript">  
        iniciar();  
    </script>  
  
</body>  
</html>

JS:

var palabra = "Tamarindo";  
var hombre;  
  
var fondo = {  
    imagenURL: "hangMan/campo.png",  
    cargaOk: false  
};  
  
var poste = {  
    imagenURL: "hangMan/poste.png"  
};  
  
//Declaración de la clase ahorado  
var Ahorcado = function(con){  
    //this son lasvariables locales de la clase, accesibles en toda la clase  
    this.contexto = con;  
    this.maximo = 5;  
    this.intentos = 0;  
    this.vivo = true;  
    this.fondo = false;  
    this.dibujar();  
};  
  
var parteCuerpo = function(){  
    this.x = 168;  
    this.y = 63;  
    this.imagenURL = "";  
};  
  
Ahorcado.prototype.dibujar = function(){  
    var dibujo = this.contexto;  
  
    poste.imagen = new Image();  
    poste.imagen.src = poste.imagenURL;      
  
    poste.imagen.onload = function(){  
        dibujo.drawImage(poste.imagen, 90, 0);  
    }  
  
    if(this.intentos >0){  
        //Intentos == 1 --> rostro  
  
        rostro = new parteCuerpo();          
        rostro.imagenURL = "hangMan/cabeza.png";  
  
        rostro.imagen = new Image();  
        rostro.imagen.src = rostro.imagenURL;  
  
        rostro.imagen.onload = function(){  
            dibujo.drawImage(rostro.imagen, rostro.x, rostro.y);  
        }                      
  
        if(this.intentos >1){  
            //Intentos == 2 --> torso  
  
            torso = new parteCuerpo();  
            torso.imagenURL = "hangMan/camisa.png";  
  
            torso.imagen = new Image();  
            torso.imagen.src = torso.imagenURL;  
  
            torso.imagen.onload = function(){  
                dibujo.drawImage(torso.imagen, torso.x, torso.y);  
            }          
  
            if(this.intentos >2){  
                //Intentos == 3 --> brazos  
  
                brazos = new parteCuerpo();  
                brazos.imagenURL = "hangMan/brazos.png";  
  
                brazos.imagen = new Image();  
                brazos.imagen.src = brazos.imagenURL;  
  
                brazos.imagen.onload = function(){  
                    dibujo.drawImage(brazos.imagen, brazos.x, brazos.y);  
                }  
                  
                if(this.intentos >3){  
                    //Intentos == 4 --> piernas  
  
                    piernas = new parteCuerpo();  
                    piernas.imagenURL = "hangMan/pantalon.png";  
  
                    piernas.imagen = new Image();  
                    piernas.imagen.src = piernas.imagenURL;  
  
                    piernas.imagen.onload = function(){  
                        dibujo.drawImage(piernas.imagen, piernas.x, piernas.y);  
                    }      
                                          
                    if(this.intentos > 4){  
                        //Intentos == 5 --> ojos muertos  
  
                        cabezaMuerta = new parteCuerpo();  
                        cabezaMuerta.imagenURL = "hangMan/cabeza_dead.png";  
  
                        cabezaMuerta.imagen = new Image();  
                        cabezaMuerta.imagen.src = cabezaMuerta.imagenURL;  
  
                        cabezaMuerta.imagen.onload = function(){  
                            dibujo.drawImage(cabezaMuerta.imagen, cabezaMuerta.x, cabezaMuerta.y);  
                        }                  
                    }              
                }  
            }  
        }  
    }  
}  
  
  
Ahorcado.prototype.trazar = function(){  
    this.intentos++;  
  
    if(this.intentos >= this.maximo){  
        this.vivo = false;  
    }  
    this.dibujar();  
}  
  
function iniciar() {  
    var canvas= document.getElementById("c")  
    canvas.width = 500;  
    canvas.height = 400;  
    var contexto = canvas.getContext("2d");  
    hombre = new Ahorcado(contexto);  
    //hombre.trazar();  
    //hombre.trazar();  
    //hombre.trazar();  
    //hombre.trazar();  
    //hombre.trazar();  
}

Ricarp

student•

no entiendo para NADA el uso de 'this', alguien podria explicarmelo? por favor

Emilio Puljiz

student•

Puede que sea un poco complicado de entender al principio pero luego cuando vas practicando te familiarizas un poco mas.
Lo que debes de tener en cuenta y centrarte en la idea del ÁMBITO en el que te encuentras ejemplo

//Esto es un ámbito global
var nombre = "Rakata";

//Esto es el ámbito de Mascota
var Humano = function() {
this.nombre = "Ricarp";
};
// Esto es otro ámbito Arbol
var Arbol = function(){
this.nombre = "Quebracho";
};

//Instanciamos los objetos
var quebracho = new Arbol();
var persona = new Humano();

//ahora bien... si tu haces lo siguiente lo que obtienes es el nombre de la variable global.
console.log(nombre);

//si hago ahora lo siguiente voy a obtener los nombres de cada objeto creado
console.log(quebracho.nombre);
console.log(persona.nombre);

hasta ahi si lo pruebas funcionara perfecto.... pero si hacemos lo sigiuiente ahora borras todo tu js y pruebas lo siguiente

//Esto es un ámbito global
var nombre = "Rakata";

//Esto es el ámbito de Mascota
var Humano = function() {
var nombre = "Ricarp";
};
// Esto es otro ámbito Arbol
var Arbol = function(){
var nombre = "Quebracho";
};
//Instanciamos los objetos
var quebracho = new Arbol();
var persona = new Humano();

//ahora bien... si tu haces lo siguiente lo que obtienes es el nombre de la variable global.
console.log(nombre);

//si hago ahora lo siguiente voy a obtener undefined porque no existe la variable nombre
//en los ambitos de las clases, y lo que te imprime aquí es undefined.

console.log(quebracho.nombre);
console.log(persona.nombre);

Entonces this.variable_name esto es posible que al instanciar puedas obtener valores de esta variable y que no aparezca como undefined

Jose Rios

student•

Me encantó este proyecto! Gracias Freddy por tanto

Javier Aquino

student•

Hola, acabo de tomar los cursos de "Git & GitHub" y este de "Programación Básica" ambos muy buenos cursos. Aquí les dejo el repositorio del juego Ahorcado y el link donde lo pueden ver funcionando.

Repositorio:

Jugar:

Saludos.

Javier Aquino

student•

Muy interesante toda la documentación que se encuentra en Internet, por ejemplo las formas de recorrer los arreglos:

// Para rrecorrer un array teniendo teniendo el valor y el indice en cada iteracción.  
arreglo.forEach( function(item, indice) { ..codigo... });

Daniel Herrera

student•

cuando intenta dibujar el poste js me dice que hay un error en dibujo.beginPath(); que no se puede leer y no entiendo porque

Mauro Gómez Herrera

student•

//Coloca ésto en la función iniciar

var hombre = new Ahorcado(contexto);

Jose

student•

quitale el "var" antes de hombre

Tatiana María Tobón Arteaga

student•

Hola,

Les comparto hasta el momento, el dibujo sencillo del ahorcado, con la generación del underline, de acuerdo a la palabra secreta.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8"/>

    <title>Ahorcado</title>

    <link  /css?family=Indie+Flower' rel='stylesheet' type='text/css'>

    <script type="text/javascript"  "></script>

    <style type="text/css">

        body{ text-align: center}

    </style>

  </head>

  <body>

      <h1 style="text-align: center; font-family: 'Indie Flower', cursive;">Ahorcado!!!</h3>

      <div id="result" style="text-align: center;"></div>

      <canvas style="text-aling: center;" id="tableroAhorcado"></canvas>

      <p style="text-align: center; font-family: 'Indie Flower', cursive; font-size: 18px;">

        Ingresa la letra:

          <input type="text" id="inputLetra">

          <input type="button" id="btnJugar" value="Jugar!!!">

      </p>

      <script type="application/javascript">iniciar();</script>

  </body>

</html>

var palabraSecreta = "triangulo";

var Ahorcado = function(contexto, palabraSecreta){

 xto = contexto;

 tentos = 5;

 tos = 0;

  = true;

 raSecreta = new PalabraSecreta(contexto, palabraSecreta);

 ar();

PalabraSecreta = function(contexto, palabra){

 xto = contexto;

 ra = palabra;

 rPalabraSecreta();

 rPalabraSecreta = function(){

    var dibujo =  xto;

    var puntoInicial = 20;

    var puntoFinal = 20;

h);

    for(var i = 0; i <  h; i++){

 Path();

 o(puntoInicial, 250);

 o(puntoInicial + puntoFinal, 250);

 idth = 2;

 eStyle = "#000000";

 e();

 Path();

        puntoInicial += 30;

 ar = function (){

    var dibujo =  xto;

 Path();

 o(400, 75);

 o(400, 50);

 o(550, 50);

 o(550, 350);

 idth = 7;

 eStyle = "#000000";

 e();

 Path();

 tos > 0){

 tos == 1){

 rAhorcado(400, 105, null, null, 1, 30);

        }else  tos == 2){

 rAhorcado(400, 135, 400, 255, 2, null);

        }else  tos == 3){

 rAhorcado(400, 135, 370, 175, 2, null);

 rAhorcado(400, 135, 430, 175, 2, null);

        }else  tos == 4){

 rAhorcado(400, 255, 375, 300, 2, null);

 rAhorcado(400, 255, 425, 300, 2, null);

        }else  tos == 5){

 rAhorcado(380, 105, null, null, 3, "X");

 rAhorcado(410, 105, null, null, 3, "X");

 r = function(){

 tos ++;

 tos >=  tentos){

  = false;

 HTML = "<span style='font-family: Indie Flower, cursive; font-size: 35px; color: red;'>¡¡¡Perdiste!!!</span>";

 ar();

 rAhorcado = function(xInicial, yInicial, xFinal, yFinal, tipoDibujo, valorDibujo){

    var contextoDibujo =  xto;

 Path();

    if(tipoDibujo == 1){ //Circulos

 (xInicial, yInicial, valorDibujo, 0,   * 2, false);

 eStyle = "red";

 idth = 2;

    }else if(tipoDibujo == 2){ //Lineas

 o(xInicial, yInicial);

 o(xFinal, yFinal);

 eStyle = "red";

 idth = 2;

    }else if(tipoDibujo == 3){ //Texto

  = "12px Comic Sans MS";

 idth = 2;

 eText(valorDibujo, xInicial, yInicial);

 e();

 Path();

function iniciar(){

    var canvas =  ementById("tableroAhorcado");

  = 600;

 t = 400;

    var contexto =  ntext("2d");

    var hombre = new Ahorcado(contexto, palabraSecreta);

 r();

 r();

 r();

 r();

 r();

Saludos,

Jorge

student•

Tengo problemas con canvas, tengo que modificar el navegador??

Oscar Pérez

student•

Es posible que tu navegador no soporte canvas, usa las versiones finales de Chrome (no fallan) o posiblemente estés haciendo algo mal en tu código.

Luis Fernando Javier Morales Moreno

student•

les dejo mi tarea.
HTML:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title>Ahorcado</title>  
        <script type="text/javascript" src="ahorcado.js"></script>  
        <style>  
            body{  
                text-align: center;      
            }              
        </style>  
    </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="campo_palabra"></h2>  
        <canvas id="c"></canvas>  
        <script type="text/javascript">  
            iniciar();  
        </script>  
    </body>  
</html>

JavaScript:

var palabras = ["Tamarindo", "Almeja", "Elefante", "Jamaica", "Concepto", "Juego", "Adivina", "Colaborador", "Soporte", "Piedra", "Video"];  
var hombre;  
var palabra = palabras[Math.floor( Math.random() * (10 - 0 + 1) + 0)];  
palabra = palabra.toUpperCase();  
var cadena = new Array((palabra.length - 1));  
  
var Ahorcado = function(con){  
    //this son las variables locales 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 = 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 = "#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++;  
    this.dibujar();  
    if(this.intentos >= this.maximo){  
        this.vivo = false;  
        alert("Estás Muerto!!");  
        location.reload();  
    }  
}  
  
function insertaEspacios(){  
    for(i = 0; i <= (palabra.length - 1); i++){  
        cadena[i] = "_"  
    }  
    imprimeCadena();  
}  
  
function imprimeCadena(){  
    var cadenaFinal = "";  
    for(i=0; i<cadena.length; i++){  
        cadenaFinal += cadena[i];  
        cadenaFinal += " ";  
    }  
    campo_palabra.innerText = cadenaFinal;  
}  
  
function iniciar(){  
    var canvas = document.getElementById("c");  
    canvas.width = 500;  
    canvas.height = 400;  
    var contexto = canvas.getContext("2d");  
    hombre = new Ahorcado(contexto);  
  
    //Datos obtenidos por la interaccion con el usuario  
    document.getElementById('letra').focus();  
    b = document.getElementById("boton");  
  
    //si precionan el boton se ejecuta la funcion buscaLetra  
    b.addEventListener("click", buscaLetra);  
  
  
    insertaEspacios();  
}  
  
function buscaLetra(){  
    letra = document.getElementById("letra");  
    letraSeleccionada = letra.value.toUpperCase();  
    var coincidencia = false;  
    if(letraSeleccionada.length > 1){  
        alert("Solo puedes seleccionar un letra por turno");  
    }else if(letraSeleccionada.length == 0){  
        alert("No seleccionaste ni una sola letra, tienes que elegir una");  
    }else{  
        var puntero;  
        for(puntero in palabra){  
            if(letraSeleccionada == palabra[puntero]){  
                cadena[puntero] = letraSeleccionada;  
                coincidencia = true;  
            }  
        }  
        if(coincidencia == true && hombre.vivo == true){  
            if(cadena.indexOf("_") == -1){  
                imprimeCadena();  
                alert("Eres un Ganador!!!");  
                location.reload();  
            }else{  
                imprimeCadena();  
            }  
        }else{  
            hombre.trazar();  
        }  
    }  
    letra.value = "";  
    letra.focus();  
}

Luis Carlos Enrique Herrera Santos

student•

en los dibujos me parecio mas facil realizando funciones, y en las piernas y los brazos como tienen el mismo diseno solo se nesecito una funcion que dijera donde es el punto de apertura.
var cara = function (dibujo)
{
dibujo.beginPath();
dibujo.arc(150, 130, 30, 0, Math.PI * 2, false);
dibujo.lineWidth = 5;
dibujo.strokeStyle = "red";
dibujo.stroke();
dibujo.closePath();
}
var torso = function (dibujo)
{
dibujo.beginPath();
dibujo.moveTo(150, 160);
dibujo.lineTo(150, 220);
dibujo.lineWidth = 5;
dibujo.strokeStyle = "red";
dibujo.stroke();
dibujo.closePath();
}

var extremidades = function (dibujo, ini)
{
dibujo.beginPath();
dibujo.moveTo(150, ini);
dibujo.lineTo(130, ini+50);
dibujo.moveTo(150, ini);
dibujo.lineTo(170, ini+50);
dibujo.lineWidth = 5;
dibujo.strokeStyle = "red";
dibujo.stroke();
dibujo.closePath();
}

Edgar Marcel Turizo Poveda

student•

por alguna razón, cuando utilizo dibujo.beginPath(); me sale que no esta definida

Oscar Pérez

student•

Muestra tu código para ayudarte.

Dibujo de un ahorcado usando Canvas

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