Programemos un juego con JavaScript

1/24
Recursos

Aportes 59

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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!!

Tiene m谩s relleno que naruto

Friv el mejor juego!

Empecemos !

Empecemos!

Vamos hacer el Mario Bros!

Recein salido del hornooooo!!!

TERMINO MI CURSO CON JAVAM Y LE ENTRO 馃槈 ME ENCANTA SABER QUE HAY M脕S TEMAS.

Recientemente realice el anterior curso a este jajaja, bueno a aprovechar este curso 馃槃

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

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)

Inicio el curso, y acabo de ver que, lanzaron el curso de 鈥淕odot鈥. Motor de videojuegos 2D y 3D multiplataforma, libre y de c贸digo abierto. Adem谩s, la ruta actualizada de Javascript.

Let鈥檚 go 馃槉

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

con toda con este nuevo retoooo馃敟馃弳

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

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.

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:

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.

Muy motivada con este curso!!!

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鈥irecto a NINTENDO con fe馃ぉ

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.

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

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

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

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

F de friv :(

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

Vamos con todo gente

Estaba esperando este curso 鉂わ笍

**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!!