Programemos un juego con JavaScript

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

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%;
    }
}

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
`);

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

Vamos hacer el Mario Bros!

Friv el mejor juego!

Empecemos !

Empecemos!

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

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.

Recein salido del hornooooo!!!

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

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!

1. 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.

2. 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.

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.

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

con toda con este nuevo retoooo🔥🏆

Recientemente realice el anterior curso a este jajaja, bueno a aprovechar este curso 😄

Recuerden agregar el link del archivo css

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

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

Let’s go 😊

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

¡No se olviden de hacer commit de estos cambios iniciales del proyecto!

Muy motivada con este curso!!!

¿Necesitas más espacio en pantalla?

Seguro te ha pasado como a mí que no tienes una pantalla mucho más grande o que no cuentas con dos pantallas o monitores para trabajar con mayor comodidad y terminas viendo el curso así (ver imagen parte inferior)… En donde no puedes ver todo el contenido.

Aquí vemos que perdemos mucho espacio, ya que el profe tiene abierto el panel izquierdo.

Solución

Solo debemos esconder el panel izquierdo y la vista panorámica de la derecha. Para hacer esto te dejo un resumen y el tutorial aunque igual te dejo los apuntes debajo para que los veas rápidamente.

# Configuración 

- Indenticator

## Cambiar terminal  
- Ctrl + , (coma)
 - Open settings: Esquina derecha superior
	 - Icono hoja con esquina doblada y con flecha 

```json
{
    "workbench.colorTheme": "🏴 blackbird → midnight",
    "terminal.integrated.defaultProfile.windows": "Git Bash", 👈👀
}

• Ver View
• Terminal

Eliminar Mini map

{
    "workbench.colorTheme": "🏴 blackbird → midnight",
    "terminal.integrated.defaultProfile.windows": "Git Bash", 👈👀
    "editor.minimap.enabled": false, 👈👀
}

Ocultar scrollbar

{
    "workbench.colorTheme": "🏴 blackbird → midnight",
    "terminal.integrated.defaultProfile.windows": "Git Bash", 
    "editor.minimap.enabled": false, 
    "editor.scrollbar.vertical": "auto", 👈👀
    "editor.overviewRulerBorder": false, 👈👀
    "editor.hideCursorInOverviewRuler": true, 👈👀
}

Ocultar barra de actividades

{
    "workbench.colorTheme": "🏴 blackbird → midnight",
    "terminal.integrated.defaultProfile.windows": "Git Bash", 
    "editor.minimap.enabled": false, 
    "editor.scrollbar.vertical": "auto", 
    "editor.overviewRulerBorder": false, 
    "editor.hideCursorInOverviewRuler": true, 
    "workbench.activityBar.visible": false, 👈👀
}

• Ctrl + Shift + E
  • Ctrl + B: Abrir y ocultar
• Ctrl + Shift + F
• Ctrl + Shift + G
• Ctrl + Shift + D
• Ctrl + Shift + X

[Tutorial: Cómo configurar VSCode](https://www.youtube.com/watch?v=HiVnGgYudLY)

Quedo bien jaja

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&family=Roboto+Slab:wght@300;400;500&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <title>Juego con Js</title>
</head>
<body>
  <main>
    <h1 class="main__title">Solo diviertete mientras aprendes</h1>
    <section class="game-container">

      <canvas id="game__layout">

      </canvas>

      <div class="game__btns">
        <button id="up">Arriba</button>
        <button id="left">Izquierda</button>
        <button id="right">Derecha</button>
        <button id="down">Abajo</button>
      </div>

      <div class="game__messages">
        <p class="messages__parrafo">parrafo de ejemplo</p>
      </div>

    </section>
  </main>

  <script src="./maps.js"></script>
  <script src="./main.js"></script>
</body>
</html>

body {
  background-color: rgb(135, 219, 167);
  color: #fff;  
  font-family: 'Roboto Slab', sans-serif;
  margin: 0;
  padding: 0;
}
.main__title{
  margin-top: 50;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Roboto Mono', sans-serif ;
  color: #008cff;
}
.game-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: 100vh;
  width: 100vw;
}

canvas {
  border: 4px solid #008cff;
  border-radius: 8px;
  background-color: #e0982b;
}

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

button {
  background-color: #008cff;
  border-radius: 8px;
  border-color: #68f50a;
  font-family: inherit;
  font-weight: 500;
  margin: 0;
  padding: 5px 20px;
  width: 100px;
  color: white;
  transition: all 400ms ease 0.03s;
}

button:hover{
  background-color: #68f50a;
  border-radius: 8px;
  border-color: #008cff;
  font-family: inherit;
  font-weight: 500;
  margin: 0;
  padding: 5px 20px;
  width: 100px;
  color: black;
  transition: all 400ms ease 0.03s;
}


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%; 
  }
}

Se ve interesante

Será un curso genial!

Excelente introducción y sobre todo se puede ir comprendamos el código que has realizado para el ejercicio lo que hace que podremos inferir de que se trata y de que manera nosotros podremos modificar para hacer nuestro juego jejeje…

Gracias Juancho

lo pude mejorar con css.

codigo:https://github.com/EnriqueIllexas/curso-videojuego
imagen-platzi.png

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi Friv</title>
    <link rel="stylesheet" href="game.css">
</head>
<body>
    <div class="game-container">
        <canvas id="game" class="canva"></canvas>

        <div class="btns">
            <button id="up"><img class="icon" src="./arrow-up.svg" alt=""></button>
            <button id="left"><img class="icon" src="./arrow-left.svg" alt=""></button>
            <button id="right"><img class="icon" src="./arrow-right.svg" alt=""></button>
            <button id="down"><img class="icon" src="./arrow-down.svg" alt=""></button>
        </div>

        <div class="messages">
            <!-- TODO -->
            <p>Parrafo de ejemplo</p>
        </div>
    </div>

    <script src="./game.js"></script>
    <script src="./maps.js"></script>
</body>
</html>

css

:root{
    --green: #76d594;
}
body{
    display: grid;
    place-items: center;
}
.canva{
    border: 1px solid var(--green);
    width: 480px;
    height: 380px;
    margin-bottom: 50px;
    border-radius: 20px;
}
.btns{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    gap: 30px;
}
.btns button{
    border-radius: 50px;
    background: #ffffff;
    box-shadow:  20px 20px 60px #bebebe,
                -20px -20px 60px #ffffff;
    border-style: none;
    padding: 30px;
    transition: 1s ease;
}
.btns button:hover{
    transition: 0.5s;
    transform: scale(1.1);
    box-shadow:  20px 20px 60px #76d594,
                -20px -20px 60px #76d594;
    animation-delay: 1s;
    
}
.game-container{
    margin-top: 30px;
    width: 485px;
    height: 600px;
    border-radius: 15px;
    padding: 20px;
    border: 1.2px solid var(--green);
}
.messages{
    padding: 10px;
}
.messages p{
    color: var(--green);
} 

Mis pantallas:

• Visita mi repositorio en GitHub
  
  
  
  

Así me quedaron mis estilos poco personalizados de CSS.

Imagino que el canvas responsive se hará con JS así que no le di tanta importancia.

Por un momento pensé que el juego al que se refería Juan era Bomberman.

Pero veo que no es hehe

Para mí el juego tiene más parecido a Bomber man 🚀

Alla voy Epic Games Esperameeeee 🚀

Ufff interesante…directo a NINTENDO con fe🤩

Aprendiendo programación muy bueno

Me quedo encantado la clase.

Apenas ví este curso me hice un tiempo para verlo. Ademas con mi profe favorito de Platzi

este es el tipo de cursos que me gustan ya que aprendo más desarrollando que con teoría. Vamos a darle con todo!

Me encantan estos nuevos cursos, gracias Platzi 💚😍

ahi le ire mejorando el css

Que genial que esten actualizando la escuela de JavaScript! 😄

Que buen inicio de curso, se nota las ganas que le coloca el profesor a enseñar

Vaya, veo que están actualizando la carrera de JavaScript, me parece genial.

Vamos con todo gente

Estaba esperando este curso ❤️

woow

**lo pude mejorar con css.
**codigo:https://github.com/EnriqueIllexas/curso-videojuego

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi Friv</title>
    <link rel="stylesheet" href="game.css">
</head>
<body>
    <div class="game-container">
        <canvas id="game" class="canva"></canvas>

        <div class="btns">
            <button id="up"><img class="icon" src="./arrow-up.svg" alt=""></button>
            <button id="left"><img class="icon" src="./arrow-left.svg" alt=""></button>
            <button id="right"><img class="icon" src="./arrow-right.svg" alt=""></button>
            <button id="down"><img class="icon" src="./arrow-down.svg" alt=""></button>
        </div>

        <div class="messages">
            <!-- TODO -->
            <p>Parrafo de ejemplo</p>
        </div>
    </div>

    <script src="./game.js"></script>
    <script src="./maps.js"></script>
</body>
</html>

css

:root{
    --green: #76d594;
}
body{
    display: grid;
    place-items: center;
}
.canva{
    border: 1px solid var(--green);
    width: 480px;
    height: 380px;
    margin-bottom: 50px;
    border-radius: 20px;
}
.btns{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    gap: 30px;
}
.btns button{
    border-radius: 50px;
    background: #ffffff;
    box-shadow:  20px 20px 60px #bebebe,
                -20px -20px 60px #ffffff;
    border-style: none;
    padding: 30px;
    transition: 1s ease;
}
.btns button:hover{
    transition: 0.5s;
    transform: scale(1.1);
    box-shadow:  20px 20px 60px #76d594,
                -20px -20px 60px #76d594;
    animation-delay: 1s;
    
}
.game-container{
    margin-top: 30px;
    width: 485px;
    height: 600px;
    border-radius: 15px;
    padding: 20px;
    border: 1.2px solid var(--green);
}
.messages{
    padding: 10px;
}
.messages p{
    color: var(--green);
} 

El profe Juan: Un homenaje a una plataforma verde y morado que seguramente conocerás.

Mi mente: Acaso habla del Eva01 🥵

1) creamos repositorio en github 2) hacemos un git clone de nuestro repositorio recien creado 3) creamos los archivos base del proyecto 3.1) creamos styles.css 3.2) creamos maps.js 3.3) creamos game.js 3.4) creamos index.html 4) ponemos el título en la etiqueta title en el html 5) creamos un div de clase "game-container" 6) dentro del div creado creamos una etiqueta canvas con id="game" 7) Debajo de la etiqueta canvas creamos un div de clase class="btns" y dentro ponemos 4 botones para arriba, abajo, derec

¡A jugar!

Let`s start!

Se esta poniendo genial al ruta de Javascript

Por ahora no tiene estilos, pero intentaré usar los que hice para el curso gratis de progra 😃

Vamos con todo!! 💣💣

Buena Actualización de la ruta, iniciemos, pero creo que sería divertido escribir todo el código con TS.

Esta es la plataforma: https://www.friv.com/

Muy emocionado por este taller 😎. Vamos!!