Desarrollo de juegos web en JavaScript y HTML5 (Phaser)

Aprende a crear juegos 2D para la web con JavaScript desarrollando 4 juegos clásicos en 3 horas con Phaser.
4.4 (273 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
2,227 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 35
  • Length 3.5 hours
  • Skill Level All Levels
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 Spanish

Course Description

  • Aprovechamos la última tecnología web para desarrollar juegos en JavaScript desde ceros.
  • En este curso aprenderemos los conceptos básicos del desarrollo de juegos para la web utilizando el motor 'Phaser'.
  • Los conceptos serán explicados con ejemplos cortos y sencillos de implementar. Luego uniremos todo lo aprendido para crear juegos completos.
  • Durante el desarrollo del curso desarrollaremos tres juegos clásicos (Flappy Bird, Space Invaders y Space Defender), que servirán de ejemplos para aplicar los conceptos aprendidos en cada clase.
  • Para desarrollar los juegos del curso utilizaremos únicamente JavaScript y HTML.
  • El curso incluye todo el material visto (código, imágenes, recursos, etc) en cada clase.
  • Este curso enseña todo lo que me hubiera gustado aprender cuando inicié en el mundo del desarrollo de juegos.

What are the requirements?

  • Conceptos básicos de programación
  • Conceptos básicos de JavaScript y HTML5

What am I going to get from this course?

  • Desarrollar juegos 2D para la web con JavaScript y HTML5.
  • Dominar los conceptos básicos del motor de juegos 'Phaser' para el desarrollo de juegos para la web.
  • Crear sus propios juegos desde cero

What is the target audience?

  • Emprendedores que están dispuestos a aprender los conceptos básicos para desarrollar juegos para la web
  • Estudiantes con conocimientos básicos de programación
  • Personas que han tenido algún contacto (por más básico que sea) con JavaScript y HTML5
  • NO es para personas que quieran desarrollar juegos en 3D

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introducción
03:49

En este video descargamos el editor de texto y configuramos el ambiente de desarrollo.

Creación del proyecto
Preview
02:13
Creación del juego
Preview
08:23
Section 2: Sprites (imagenes)
03:38

En este video aprendemos a asignar una imagen de fondo al juego y a animarla de tal forma que parezca un sidescroller horizontal.

02:14

Aprendemos a insertar imágenes al juego en diferentes posiciones del canvas.

04:32

Aprendemos a cambiar el punto de apoyo (anchor point) de una imagen.

03:39

Aprendemos a cambiar las dimensiones de una imagen (sprite) con la función scale.

01:44

En esta clase aprendemos a voltear imágenes.

Rotación de sprites
01:55
1 question

Este quiz evalúa la comprensión del uso de transformaciones sobre sprites.

06:20

En este video aprendemos a animar un sprite.

Section 3: Movimiento en 2d y colisiones
06:58

Aprendemos a saber cuándo un usuario presiona una tecla y qué tecla presiona.

02:45

Vamos a evitar que el movimiento de un sprite lo lleve a salirse de la pantalla.

08:49

Esta clase sirve para conocer el código que se debe aplicar a la hora de tener más de una animación para cada movimiento de nuestro personaje.

04:19

Si no se detiene una animación esta va a correr infinitamente. Sin embargo necesitamos saber qué mostrar cuando detenemos una animación.

Section 4: Space Invaders: Disparos, enemigos y detección de colisiones
Movimiento de la nave
04:57
08:11

Aprendemos a disparar desde nuestro personaje

06:23

Aprendemos a crear múltiples enemigos

02:50

En este video aprendemos cómo detectar cuando una bala colisiona con un enemigo.

Section 5: Space Defender
07:14

Creamos los archivos del juego, el HTML y los archivos JavaScript.

02:38

Creamos la nave desde la cual vamos a disparar los proyectiles

09:31

Escribimos el código que habilita a la nave para disparar proyectiles.

04:13

Creamos los enemigos y hacemos que aparezcan en partes aleatorias del espacio del juego con una velocidad hacia abajo.

08:06

Manejamos las colisiones entre los proyectiles y los enemigos.

Section 6: Flappy Bird
Configuración del archivo principal
03:22
08:12

En este video escribimos el código del primer estado, el menú.

07:59

Creamos al flappy bird y lo mostramos en pantalla, creamos el fondo sidescroller.

07:56

En esta clase agregamos la animación del vuelo al pájaro y asignamos un botón para manejar el salto.

12:39

En esta clase generamos los tubos por los que tiene que pasar el flappy bird.

10:10

En este video creamos el estado final de game over y añadimos la función para manejar las colisiones entre el flappy bird y los tubos.

06:06

En este video aprendemos a añadir un puntaje a nuestro juego, actualizarlo y mostrarlo en el estado de juego terminado.

Section 7: Runner
07:18

Configuramos los archivos principales pare el juego y mostramos el fondo de pantalla y al jugador.

02:57

Agregamos las variables que manejan las entradas de teclado del usuario y movemos al jugador en el eje x

06:24

Creamos los carros que serán obstáculos para el jugador

02:15

Creamos las canecas de gasolina que sirven para ganar puntos

08:54

Cambiamos la dificultad del juego a medida que el jugador gana puntos

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Nicolás Rojas, Ingeniero - Instructor - Desarrollador web

@NicolasRojas

Hola! Mi nombre es Nicolás Rojas, me gusta presentarme como un solucionador de problemas estudiando ingeniería.

Aprendí a programar hace unos años por mi propia cuenta, en poco tiempo descubrí que la programación y el desarrollo de aplicaciones y juegos era mi pasión.

Cuando empecé a programar no fue fácil encontrar el material necesario para aprender en español, por lo cual me propuse aportar lo que más pudiera para que más hispanohablantes pudiéramos acceder a los recursos educativos que hay en internet. Mis cursos están basados en lo que me hubiera gustado aprender cuando empecé a desarrollar juegos y aplicaciones.

En mis redes sociales estoy atento a cualquier duda o consulta que puedan tener sobre algún curso o cualquier tema en particular, no duden en escribirme!

Ready to start learning?
Take This Course