Manipulación del DOM y Eventos en JavaScript para Juegos Web

El DOM (Document Object Model) es el modelo que usa el navegador para estructurar las etiquetas HTML y puedes aprovechar esto para modificarlas y hacer cambios con código JavaScript. ¿Cómo funciona? Quédate para averiguarlo.

Partes del DOM

En el document es donde cargan todas las etiquetas HTML. Y el navegador es capaz de detectar todo lo que ocurre a estas etiquetas.

Eventos

Cuando, por ejemplo, tú haces click en un botón

 Esto se considera un evento y el navegador es capaz de detectar cuando esto ocurre. Por lo tanto, tú puedes programar el sitio web para que ejecute código cuando ocurren estos eventos. Esto funciona amarrando funciones a eventos. De modo que cuando el evento ocurre, la función se ejecuta. Por ejemplo, podrías programar un botón para que de inicio a un juego de piedra, papel o tijera en el navegador.

 

💡 A esta capacidad del navegador de detectar eventos se le conoce como “escuchador de eventos” o “Event Listener”.

Tú puedes agregar los Event Listeners que quieras a tu código, y así lograr cosas como un menú desplegable en un sitio web, o un video que arranque en cuanto la página termine de cargar.

Proyecto del curso

¿Recuerdas el juego de piedra, papel o tijera que creamos antes? Pues vamos a llevarlo al siguiente nivel.

Crea una carpeta para un nuevo proyecto llamada “Mokepon” (cualquier parecido con la realidad es mera coincidencia), y reproduce el archivo HTML que encontrarás en los recursos de la clase.

Seguiremos trabajando en la estructura HTML del juego en la próxima clase. Pero antes, realiza el quiz de este módulo del curso. Eso te permitirá validar lo que aprendiste hasta ahora, y te ayudará a repasar 🙂

Contribución creada por Jhonkar Sufia (Platzi Contributor).