Creando el juego del Ahorcado

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

Otto

student•

Más allá de que este no es un curso sobre HTML5 y CSS3, les dejo un HTML con algunos retoques que lo hacen un poco atractivo.<!DOCTYPE html>

<html> <head> <meta charset="utf-8" /> <title>Ahorcado</title> <style type="text/css"> body{ background-color: #008822; text-align: center; } #contenedor{ background-color: #eeee66; margin: 0 auto; width: 400px; height: 550px; border: 6px solid black; } canvas{ width: 300px; height: 250px; border: 3px solid black; } #pista{ color: #008822; font-size: 2em; } </style> <script type="text/javascript" src="ahorcado.js"></script> </head> <body> <div id="contenedor"> <h1>Ahorcado</h1> <p>Adivina letra a letra</p> <canvas id="c"></canvas> <h2 id="pista">\_ \_ \_ \_ \_ \_ \_ \_ \_</h2> <p> Elige una letra: <input type="text" id="letra" /> <input type="button" id="boton" value="¡Suerte!" /> </p> <h2 id="resultado"></h2> </div> <script type="text/javascript"> inicio(); </script> </body> </html>

Santiago Avellaneda

student•

Interesante el aporte :)

Jhon Gomez

student•

programar es dividir el problema y solucionar cada uno

Pablo Carrillo Garcia

student•

¿Alguien sabe cual es la extensión que usa freddier en el minuto 10:58? En laque se ven unas reglas enlos amrgenes del navegador.

Alexander Ballera

student•

En "inspect element" de Google Chrome hay un icono como de un phone, que te permite ver los diferentes modelos y cómo se ve la página en cada modelo de smartphone, tablet, laptop o ipad

Santiago Avellaneda

student•

Para ver el modo de desarrollo puedes hacer clic con el botón derecho en chrome y clic en inspeccionar, o presiona f12, haciendo clic en el celular de la prate inferior izquierda obtienes esta vista y es posible obtener una vista previa aproximada de cómo funcionaría la web en un dispositivo móvil, y en la parte superior puedes emular distintos SmartPhones o tablets o dimensiones de pantalla, recuerda es un aproximado, saludos !

Blanca Segura Garcia

student•

Freddier, me gusta la forma como "visualizas" la programación. Lo haces muy bien que solamente por reír de las ocurrencias espontáneas, los veo dos veces ;-)

Eduardo Lemus Zavala

student•

Programar es partir un problema y partirlo en micro problemas

edwin Fabian Luna Pardo

student•

ay que aprender a dividir los problemas en diferentes puntos para poder programarlos

Santiago Avellaneda

student•

Claro que si, correcto, es necesario y así evitar el clásico problema con los clientes que piden muuuchos cambios, si se define desde el comienzo la funcionalidad, bases de datos, tooodo. Te ahorrarás mucho tiempo, por lo tanto le dedicarás mucho menos tiempo a un proyecto que te paguen, por lo tanto ganarás más, por lo tanto tendrás más dinero, por lo tanto estarás muuuuucho mejor pago y trabajarás de forma más profesional :)

Eduardo Lemus Zavala

student•

Basicamente hay que aprender a dividir los problemas en diferentes puntos para poder programarlos...

Erick Orlando Velasco Martínez

student•

Se ve interesante el jueguito, ya tengo una idea más clara, pero ahora lo veré en acción.

Juan Alexander Rodríguez Pérez

student•

Donde está el archivo prototype que dice Freddy comenzando el vídeo?

David Flores

teacher•

es algo así:

<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> </title> <script type="text/javascript"> //las clases inician con mayuscula del que derivan otros objetos //todos los objetos de tipo mascota ponganle un metodo que se llame hablar para eso se usa el prototype //atributos-- variables de una clase //metodos -- funciones de una clase //gracias a prototype podemos usar las variables que tiene la clase en el prototype

var Mascota = function(n, v)
{
this. nombre = n;
this.voz = v;
}

Mascota.prototype.hablar = function()
{
alert(this.nombre + " dice: " +this.voz);
}

var perro = new Mascota("roco", "guau!");
var gato = new Mascota("misifus", "miau!");
perro.hablar();
gato.hablar();

</script>

</head> <body> </body> </html>

Joel Buenrostro

student•

Entre mas se avanza, mas se llegan a comprender las clases anteriores

Ḁ̪̻̫̰̭̌ͅbȇ͎̭͎̾̄̄̊l Vilca Quispe

student•

Aun mas interesante...
GaD n_n?

GERARDO VALLADARES

student•

Hola, tengo un problema con mi código. Al momento de generar el evento que graba la palabra el método que cree se ejecuta pero no toma los parámetros de mi objeto juego. Ojalá alguien me pueda ayudar:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>TODO supply a title</title>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <script type="text/javascript" src="ahorcado.js"></script>  
    </head>  
    <body>  
        <div>  
            <h1>Juego ahorcado</h1>  
        </div>  
        <div>  
            <input type="text" id="text1" value="hi">  
            <input type="button" value="Ok" id="boton1">  
            <input type="text" id="char1">  
            <input type="button" value="Ok" id="boton2">  
            <script type="text/javascript">  
                iniciar();  
            </script>  
        </div>  
        <div>  
            <h2 id="mostrar"></h2>  
        </div>  
    </body>  
</html>

//------------------------------------------------------------------------------------------------------------------

var Ahorcado = function () {
this.final = "";
this.palabra = "";
this.error = true;
this.intento = 0;
};

Ahorcado.prototype.comparar = function () {
if (this.palabra == "") {
alert("No ha ingresado ninguna palabra");
} else {
letra = document.getElementById("char1").value;
for (i = 0; i < this.palabra.length; i++) {
if (this.palabra[i] == letra) {
this.final[i] = letra;
error = false;
}
}
alert(final);
}
if (error == true) {
alert("Fallaste");
Ahorcado.dibujar();
error = true;
intento += 1;
}
};

Ahorcado.prototype.setPalabra = function () {
this.palabra = document.getElementById("text1").value;
if (this.palabra == "") {
alert("No ha ingresado ninguna palabra");
} else {
for (i = 0; i < this.palabra.length; i++) {
this.final += "_";
}
}
};

function iniciar() {
var juego = new Ahorcado();
bot1 = document.getElementById("boton1");
bot1.addEventListener("click", juego.setPalabra);
bot2 = document.getElementById("boton2");
bot2.addEventListener("click", juego.comparar);
};

Leonardo Peralta

student•

Algún libro para empezar de 0 js y html5 quiero poder saber todas las tags de ambos y para que me sirven

Santiago Avellaneda

student•

Puedes concoerlos aquí ó aquí más recomendado. Igual en mi opinión aprender toooodo no es necesario, si manejar muchos de ellos y saber su potencial, así llegado el momento de usar algo en un proyecto de empresa o personal puedas estudiar muy poco y manejar otro tag por ejemplo que manejar toooodos ya que es muy mundo gigante, igual en los cursos de Platzi enseñan todo paso a paso, seguro ya tienen cubierta esa parte si haces los otros cursos. Saludos !

Cristian

student•

Jajaja

(•̪●) Andy Mons ㋡

student•

No esta disponible el video :S

(•̪●) Andy Mons ㋡

student•

ya esta disponible

<!DOCTYPE html>  
<html>  
    <head>  
        <title>TODO supply a title</title>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <script type="text/javascript" src="ahorcado.js"></script>  
    </head>  
    <body>  
        <div>  
            <h1>Juego ahorcado</h1>  
        </div>  
        <div>  
            <input type="text" id="text1" value="hi">  
            <input type="button" value="Ok" id="boton1">  
            <input type="text" id="char1">  
            <input type="button" value="Ok" id="boton2">  
            <script type="text/javascript">  
                iniciar();  
            </script>  
        </div>  
        <div>  
            <h2 id="mostrar"></h2>  
        </div>  
    </body>  
</html>

Creando el juego del Ahorcado

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

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

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas

Dibujar con eventos

Preguntas y respuestas

Programando juegos con canvas

Tipos de imágenes

Insertar imágenes en canvas

Dibujo de múltiples imágenes en canvas

Dibujar al enemigo y controlar a Diana

Sesión de preguntas y respuestas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Objetos en JavaScript con Prototype