Codigo html Juego Ahorcado


Principio del formulario


Final del formulario
Portada
Monotemáticos
Secciones
Blogging
Comunidad
Wiki
RSS
Usuarios: Login | Registro
DesarrolloWeb.com > Manuales > Manual de Canvas del HTML 5 / Manual de jQueryUI / Taller de HTML5
Juego del ahorcado Javascript con jQuery UI y Canvas del HTML 5
25 de enero de 2011
Compartir en redes sociales
Valoración del artículo:
0 votosEnviar un comentario
Ver comentarios del artículo (3)
< a href="http://www4.smartadserver.com/call/pubjumpi/27965/185875/9727/S/[timestamp]/?" target="_blank">< img src="http://www4.smartadserver.com/call/pubi/27965/185875/9727/S/[timestamp]/?" border="0" alt="" /> < a href="http://www4.smartadserver.com/call/pubjumpi/27965/185875/9509/M/[timestamp]/?" target="_blank">< imgsrc="http://www4.smartadserver.com/call/pubi/27965/185875/9509/M/[timestamp]/?" border="0" alt="" />
Aplicación experimental del juego del ahorcado en Javascript, con jQuery y las librerías jQuery UI y uso del elemento Canvas del HTML 5.
Por Miguel Angel Alvarez
En este artículo voy a presentar una aplicación experimental que he realizado, basada en el popular Juego del ahorcado. Hay personas que disfrutan montandomaquetas de trenes, pero yo soy de los que se entretienen con la programación. Prueba de ello es el siguiente script, que realicé hace meses, únicamente con la intención de probar algunos de los más novedosos juguetitos para desarrolladores, como son jQuery UI o el elemento Canvas.
A pesar que no voy a explicar paso por paso cómo se construyó esta aplicación, me he decidido a escribir esteartículo por si a alguien le interesa conocer una posible implementación del juego del Ahorcado en Javascript. Además, nos servirá de práctica para las personas que están aprendiendo jQuery o el dibujo con el elemento Canvas.
Para empezar, dejo un enlace a la página del juego en funcionamiento, para que los interesados puedan ver el resultado final de esta práctica.
Nota: Para ver el juego enfuncionamiento tendrás que entrar con un navegador medianamente moderno. Por lo menos tiene que ser compatible con el elemento Canvas del HTML 5.
Tecnologías usadas en la aplicación del ahorcado
En este juego del ahorcado hemos usado algunas de las tecnologías más modernas para el desarrollo de webs, las nombramos a continuación.
Framework Javascript jQuery:
Usamos jQuery para simplificar las cosasdurante la programación en Javascript. Puedes aprender en el Manual de jQuery.
Librería jQuery UI:
Las librerías jQuery UI nos sirven para crear diversos componentes de interfaz de usuario avanzados, como botones o cajas de diálogo. Podría hacerse sin estas librerías, igual que también sin el propio jQuery, pero la verdad es que simplifican nuestra vida bastante y nos ayudan a realizar un juegomás atractivo visualmente y facilitan una mejor experiencia de usuario. En DesarrolloWeb.com también puedes aprender jQuery UI.
Canvas del HTML 5:
Utilizamos el componente CANVAS para pintar cada una de las partes del cuerpo del ahorcado que se colocan según la persona que juega va cometiendo errores. La propia estructura de la ahorca también está pintada con el elemento Canvas del HTML 5.También podríamos hacer este juego sin utilizar el Canvas, colocando simples imágenes generadas con algún editor gráfico, pero justamente lo que deseamos es hacer una aplicación donde podamos practicar con el elemento Canvas. Puedes aprender sobre esto en el Manual de Canvas del HTML 5.
Aparte de todo esto, por supuesto, utilizamos el lenguaje Javascript, que se puede aprender en la secciónJavascript a fondo.
Explicación básica del script
El primer pedazo de código que podemos revisar es donde se escoge una palabra. Esto se hace cuando la página carga. Ese pedazo de código está comentado con el texto "PALABRAS" a partir de la línea de código 37. Primero se define un array con todas las letras posibles y luego se crea una variable "palabraEscogida" con una de esas letras seleccionada...