Contenidos
Curso de juegos y páginas web dinámicas interactivas modernas de JavaScript DOM
Cree contenido de página web interactiva y dinámica con manipulación DOM de JavaScript Todo el modelo de objetos de documento de JavaScript
Lo que aprenderás
Curso de juegos y páginas web dinámicas interactivas modernas de JavaScript DOM
- Manipulación DOM de JavaScript
- Aprenda JavaScript para crear páginas web interactivas
- Páginas web dinámicas con JavaScript
- Código JavaScript para interactuar con elementos HTML
- JavaScript para crear un juego
- Eventos de pulsación de teclas del teclado usando flechas para mover el elemento de página div
- Uso de marco de animación para un movimiento fluido de la página web
Requisitos
- JavaScript HTML y CSS
- Experiencia de codificación
Descripción
JavaScript Explore lo que puede hacer con el modelo de objetos de documento para que sus páginas web cobren vida.
El DOM es una representación orientada a objetos de la página web, que se puede modificar con JavaScript para crear contenido web interactivo y dinámico.
- Seleccionar elementos de la página
- Actualizar elementos de la página
- Aplicar estilo al atributo de estilo
- Realice un seguimiento de las interacciones del usuario con eventos de clic y eventos de teclado
- Mover y manipular elementos de la página con JavaScript
Las próximas lecciones le mostrarán cómo hacer que sus páginas web cobren vida
Creación de un proyecto de juego básico, donde el jugador puede mover un elemento de la página usando el teclado. Además, cree nuevos elementos de página y automáticamente agregue nuevos elementos de página a la página cuando se cumplan las condiciones. Aprenda a crear un juego dinámico e interactivo que detecta la colisión de elementos y aumenta la puntuación. Mueva su elemento para golpear los otros elementos en la página, puntúe y vea cómo se crean nuevos elementos con un número máximo en el código. Estructura de juego JavaScript básica que se puede ampliar para crear sus propios juegos y más.
Se incluye el código fuente: guía en PDF paso a paso y más.
Selección de elementos de página en JavaScript: seleccione uno o varios elementos de página con QuerySelector
Cubiertas del curso
- Web Dev Setup Codificación IDE y recursos - enlaces y recursos para configurar la introducción al contenido del curso.
- Modelo de objeto de documento DOM de JavaScript Introducción a la selección Selección de elementos JavaScript y manipulación del contenido del texto. Selección de elementos de página en JavaScript: seleccione uno o varios elementos de página con QuerySelector
- Manipulación de estilo de elementos con color de actualización de JavaScript y color de fondo - Actualice, manipule las propiedades del estilo del elemento y agregue eventos de clic con los oyentes de eventos de JavaScript. Cree un mini proyecto que actualice el color de fondo del elemento cuando se hace clic en él.
- Actualizar la posición del elemento usando JavaScript - Mover elementos en la página actualiza el estilo del elemento a la izquierda y los valores superiores con JavaScript.
- AnimationFrames con JavaScript y KeyBoard EventListeners Movement - Uso de AnimationFrames para tener un movimiento continuo y fluido de elementos en la página. Agregar pulsaciones de teclas del teclado para mover elementos de acuerdo con los oyentes de eventos de pulsaciones de teclas. Actualice la posición del elemento con JavaScript.
Curso de juegos y páginas web dinámicas interactivas modernas de JavaScript DOM
- Crear elemento usando JavaScript y colocarlo aleatoriamente dentro de la división de contenedor de página Cree nuevos elementos con JavaScript: utilice el método de elemento de creación de documentos para generar elementos dinámicamente y agregarlos a la página HTML.
- Mover elemento Hacer clic aleatoriamente Haga que se pueda hacer clic en los elementos nuevos y se muevan aleatoriamente en la página.
- Detección de colisiones con elementos JavaScript Agregue opciones para verificar la colisión entre los elementos de la página. Verifique las dimensiones del elemento de arriba a abajo y de izquierda a derecha comparándolas para detectar si hay superposición. Si ocurre una superposición, regístrelo como una colisión. Agregue la verificación de colisión al proyecto de JavaScript que verifica si hay alguna colisión entre los elementos de la página.
- Desarrollo de juegos y puntuación con elementos de página de JavaScript Agregar puntuación al juego: crea un juego y permite que el usuario progrese en el juego. Diseño de juegos y conceptos de juegos y cómo aplicarlos con JavaScript.
- Jugabilidad final del proyecto DOM de JavaScript
El código fuente está incluido
Impartido por un instructor con más de 20 años de experiencia en desarrollo web listo para ayudarlo a aprender más sobre JavaScript.
