Programemos un juego con JavaScript

Clase 1 de 24 • Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Clase anteriorSiguiente clase

Edwin Jesús

student•

Niceeeeeeeeeeeeeeeeee, están actualizando la ruta de JS como debe ser!

Josue Cerron Tuesta

student•

Que actualicen todo!!!

Paula Inés Cudicio

student•

Eso!!! la ruta de FrontEnd con Js tiene unos saltos entre temas de cursos abismales!! que bueno que le están agregando todos estos cursos intermedios

Angel David Velasco Bonifaz

student•

Hola, buen día, les dejo el css de la clase

body {
    background-color: indigo;
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
}

.game-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: 100vh;
    width: 100vw;
}

canvas {
    border: 4px solid #ff6600;
    border-radius: 8px;
    background-color: #feff9d;
}

.btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 100%;
}

button {
    background-color: #fdef05;
    border-radius: 8px;
    border-color: #ff6600;
    font-family: inherit;
    margin: 0;
    padding: 5px 20px;
    width: 100px;
}

button:not(:last-child) {
    margin-right: 10px;
}

.messages {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 80%;
    max-width: 460px;
}

p {
    display: block;
    margin: 0;
    width: 100%;
}

@media (max-width: 440px) {
    button {
        margin-top: 25px;
    }

    #up,
    #down {
        margin-left: 100%;
        margin-right: 100%;
    }
}

Jonathan Barzola

student•

Hey muchisimas gracias! gran aporte

milton coronado

student•

se agradece!!!

Angel David Velasco Bonifaz

student•

Tambien les dejo el maps, para empezar a trabajar en el

const emojis = {
  "-": " ",
  O: "🚪",
  X: "💣",
  I: "🎁",
  PLAYER: "💀",
  BOMB_COLLISION: "🔥",
  GAME_OVER: "👎",
  WIN: "🏆",
};
const maps = [];
maps.push(`
  IXXXXXXXXX
  -XXXXXXXXX
  -XXXXXXXXX
  -XXXXXXXXX
  -XXXXXXXXX
  -XXXXXXXXX
  -XXXXXXXXX
  -XXXXXXXXX
  -XXXXXXXXX
  OXXXXXXXXX
`);
maps.push(`
  O--XXXXXXX
  X--XXXXXXX
  XX----XXXX
  X--XX-XXXX
  X-XXX--XXX
  X-XXXX-XXX
  XX--XX--XX
  XX--XXX-XX
  XXXX---IXX
  XXXXXXXXXX
  `);
maps.push(`
  I-----XXXX
  XXXXX-XXXX
  XX----XXXX
  XX-XXXXXXX
  XX-----XXX
  XXXXXX-XXX
  XX-----XXX
  XX-XXXXXXX
  XX-----OXX
  XXXXXXXXXX
`);

Jonathan Barzola

student•

Hey muchisimas gracias! gran aporte

milton coronado

student•

se reagradece!!! jajaja

Miguel Angel Hernandez Colombo

student•

aqui vengo a crear un video juego y de aqui salgo a buscar trabajo a ACTIVISION!!

Erick Santiago Gallo Buriticá

student•

ten fe

Ricardo Alfonso Chavez Vilcapoma

student•

NINTENDO con fe

Hector Ibarra

student•

Tiene más relleno que naruto

Brahayan David Mindiola Joiro

student•

JAJAJAJAJAJAJAJAJ

Gualberto Montiel

student•

Vamos hacer el Mario Bros!

Francisco Chacon

student•

Empecemos !

Yamid Noguera

student•

Empecemos!

Carlos Mauro Cárdenas Fernández

student•

En verdad nunca jugue eso :S. Pero lo programaré para mis hijos.

Christian Velázquez

student•

Inicio el curso, y acabo de ver que, lanzaron el curso de "Godot". Motor de videojuegos 2D y 3D multiplataforma, libre y de código abierto. Además, la ruta actualizada de Javascript.

Gabriel Blanco

student•

Recein salido del hornooooo!!!

Andres Salazar Pizarro

student•

TERMINO MI CURSO CON JAVAM Y LE ENTRO ;) ME ENCANTA SABER QUE HAY MÁS TEMAS.

Josue Cerron Tuesta

student•

Yo terminé el de asincronismo!

silfredo mario

student•

La nueva metodología de los cursos de Platzi lleva al estudiante adquirir más conocimiento acerca de la temática de cada curso. En mi concepto, ¡Esto se debe ha!

Dentro de la estructuración del contenido todo tiene un porque y como esto queda claro desde el inicio de los cursos consiente o inconscientemente uno está haciendo el mayor esfuerzo para aprender cada concepto por más aburrido que parezca.
Antes se encontraban cursos que eran como un mar de conocimiento, pero con un dedo de profundidad. Ahora sus cursos son cortos, pero tocan un tema hasta llegar a niveles avanzados.

Duvan Yesid Becerra Rodríguez

student•

CONSEJO PARA PEACOCK: Si quieren que al abrir se asigne un color aleatorio, vayan a settings (UI) y busquen

peacock surprise me on startup

Habiliten esa opción o abran settings (.json) y escriban:

  "peacock.surpriseMeOnStartup": true

Listo ya pueden abrir un nuevo proyecto y se les asignará un color aleatorio.

Nunca paren de aprender... Y amar la tecnología.

Ricardo Alfonso Chavez Vilcapoma

student•

No me funciona

Luis Miguel Rodriguez

student•

aunque esa pagina me trae buenos recuerdos :), decidi agregarle otros colorsitos!

con toda con este nuevo retoooo🔥🏆

Erick Alay

student•

Recientemente realice el anterior curso a este jajaja, bueno a aprovechar este curso :D

Rubén Ernesto Aragón Gil

student•

Recuerden agregar el link del archivo css

<link rel="stylesheet" href="style.css">

Jonathan Barzola

student•

Nunca nadie se había preocupado por mí :')

Rubén Ernesto Aragón Gil

student•

ánimo 😎🤘

Juan David Reyes

student•

El gran JUEGOS FRIV ❤ (mi juego favorito era el del toro xd)

Jonathan Barzola

student•

Agua y fuego!

Marwan El Ouarti Mellado

student•

XD Mi nivel favorito era el de la sauna

Jorge Eliecer Rangel Jimenez

student•

Let's go 😊

Josue Cerron Tuesta

student•

Let's gooo!

Jorge A. Torres

student•

Aplaudo el entusiasmo del Profe JuanDC, muy inspirador y el detalle de traer a Mario Bros en la t-shirt. Me dio en la nostalgia