Sesión de preguntas y respuestas

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

Sergio Mendoza Gomez

student•

continua publicacion abajo

Gracias platzi por mejorar mi tecnica y conocimientos profesionales.
Comparto con la comunidad mi Tarea del Juego del Ahorcado con imagen,este ejercicio utiliza los conocimientos adquiridos hasta el momento en Platzi, tal como variables, funciones, clases, Lee archivo JSON, aleatorio, matrices, canvas, etc

No usa jQuery, solo javascript

saludos :)
Animoooooooooo! a seguir practicando y aprendiendo..

http://avenida.com.mx/curplat/ahorca/ahorca.html

ahorca.json  
[{"palabra":"escuela"}, {"palabra":"sistemas"}, {"palabra":"android"}, {"palabra":"surfing"}, {"palabra":"california"}, {"palabra":"soldado"}]

n numero de palabras a enviar al juego del ahorcado simpson

Este archivo se sube a un arreglo dinamico que contiene las palabras a adivinar
saludos

Blanca Segura Garcia

student•

Muy bonito ...

Arturo Téllez Ramírez

student•

alguien sabrá por que no funciona mi código, estoy tratando de optimizarlo y creo que no estoy pasando bien los parametros de función en función

function imaCreate(xP, yP, vI, iURL, bLoad)  
{  
    this.x = xP;  
    this.y = yP;  
    this.v = vI;  
    this.mURL = [["img/fondo.png"],  
                    ["img/diana-frente.png", "img/diana-atras.png", "img/diana-der.png", "img/diana-izq.png"],  
                    ["img/liz.png"]  
                   ];  
    this.imagenURL = this.mURL[iURL][0];  
    this.imgenLoad = bLoad;  
    this.confirmarImg = function ()  
    {  
        this.imagenLoad = true;  
        if(this.imagenLoad)  
        {  
            dibujarImg(this.imagenURL, this.x, this.y);  
        }  
        //console.log(this.imagenLoad);  
    }  
}  
function inicio()  
{  
    var imgFondo = new imaCreate(0, 0, 0, 0, false);  
    imgFondo.imagen = new Image();  
    imgFondo.imagen.src = imgFondo.imagenURL;  
    imgFondo.imagen.onload = imgFondo.confirmarImg();  
}  
function dibujarImg(iP, xP, yP)  
{  
    var imgRuta = iP;  
    var x = xP;  
    var y = yP;  
    var tablero;  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
    tablero.drawImage(imgRuta, x, y);  
}

Yesid Ghisays

student•

ya inspeccionaste el codigo en la consola?

Joel Gonzales Tipismana

student•

en f12 en consola te deberia salir un link de error fijate por alli ;)

Rodrigo Alarcon

student•

Que aburrido que el 80% del vídeo tengas que estar explicando lo del pago....

Cesar David Ramírez Dimaté

student•

Jajaja lo hace porque todos en el chat empiezan a preguntar de lo mismo...

Angel Loera

student•

http://http//ahorcadolz.esy.es/

Mi juego de Ahorcado terminado y re diseñado. tienen que probarlo!

Andrés Domínguez

student•

Lo he probado amigo, pero te hago unas observaciones, no soy el mas profesional en esto pero me di cuenta que no tengo una pista de lo que es, por ende no puedo intntar buscar una respuesta, deberias dar pistas.
Otra cosa es que me dijo que era un ganador aunque no lo fuera...
Saludos

Sergio Mendoza Gomez

student•

No usa jQuery, solo javascript

saludos :)
Animoooooooooo! a seguir practicando y aprendiendo..

http://avenida.com.mx/curplat/ahorca/ahorca.html

ahorca.html  
<!DOCTYPE  html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <title>JUEGO DEL AHORCADO</title>  
      
    <style type = "text/css">  
      body{  
        background-color: #01DFD7;  
        height: 250px;  
        margin: auto;  
        width: 300px;  
      }  
    </style>  
    <script type= "text/javascript" src="ahorca.js"></script>  
  
    <!--  
         Sergio Mendoza Gomez  
         #soy mejorando.la#    Fecha 20-04-2016  
      
    Este ejercicio utiliza los conocimientos adquiridos hasta el momento en Platzi, tal como variables, funciones, clases, Lee archivo JSON, aleatorio, matrices, canvas, etc  
  
    No usa jQuery, solo javascript  
  
    -->  
  </head>  
  <!--  -  
  
  Se usa en el <body onload="hombre.LlenaPistaIni()"> del documento para asegurarse de que ya se cargo totalmente el documento  
  Ya se tienen datos importantes como palabraAdivinar.length disponibles  
  Como no se usa jQuery , solo es javascript se hizo de esta manera.  
  
  -->  
  <body onload="hombre.LlenaPistaIni()">  
    <h1>JUEGO DEL AHORCADO</h1>  
    <h2>SIMPSON</h2>  
    <canvas id="canvas"></canvas>  
    <p>Elige una letra y pulsa OK!:  
        <input type="text" id="l"/>  
        <input type="button" id="boton" value="OK!"/>  
    </p>  
    <h2 id= "pista" value= " "></h2>  
      
  
    <script type="text/javascript">  
      // Llama a la funcion iniciar  
      // Lamentablemente en este punto aun no carga el documento y algunos valores importantes  
      // que se necesitan no estan disponibles  
      iniciar();  
        
    </script>  
  </body>  
</html>

ahorca.js  
// Alumno en Platzi: Sergio Mendoza Gomez  
// #soy mejorando.la#  
// 20-04-2016  
  
var palabra = [];  
var palabraAdivinar = "x";  
var espacio = [];  
var hombre, dibujo;  
var dibujar = {};  
  
// Declaracion de la clase ahorcado  
var Ahorcado = function(con){  
  //this son las instancias o variables de 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();  
}  
  
  
// Metodo dibujar de la clase Ahorcado  
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);  
              }  
            }  
          }  
        }  
      }  
    }  
  }  
}  
  
// Metodo trazar de la clase Ahorcado  
Ahorcado.prototype.trazar = function(){  
  this.intentos++;  
  if(this.intentos >= this.maximo){  
    this.vivo = false;  
  
  }  
  this.dibujar();  
}  
  
// Metodo LlenaPistaIni de la clase Ahorcado  
// Sirve para inicializar pista y rellenar arreglo espacio con la longitud de la palabra a adivinar  
// Se usa en el <body onload="hombre.LlenaPistaIni()"> del documento para asegurarse de que ya se cargo totalmente el documento  
// Y ya se tienen datos importantes como palabraAdivinar.length disponibles  
// Como no se usa jQuery , solo es javascript se hizo de esta manera.  
Ahorcado.prototype.LlenaPistaIni = function(){  
  var pista = document.getElementById("pista");  
  
  var texto = "";  
  //alert(palabraAdivinar.length);  
  for (var i = 0; i < palabraAdivinar.length; i++){  
    if(espacio[i] != undefined){  
        texto += espacio[i] + " ";  
    }  
    else{  
       texto += "_ "  
    }  
    pista.innerText = texto;  
  }  
    
  for (var i = 0; i < palabraAdivinar.length; i++){  
     if(espacio[i] != undefined){  
    }  
    else{  
       espacio[i]= "_";  
    }  
  
  
  }  
}    
  
// Funcion de Inicio en documento  
function iniciar(){  
  ajax_get_json();  
  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("l");  
  var b = document.getElementById("boton");  
  espacio = new Array (palabraAdivinar.length);  
    
  boton.addEventListener("click", function(){  
    agregarletra(l);  
  });  
  hombre.LlenaPistaIni();  
  mostrarPista();  
}  
  
// Funcion para agregar letra  
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);  
  }  
}  
  
// Funcion para mostrar Palabra  
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  
  }  
}  
  
// Funcion para mostrar la pista  
function mostrarPista(){  
  var pista = document.getElementById("pista");  
  
  var texto = "";  
  for (var i = 0; i < palabraAdivinar.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);  
  }  
}  
  
  
// Funcion que obtiene las palabras de un archivo json y las guarda en un arreglo  
function ajax_get_json(){  
    var hr = new XMLHttpRequest();  
    hr.open("GET", "ahorca.json", true);  
    hr.setRequestHeader("Content-type", "application/json",true);  
    hr.onreadystatechange = function() {  
        if(hr.readyState == 4 && hr.status == 200) {  
           var data=JSON.parse(hr.responseText);  
  
            data.forEach( function( item ) {  
              palabra.push(item.palabra);    
            });  
  
            numero = Math.floor(Math.random() * (palabra.length - 1) + 1);  
            palabraAdivinar = palabra[numero];  
            palabraAdivinar = palabraAdivinar.toUpperCase();  
  
        }  
    }  
    hr.send(null);  
    status.innerHTML = "procesando...";  
}  
  
// Funcion que llena a la izq con un caracter  
function pad (str, max) {  
    str = str.toString();  
    return str.length < max ? pad("0" + str, max) : str;  
}

Animoooooooooo! a seguir practicando y aprendiendo..

Roberto Prince

student•

Te quedo hermoso, eres genial

Eduardo Linarte

student•

Está genial tu ejercicio, tu posiblemente me puedas asesorar, seguí tu método para mostrar las imágenes que están en mi carpeta en la pc, pero hay veces que al recargar la página del navegador se muestran las imágenes en otro orden, o no se cargan. será por la programación?

var palabra = "Tamarindo";

var hombre;

var dibujo;

var fondo = {

imagenURL:"fondo_armado.png",

imagenOK: false

};

//Declaración de la clase ahorcado

var Ahorcado = function(con)

{

// this es las variables locales de la clase, accesible 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;

dibujo.fondo = new Image();

dibujo.fondo.src = "fondo_armado.png";

dibujo.fondo.onload = dibujoFondo;

function dibujoFondo()

{

dibujo.drawImage(dibujo.fondo, 0, 0);

}

// 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 = "#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 = "#F00";

// dibujo.lineWidth =5;

// dibujo.stroke();

// dibujo.closePath();

dibujo.cabeza = new Image();

dibujo.cabeza.src = "cabeza_pena.png";

dibujo.cabeza.onload = dibujoCabeza;

function dibujoCabeza ()

{

dibujo.drawImage(dibujo.cabeza, 40, 90);

}

dibujo.soga = new Image();

dibujo.soga.src = "la-soga.png";

dibujo.soga.onload = dibujoSoga;

function dibujoSoga ()

{

dibujo.drawImage(dibujo.soga, -20, -20);

}

//Dibujando el torzo

if (this.intentos >1)

{

dibujo.torzo = new Image();

dibujo.torzo.src = "cuerpo.png";

dibujo.torzo.onload = dibujoTorzo;

function dibujoTorzo ()

{

dibujo.drawImage(dibujo.torzo, 70, 200);

}

// dibujo.beginPath();

// dibujo.moveTo(150, 180);

// dibujo.lineTo(150, 250);

// dibujo.strokeStyle= "red";

// dibujo.stroke();

// dibujo.closePath();

// Dibujando los brazos

if (this.intentos > 2)

{

dibujo.brazos = new Image();

dibujo.brazos.src = "brazos.png";

dibujo.brazos.onload = dibujoBrazos;

function dibujoBrazos()

{

dibujo.drawImage(dibujo.brazos, 40, 200);

}

// dibujo.beginPath();

// dibujo.moveTo(120,220);

// dibujo.lineTo(150, 180);

// dibujo.lineTo(180, 220);

// strokeStyle = "red";

// dibujo.stroke();

// dibujo.closePath();

if (this.intentos > 3)

{

dibujo.piernas = new Image();

dibujo.piernas.src = "piernas.png";

dibujo.piernas.onload = dibujoPiernas;

function dibujoPiernas()

{

dibujo.drawImage(dibujo.piernas,60, 300);

}

// dibujo.beginPath();

// dibujo.moveTo(120,290);

// dibujo.lineTo(150, 250);

// dibujo.lineTo(180, 290);

// strokeStyle = "red";

// dibujo.stroke();

// dibujo.closePath();

if (this.intentos > 4)

{

dibujo.final = new Image ();

dibujo.final.src = "cara_final.png";

dibujo.final.onload = dibujoFinal;

function dibujoFinal ()

{

dibujo.drawImage(dibujo.final, 0, 70)

}

// // Dibujando ojos

// // Ooj 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.stroke();

// dibujo.closePath();

}

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 = 500;

canvas.height = 400;

var contexto = canvas.getContext("2d")

hombre = new Ahorcado(contexto);

hombre.trazar();

// hombre.trazar();

}

MariaAlejandra

student•

por que no me funciono innerText y si me funciono innerHMLT

Oscar Stevens Cuartas Bejarano

student•

la gente se preocupa por la certificacion aunque no es lo importante para uno como formacion personal, pero el mundo y los empresarios no entienden eso

Camilo Caicedo Rivas

student•

hola tengo una duda quiero suscribirme al plan anual, pero mi novia quiere tomar el de marketing digital, puedo usar mi membresia para que ella lo tome y haga el examen de certificación?

Andrés Domínguez

student•

Claro que se puede, mas sin embargo creo que el Certificado llegará a nombre tuyo

Ricardo Diez

student•

Ne le habia entendido el sentido de los prototype hasta ahora! que genial! corriganme si no estoy en lo cierto pero hasta donde comprendí es la forma como javascript maneja las herencias , que brutal este curso

Alex Xavier Yépez Chávez

student•

Es un concepto mas utilizado en los lenguajes orientado a objetos, pero la característica de prototype no es hacer herencias, mas bien es manipular las propiedades de una clase, recordemos que en el contexto general solo trabajamos con una clase en especifico.

Diego Paredes Arenas

student•

Alguien sabe por qué con el siguiente código si escribo en consola: hombre.trazar() me funciona, pero si llamo la misma función en mi código o a través de un botón no me sirve?

Les agradecería mucho una mano para entender esto.

var palabra = "tamarindo";  
  
var canvas = document.getElementById("c");  
canvas.width=500;  
canvas.height=400;  
//contexto variable de ambito diferente a las demás  
var contexto = canvas.getContext("2d");  
  
var Ahorcado = function(con)  
{  
    this.contexto=con;  
    this.maximo=5;  
    this.intentos=0;  
    this.vivo=true;  
    this.cabeza=new Image();  
    this.urlcabeza="cabeza.png";  
    this.torzo=new Image();  
    this.urltorzo="torzo.png";  
    this.brazos=new Image();  
    this.urlbrazos="brazos.png";  
    this.piernas=new Image();  
    this.urlpiernas="piernas.png";  
    this.paila=new Image();  
    this.urlpaila="paila.png";  
  
}  
  
var hombre = new Ahorcado(contexto);  
  
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=3;  
    dibujo.strokeStyle="black";  
    dibujo.stroke();  
    dibujo.closePath();  
  
  
  
  
    if (this.intentos > 0)  
         {  
             //intentos = 1 ...> rostro  
             this.cabeza.onload=this.dibujar;  
             dibujo.drawImage(this.cabeza,120,100);  
  
             if(this.intentos > 1)  
             {  
                 this.torzo.onload=this.dibujar;  
                 dibujo.drawImage(this.torzo,135,150);  
  
                 if(this.intentos > 2)  
                 {  
                     this.brazos.onload=this.dibujar;  
                     dibujo.drawImage(this.brazos,130,158);  
  
                     if(this.intentos > 3)  
                     {  
                         this.piernas.onload=this.dibujar;  
                        dibujo.drawImage(this.piernas,123,191);  
                     }  
  
                         if(this.intentos > 4)  
                         {  
                             //ojo 1  
                         this.paila.onload=this.dibujar;  
                        dibujo.drawImage(this.paila,120,100);  
                             //ojo 2  
                         }  
  
                 }  
  
             }  
  
         }  
  
    if(this.vivo==false)  
    {  
        alert("has muerto tío :s");  
    }  
  
}  
  
Ahorcado.prototype.trazar=function()  
{  
    this.intentos++;  
    if(this.intentos >= this.maximo)  
    {  
        this.vivo=false;  
    }   
    this.dibujar();  
}  
  
hombre.cabeza.src=hombre.urlcabeza;  
hombre.torzo.src=hombre.urltorzo;  
hombre.brazos.src=hombre.urlbrazos;  
hombre.piernas.src=hombre.urlpiernas;  
hombre.paila.src=hombre.urlpaila;  
  
hombre.dibujar();  
  
var botton=document.getElementById("boton");  
botton.addEventListener("click", hombre.trazar);

Diego Paredes Arenas

student•

Ya lo resolví, sólo debía cambiar los "this" de la función trazar, por el objeto "hombre" :)

Adriana Villalobos

student•

Hola! Tengo horas batallando con esto y aun tengo 2 problemas:

El fondo se pone por encima del hombre y
No puedo ejecutar hombre.trazar(); desde la consola, porque al parece hombre no está definido... no obstante lo demás parece funcionar.
Alguien que me aclare por favor qué me está fallando. Mil gracias!

var palabra = "Tamarindo";  
var hombre;  
var fondo = {  
    x:150,  
    y:0,  
    location: "images/fondo.png"  
};  
var cabeza = {  
    x:100,  
    y:100,  
    location: "images/cabeza.png"  
};  
var torso = {  
    x:122,  
    y:212,  
    location: "images/tronco.png"  
}  
;  
var brazos = {  
    x:51,  
    y:213,  
    location: "images/brazos.png"  
}  
;  
var piernas = {  
    x:95,  
    y:341,  
    location: "images/piernas.png"  
};  
var muerto = {  
    x:100,  
    y:100,  
    location: "images/cabeza-muerto.png"  
};  
  
  
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;   
      
//Dibujando el fondo  
    fondo.imagen = new Image();  
    fondo.imagen.onload = function() {  
        dibujo.drawImage(fondo.imagen, fondo.x,fondo.y);  
    };  
    fondo.imagen.src = fondo.location;  
  
  
  
    if(this.intentos > 0) {  
        //intentos = 1 --> rostro  
        cabeza.imagen = new Image();  
        cabeza.imagen.onload = function() {  
            dibujo.drawImage(cabeza.imagen, cabeza.x,cabeza.y);  
    };  
        cabeza.imagen.src = cabeza.location;  
  
        if(this.intentos > 1) {  
        // intentos = 2 --> torso  
            torso.imagen = new Image();  
            torso.imagen.onload = function() {  
                dibujo.drawImage(torso.imagen, torso.x,torso.y);  
        };  
            torso.imagen.src = torso.location;  
  
            if(this.intentos > 2) {  
            // intentos = 3 --> brazos  
                brazos.imagen = new Image();  
                brazos.imagen.onload = function() {  
                    dibujo.drawImage(brazos.imagen, brazos.x,brazos.y);  
    };  
                brazos.imagen.src = brazos.location;  
  
  
  
            if(this.intentos > 3) {  
            // intentos = 4 --> piernas  
                piernas.imagen = new Image();  
                piernas.imagen.onload = function() {  
                    dibujo.drawImage(piernas.imagen, piernas.x,piernas.y);  
            };  
                piernas.imagen.src = piernas.location;  
  
  
  
                if(this.intentos > 4) {  
                // intentos = 5 --> ojos muertos  
                    muerto.imagen = new Image();  
                    muerto.imagen.onload = function() {  
                        dibujo.drawImage(muerto.imagen, muerto.x,muerto.y);  
                };  
                    muerto.imagen.src = muerto.location;  
  
        }  
  
  
        }  
  
  
        }  
  
        }  
    }  
}  
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 = 600;  
    var contexto = canvas.getContext("2d");  
  
      
    var hombre = new Ahorcado(contexto);  
  
    hombre.trazar();  
    hombre.trazar();  
    hombre.trazar();  
    hombre.trazar();  
    //hombre.trazar();  
}

Adriana Villalobos

student•

Aquí se ve un screenshot del browser: https://drive.google.com/file/d/0B__cAHO8CegCV2VaQlFYQW9NYWM/view?usp=sharing

Henry Eduardo Hilario Rojas

student•

hola lograste resolver el problema que tenias sobre el fondo, colocarlo atras?

Yefferson Caicedo

student•

como conecto el codigo de mi js, a el voxel dron de github?

Edgardo Raúl Galletto

student•

Es genial este curso!

Jhon Carlos Colorado Angulo

student•

Ok estuvo excelente la sesión de pregunta y respuestas.

Carlos Manuel Garcia Rodriguez

student•

¿Algún día pondran cursos de C para aprender algo de robotica? o solo web?

dgchars

student•

disculpa freeddy nunca resolviste mi pregunta en cuando los de backon.js y la verdad no me haz quitado igual la duda de ntl child: la ultima ves me comentastes que si nos portabamos bien nos hibas decir y me quede esperando o quiero un reembolso

Yefferson Caicedo

student•

en donde puedo aprender Ajax?

Spoke Lopez

student•

http://librosweb.es/libro/ajax/ este libro es muy bueno

Eduardo Lemus Zavala

student•

prototype es la forma correcta de crear objetos en JavaScript

Eduardo Lemus Zavala

student•

canvas no soporta imagenes .gif, como alternativa podemos utilizar una secuencia de imagenes implementando hilos.

Leopoldo Brines

student•

Super optimizable el codigo, pero quien hace un SUPER codigo en vivo? nadie. Excelentes clases :D

Sesión de preguntas y respuestas

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