Dibujo de un ahorcado usando Canvas
Clase 29 de 50 • Curso de Programación Básica 2014
Contenido del curso
Jhon Carlos Colorado Angulo
student•
hace 11 años
Clase 29 de 50 • Curso de Programación Básica 2014
Contenido del curso
Jhon Carlos Colorado Angulo
Cesar David Ramírez Dimaté
Diana Mora
Santiago Avellaneda
Leonel Rosales
Santiago Avellaneda
Juan pablo londoño
David Flores
David Flores
Ernesto Valtierra Galvan
EDUARDO GONZALEZ
Carlos Enrique Rojas Falcone
Anyi Beniamin
J. Carlos Salgado
Emmanuel Crisanto Crisanto
Ricarp
Emilio Puljiz
Jose Rios
Javier Aquino
Javier Aquino
Daniel Herrera
Mauro Gómez Herrera
Jose
Tatiana María Tobón Arteaga
Jorge
Oscar Pérez
Luis Fernando Javier Morales Moreno
Luis Carlos Enrique Herrera Santos
Edgar Marcel Turizo Poveda
Oscar Pérez
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.
Dejo la tarea documentada.
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>
JS
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.
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(); }
Súper el aporte con imágenes, ten tu punto :)
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?
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
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(); }
mi tarea, le puso unos sprites de doom, espero y no este tan mal ;)
listo
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>
js
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(); }
Una pregunta porque todas cierran al final y no cada una independiente?
dibujo.strokeStyle = "blue"; dibujo.lineWidth = 5; dibujo.stroke(); dibujo.closePath(); } } } } } }
porque cada if está dentro de otro if:
if ()
{
if ()
{
if ()
{
....
}
}
}
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>
///////////////////////////////////////////////////////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;
}
Les dejo mi tarea usando imaganes y agregando funciones con prototype.
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(); }
no entiendo para NADA el uso de 'this', alguien podria explicarmelo? por favor
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
Me encantó este proyecto! Gracias Freddy por tanto
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.
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... });
cuando intenta dibujar el poste js me dice que hay un error en dibujo.beginPath(); que no se puede leer y no entiendo porque
//Coloca ésto en la función iniciar
var hombre = new Ahorcado(contexto);
quitale el "var" antes de hombre
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,
Tengo problemas con canvas, tengo que modificar el navegador??
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.
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(); }
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();
}
por alguna razón, cuando utilizo dibujo.beginPath(); me sale que no esta definida
Muestra tu código para ayudarte.