Programa tus Primeros Juegos HTML5 con JavaScript
4.6 (773 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
13,795 students enrolled

Programa tus Primeros Juegos HTML5 con JavaScript

Empieza a programar desde el primer minuto y desde cero: no requiere ningún software especial
4.6 (773 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
13,795 students enrolled
Created by Javier Muñiz
Last updated 4/2020
Spanish
Spanish [Auto-generated]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8.5 hours on-demand video
  • 15 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Los elementos básicos de la programación: variables, bucles, condiciones y funciones.
  • Comprender el proceso de programación de videojuegos 2D clásicos
  • Trabajar con programación orientada a objetos (a nivel básico)
  • Crear contenido visual usando la etiqueta Canvas de HTML5
  • Lectura de ratón y teclado para el control de juego
  • Cargar gráficos y animaciones a partir de Tilesets
  • Crear escenarios 2D basados en matrices
  • Comprender la lógica de juego para crear objetos y enemigos
  • Crear un motor físico 2D sencillo, sin librerías, para un juego de plataformas
  • Guardar datos de la partida y puntuaciones en la memoria del navegador
  • Cargar música y efectos de sonido usando librerías externas
  • Crear tres juegos clásicos paso a paso: Dungeon Crawler, Tetris y Plataformas
Course content
Expand all 36 lectures 08:30:20
+ Introducción
1 lecture 03:15

¿Qué programas usaremos para editar el código y dónde descargarlos?

  • Bloc de notas (Windows)
  • Notepad++
  • Atom
Preview 03:15
+ Estructuras básicas
10 lectures 02:11:05

Qué es el DOM y cómo se crea una página web sencilla con HTML, sin utilización de hojas de estilos CSS, ya que para la creación de videojuegos HTML5 con JavaScript no es necesario utilizarlas.

Estructura HTML
10:02

Explicación práctica de qué son las variables, cómo funcionan y cómo utilizarlas en un videojuego para almacenar información en tiempo real.

Las Variables
16:32

Explicación práctica con ejemplos, sobre la creación de funciones para programar de forma estructurada y poder reutilizar fragmentos de código, para así hacerlo más legible.

Las Funciones (I)
08:43

Explicación sobre cómo crear funciones capaces de procesar información y devolver resultados calculados al programa principal.

Las Funciones (II) - Parámetros de Salida
15:58

Ejemplo práctico sobre cómo utilizar condiciones para que el programa sea capaz de elegir entre varias alternativas utilizando la instrucción IF

Condiciones if/else (I)
13:56

Uso de varias condiciones concatenadas, dentro de un mismo IF, e inclusión de la instrucción ELSE para ejecutar el resto de instrucciones cuando no se cumple la condición.

Condiciones if/else (II)
17:25

Ejemplos sobre el uso de condiciones más complejas utilizando el juego de instrucciones IF/ELSE

Condiciones if/else (III)
09:33

Utilización de las instrucciones Switch / Case para elegir un resultado entre un listado de opciones.

Condiciones switch/case
08:35

Utilización del bucle FOR para crear rutinas de código que se repitan un número determinado de veces, de forma automática.

Bucle For
16:15

Utilización del juego de instrucciones DO / WHILE para crear rutinas de código que se repitan un número indeterminado de veces (que no sea fijo)

Bucle Do/While
14:06
+ Introducción a estructuras más complejas
8 lectures 01:57:24

Explicación de cómo se crea la base de un videojuego, programando un bucle principal, que se ejecuta de forma infinita y que recorre todas las funciones que mantienen el juego en funcionamiento:

  • Dibujado del escenario.
  • Lógica de juego.
  • Dibujado de los enemigos.
  • Dibujado del protagonista.
  • Control del ratón y el teclado.
  • Reproducción de la música.
  • Reproducción de los efectos de sonido.
  • Detección de colisiones.
Preview 09:37

Lectura del teclado usando JavaScript, para la detección de las pulsaciones.

Utilización de la librería externa Keypress, para detectar pulsaciones complejas que podremos aplicar a la hora de realizar combos.

Lectura del Teclado
15:32

Utilización de JavaScript para la detección de:

  • Pulsación de los botones del ratón.
  • Liberación de los botones del ratón.
  • Movimiento del ratón.
  • Lectura de las coordenadas X e Y
Lectura del Ratón
09:44

¿Qué son los objetos en programación?

  • Declaración de atributos.
  • Creación de métodos.
Los Objetos
13:08

Cómo crear un Canvas en HTML5, para usarlo como pantalla en la que mostrar formas sencillas (cuadrados).

Aprenderemos conceptos como:

  • Fotogramas por segundo / Frames Per Second (FPS)
  • Primitivas gráficas.
  • Códigos de color hexadecimal.
  • Borrado / Limpieza del Canvas.
El Canvas (I) La pantalla de Juego
18:21

Ejemplo práctico sobre cómo cargar y mover por pantalla una imagen en formato PNG, previamente creada.

El Canvas (II) La pantalla de Juego
16:07

Qué es un ARRAY o lista, y cómo utilizarlo para crear un inventario de objetos para nuestro jugador.

Arrays
16:38

Cómo crear un array de 2 dimensiones (2D) y utilizarlo para crear un mapa o escenario para nuestro primer juego.

El Tablero de Juego
18:17
+ Tu primer juego: La Mazmorra
3 lectures 58:45

A partir de aquí comenzaremos a crear nuestro primer videojuego sencillo del tipo Dungeon Crawler:

El protagonista se moverá por una laberíntica mazmorra, de la que no podrá salir:

  • Creación de un escenario a partir de matrices 2D.
  • Detección de colisiones.
  • Control del protagonista mediante el teclado.
La Mazmorra (I) Tablero y Colisiones
15:30

En esta segunda sesión crearemos la lógica de juego para nuestro Dungeon Crawler:

  • Inclusión de objetos llave y puerta.
  • Implementación del inventario.
  • Lógica simple, según la cual el jugador no puede salir a no ser que previamente recoja la llave.
La Mazmorra (II) Lógica de Juego
12:23

En esta última sesión mejoraremos la lógica de juego y añadiremos los gráficos:

  • Creación de enemigos que se mueven de forma autónoma y aleatoria.
  • Detección de colisiones con los enemigos (que matan al protagonista si colisionan)
  • Utilización de un Tileset para los gráficos del escenario.
  • Creación de animaciones básicas usando un Tileset.
La Mazmorra (III) Gráficos, Tileset y Animaciones
30:52
+ Tu segundo juego: Tetris
6 lectures 01:18:43

En esta sesión preparamos el código del tablero y el objeto para las piezas.

Tetris (I) Preparación del Juego
12:14

En esta segunda sesión añadimos el código para crear con matrices los gráficos de las piezas, así como todas sus posiciones al rotarlas.

Tetris (II) Las Piezas
14:58

En esta sesión: 

  • Dibujaremos el tablero y el objeto ficha en pantalla.
  • Crearemos los márgenes del tablero para que las piezas no se salgan.
Tetris (III) Los Márgenes del Tablero
12:01

Implementación de la caída y la rotación del objeto pieza.

Tetris (IV) Rotación y Caída de las Piezas
10:15

En esta sesión crearemos la lógica de juego para que las piezas se apilen al caer y colisionen de forma adecuada entre ellas.

Tetris (V) Colocación de las Piezas
14:49

En esta última sesión implementaremos el borrado o limpieza de las filas que estén completas, de una forma sencilla y básica.

Tetris (VI) Limpieza de Filas
14:26
+ Mejorando los Juegos
3 lectures 54:25

Ejemplo práctico sobre cómo implementar un objeto Cámara, capaz de mostrar distintas partes de un nivel que no quepa en pantalla, e incluso cómo crear experiencias a pantalla partida (Split screen) para varios jugadores.

Creación de Cámaras
17:05

Ejemplo práctico sobre la carga y reproducción de música y efectos de sonido utilizando la librería Howler.js

Añadir Música y Efectos de sonido FX
14:31

Ejemplo práctico sobre el almacenamiento permanente de datos en la memoria del navegador web para guardar y cargar partidas anteriores.

Guardar la Partida y la Puntuación
22:49
+ Tu tercer Juego: Plataformas
5 lectures 01:06:43

En esta primera sesión, crearemos un escenario a partir de una matriz 2D, y comenzaremos a implementar algunas leyes físicas, como la gravedad, para hacer que nuestro jugador siempre caiga hacia el suelo.

Plataformas (I) Crea tu propio Motor Físico
19:35

En esta segunda sesión, añadiremos fricción o rozamiento, para que el protagonista deslice en mayor o menor medida cuando corra por el escenario, creando un efecto físico mucho más realista.

Plataformas (II) Añadiendo Fricción
10:18

En esta tercera sesión terminaremos el motor físico, añadiendo colisiones entre el jugador y el escenario.

Plataformas (III) Colisiones
24:13

Para mejorar el juego de plataformas que acabamos de crear, le vamos a añadir un editor de niveles, con el que modificar, en tiempo real, el aspecto del escenario.

BONUS - Plataformas (IV) Editor de Niveles
11:33

¡Terminó el curso! A partir de ahora te toca a ti empezar a crear tus propios juegos ¡Ánimo!

Despedida
01:04
Requirements
  • No se requieren conocimientos previos de programación
  • Solo se necesita un navegador web como Google Chrome y un editor de texto plano como el Bloc de notas o Atom (ambos gratuitos)
  • Programa en cualquier laptop o PC, sin importar ni el Sistema operativo ni la potencia
Description

En este curso te ayudaré a iniciarte en el apasionante mundo de la programación de videojuegos, comenzando desde la base, para que en pocos días puedas empezar a crear tus primeros juegos de estilo retro. Durante el curso podrás seguir las sesiones en vídeo, paso a paso y también consultar mi código para probarlo en tu propio PC y que así nunca te atasques durante el proceso. 

Los dos primeros módulos te ayudarán a obtener la base necesaria en programación, siempre utilizando como ejemplo el mundo de los videojuegos, para que te resulte entretenido, mientras que a partir del tercer módulo empezarás a programar videojuegos reales.

En la documentación que acompaña a las sesiones se incluyen apuntes y ejercicios para que puedas repasar y continuar perfeccionando tus habilidades en esta maravillosa disciplina.

Who this course is for:
  • Aquellas personas que deseen conocer cómo se programan los videojuegos y quieran obtener una base sólida sobre la que seguir aprendiendo.