Introducción al curso

1

¡Alto! Tenemos una nueva versión de este curso para ti

2

Bienvenidos al Curso de Fundamentos de JavaScript

3

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

4

Variables

5

Variables: Strings

6

Variables: Números

7

Funciones

8

El alcance de las funciones

9

Objetos

10

Desestructurar objetos

11

Parámetros como referencia o como valor

12

Comparaciones en JavaScript

Estructuras de Control y Funciones

13

Condicionales

14

Funciones que retornan valores

15

Arrow functions

16

Estructuras repetitivas: for

17

Estructuras repetitivas: while

18

Estructuras repetitivas: do-while

19

Condicional múltiple: switch

Arrays

20

Introducción a arrays

21

Filtrar un array

22

Transformar un array

23

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

24

Cómo funcionan las clases en JavaScript

25

Modificando un prototipo

26

El contexto de las funciones: quién es this

27

La verdad oculta sobre las clases en JavaScript

28

Clases en JavaScript

Asincronismo

29

Funciones como parámetros

30

Cómo funciona el asincronismo en JavaScript

31

Cómo funciona el tiempo en JavaScript

32

¿Qué pasó con swapi.co?

33

Callbacks

34

Haciendo múltiples requests

35

Manejando el Orden y el Asincronismo en JavaScript

36

Manejo de errores con callbacks

37

Promesas

38

Promesas Encadenadas

39

Múltiples promesas en paralelo

40

Async-await: lo último en asincronismo

Juego de HTML

41

Comenzando el juego

42

Generando una secuencia de números

43

Iluminando la secuencia de colores

44

Obteniendo el input del usuario

45

Agregando la verificación del color elegido

46

Agregando los estados finales del juego

47

Conclusiones del curso

Complementos

48

Diferencias entre var, let y const

49

Memoización: ahorrando cómputo

50

¿Hace cuántos días naciste?

51

Funciones recursivas

52

Entiende los closures de JavaScript

53

Estructuras de datos inmutables

54

Cambiando de contexto al llamar a una función

55

¿Cuándo hace falta poner el punto y coma al final de la línea?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Comenzando el juego

41/55
Recursos

Crearemos el juego Simon (Simón dice), en el que se van iluminando una secuencia de botones que el jugador tendrá que ir repitiendo, si se equivoca volverá a comenzar. El juego tendrá 10 niveles de dificultad, que deberán ser superados para ganar.

Aportes 181

Preguntas 42

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Para todas las personas que tengan problemas con este curso u otros, les sugiero que practiquen por su cuenta todo lo aprendido en clases y no se queden solo con eso, investiguen, trabajen duro, quizás el profesor se salta algunas cosas o tiene un ritmo muy lento al hablar, pero puedes googlear las cosas que se salta y puedes acelerar el vídeo para lidear con su lentitud al hablar, ánimo a todos, si no entienden algo, investiguen y poco a poco su aprendizaje se comenzará a consolidar conforme practiquen y practiquen. ¡Éxitos a todos!

Archivos por separado:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simon Dice</title>
    <link href="simon_say.css" rel="stylesheet">
  </head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
    <script src="simon_say.js"></script>
  </body>
</html>

CSS

body {
  margin: 0;
  background: #dedede;
  display: flex;
  align-items: center;
  height: 100vh;
}

.gameboard {
  height: 100vh;
  width: 100vh;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  max-height: 60vh;
  max-width: 60vh;
}

.color {
  width: 50%;
  height: 50%;
  display: inline-block;
}

.left {
  float: left;
}

.right {
  float: left;
}

.celeste {
  background: #22a6b3;
}

.celeste.light {
  background: #7ed6df;
}

.violeta {
  background: #be2edd;
}

.violeta.light {
  background: #e056fd;
}

.naranja {
  background: #f0932b;
}

.naranja.light {
  background: #ffbe76;
}

.verde {
  background: #6ab04c;
}

.verde.light {
  background: #badc58;
}

.btn-start {
  width: 400px;
  height: 100px;
  background: #ecf0f1;
  color: #2c3e50;
  font-size: 2.5rem;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 200px);
}

.hide {
  display: none;
}

JS

const celeste = document.getElementById('celeste');
const violeta = document.getElementById('violeta');
const naranja = document.getElementById('naranja');
const verde = document.getElementById('verde');
const btnEmpezar = document.getElementById('btnEmpezar');

class Juego {
  constructor() {
    this.inicializar();
  }
  
  inicializar() {
    btnEmpezar.classList.add('hide');
  }        
}

function empezarJuego() {
  var juego = new Juego();
}

Hola! Les dejo el código HTML y CSS para que se ahorre buscando 😄.

-HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Simon Dice</title>
    <link rel ="stylesheet" href="css/style.css">
</head>
<body>
    <div class="gameboard">
        <div id="celeste" class="color celeste left" data-color="celeste">

        </div>
        <div id="violeta" class="color violeta right" data-color="violeta">
            
        </div>
        <div id="naranja" class="color naranja left" data-color="naranja">

        </div>
        <div id="verde" class="color verde right" data-color="verde">

        </div>
        <button id = "btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script src = "main.js"></script>
</body>
</html>
  • CSS
body {
    margin: 0;
    background: #dedede;
    display: flex;
    align-items: center;
    height: 100vh;
}

.gameboard {
    height: 100vh;
    width: 100vh;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    max-height: 60vh;
    max-width: 60vh;
}

.color {
    width: 50%;
    height: 50%;
    display: inline-block;
}

.left {
    float: left;
}

.right {
    float: left
}

.celeste {
    background: #22a6b3;
}

.celeste.light {
    background: #7ed6df;
}

.violeta {
    background: #be2edd;
}

.violeta.light {
    background: #e056fd;
}

.naranja {
    background: #f0932b;
}

.naranja.light {
    background: #ffbe76;
}

.verde {
    background: #6ab04c;
}

.verde.light {
    background: #badc58;
}

.btn-start {
    width: 400px;
    height: 100px;
    background: #ecf0f1;
    color: #2c3e50;
    font-size: 2.5rem;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 200px);
}

.hide {
    display: none;
}

Para los que deseen separar los archivos les comparto mi proyecto espero les sirva…

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simon Dice</title>
    <link rel="stylesheet" href="simon.css">
     </head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Que Empiece el Juego!</button>
    </div>
    <script type="text/javascript" src="simon_say.js"></script>
  </body>
</html>

CSS

body {
  margin: 0;
  background: #dedede;
  display: flex;
  align-items: center;
  height: 100vh;
}

.gameboard {
  height: 100vh;
  width: 100vh;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  max-height: 60vh;
  max-width: 60vh;
}

.color {
  width: 50%;
  height: 50%;
  display: inline-block;
}

.left {
  float: left;
}

.right {
  float: left;
}

.celeste {
  background: #22a6b3;
}

.celeste.light {
  background: #7ed6df;
}

.violeta {
  background: #be2edd;
}

.violeta.light {
  background: #e056fd;
}

.naranja {
  background: #f0932b;
}

.naranja.light {
  background: #ffbe76;
}

.verde {
  background: #6ab04c;
}

.verde.light {
  background: #badc58;
}

.btn-start {
  width: 400px;
  height: 100px;
  background: #ecf0f1;
  color: #2c3e50;
  font-size: 2.5rem;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 200px);
}

.hide {
  display: none;
}```

JS



const celeste = document.getElementById(‘celeste’)
const violeta = document.getElementById(‘violeta’)
const naranja = document.getElementById(‘naranja’)
const verde = document.getElementById(‘verde’)
const btnEmpezar = document.getElementById(‘btnEmpezar’)

  class Juego {
    constructor() {
      this.inicializar()
    }

    inicializar() {
      btnEmpezar.classList.add('hide')
    }
  }

  function empezarJuego() {
    var juego = new Juego()
  }```

codigo clase

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simon Dice</title>
    <style>
      body {
        margin: 0;
        background: #dedede;
        display: flex;
        align-items: center;
        height: 100vh;
      }
      .gameboard {
        height: 100vh;
        width: 100vh;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        max-height: 60vh;
        max-width: 60vh;
      }
      .color {
        width: 50%;
        height: 50%;
        display: inline-block;
      }
      .left {
        float: left;
      }
      .right {
        float: left;
      }
      .celeste {
        background: #22a6b3;
      }
      .celeste.light {
        background: #7ed6df;
      }
      .violeta {
        background: #be2edd;
      }
      .violeta.light {
        background: #e056fd;
      }
      .naranja {
        background: #f0932b;
      }
      .naranja.light {
        background: #ffbe76;
      }
      .verde {
        background: #6ab04c;
      }
      .verde.light {
        background: #badc58;
      }
      .btn-start {
      cursor: pointer;
      width: 420px;
      height: 100px;
      background: #ecf0f1;
      color: #2c3e50;
      border: none;
      border-bottom: 4px solid #c4c6c7;
      border-radius: 8px;
      font-size: 3em;
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 210px);
      transition: .5s;
      outline: none;
    }

    .btn-start:hover {
      color: #ecf0f1;
      background: #2c3e50;
      border-bottom: 4px solid #1f3346;
    }
    
    .btn-start:active {
      transform: scale(.95);
    }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
    <script>
      const celeste = document.getElementById('celeste')
      const violeta = document.getElementById('violeta')
      const naranja = document.getElementById('naranja')
      const verde = document.getElementById('verde')
      const btnEmpezar = document.getElementById('btnEmpezar')
      class Juego {
        constructor() {
          this.inicializar()
        }
        inicializar() {
          btnEmpezar.classList.add('hide')
        }
      }
      function empezarJuego() {
        var juego = new Juego()
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
<head>
  <metacharset="utf-8">
    <title>Simon Dice</title>
    <style media="screen">
      body {
        margin: 0;
        background: #dedede;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }

      .gameboard {
        height: 100vh;
        width: 100vh;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        max-height: 60vh;
        max-width: 60vh;
      }

      .color {
        width: 50%;
        height: 50%;
        display: inline-block;
      }

      .left {
        float: left;
      }

      .right {
        float: left;
      }

      .celeste {
        background: #22a6b3;
      }

      .celeste.light {
        background: #7ed6df;
      }

      .violeta {
        background: #be2edd;
      }

      .violeta.light {
        background: #e056fd;
      }

      .naranja {
        background: #f0932b;
      }

      .naranja.light {
        background: #ffbe76;
      }

      .verde {
        background: #6ab04c;
      }

      .verde.light {
        background: #badc58;
      }

      .btn-start {
        width: 400px;
        height: 100px;
        background: #ecf0f1;
        color: #2c3e50;
        font-size: 2.5rem;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 200px);
      }

      .hide {
        display: none;
      }
    </style>
</head>

<body>
  <div class="gameboard">
    <div id="celeste" class="color celeste left" data-color="celeste"></div>
    <div id="violeta" class="color violeta right" data-color="violeta"></div>
    <div id="naranja" class="color naranja left" data-color="naranja"></div>
    <div id="verde" class="color verde right" data-color="verde"></div>
    <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
  </div>
</body>

</html>


HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📢Simón Dice</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-board">
        <div class="board-btn" id="nw"></div>
        <div class="board-btn" id="ne"></div>
        <div class="board-btn" id="sw"></div>
        <div class="board-btn" id="se"></div>
        <button id="btnEmpezar" class="btn" onclick="empezarJuego()">Empezar a jugar</button>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
    --dark: #2f3640;
    --white: #ffffff;
    --yellow: #f1c40f;
    --blue: #00a8ff;
    --green: #4cd137;
    --purple: #8c7ae6;
}

* {
    margin: 0;
    padding: 0;
    background: var(--dark);
    color: #ffffff;
    font-family: 'Bebas Neue', Arial, Helvetica, sans-serif;
}

.title {
    font-family: 'Bebas Neue', Arial, Helvetica, sans-serif;
    width: fit-content;
    margin: 10px auto;
    color: #f1c40f;
    font-size: 7em;
}

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

.game-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 500px;
    height: 500px;
}

.board-btn {
    width: 250px;
    height: 250px;
    background: var(--yellow);
    border: solid 1px var(--white);
}

.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 40px;
    font-size: 3em;
    border: none;
    border-radius: 10px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btn:hover {
    background: var(--white);
    color: var(--dark);
    transition-duration: 0.4s;
}

#nw{
    background: var(--blue);
    border-top-left-radius: 100%;
}

#ne{
    background: var(--purple);
    border-top-right-radius: 100%;
}

#sw{
    background: var(--yellow);
    border-bottom-left-radius: 100%;
}

#se{
    background: var(--green);
    border-bottom-right-radius: 100%;
}

La verdad empece con mucha expectativa con el maestro pero me a ido decepcionando las ultimas clases he quedado más confundido, y ahora la estructura del HTML no la empiea desde cero, no entiendo, sera porque es de fundamentos de javaScript pero de verdad que decepcion con este curso.

Tengan en cuenta que la etiqueta <script> va despues de los elementos html en <body>, muchachos! No sean totos como yo, que estuve una hora tratando de entender por que getElementById me retornaba un valor null, si estaba escribiendo todo como lo hizo el profesor. Luego de estresarme mucho lo busque en internet y entendi el torpe error.

Es una buena práctica rehacer el HTML y CSS emulando el código suministrado y jugando un poco con los estilos. Si se colocan otros nombres a los ID’s y clases hay que estar muy pendiente para evitar errores.

Yo no entendía nada de Js, es la segunda vez que hago el curso. Pero primero pase por un lenguaje más estricto en mi caso c# ahi entendi todo de clases herencias etc etc ya cuando regrese a JS entiendo todo xD

no entendi nada en este curso…

El archivo es el Nº 42.
Realmente no se porque han adjuntado todo a la vez…

Por favor nunca olviden colocar el script en la parte de abajo del programa una vez carguen todos los botones…yo lo olvide y pague muy caro ese error.

Para construir el jugo Simón dice en html
Para iniciar con la interacción del juego se lo hará con un botón con el método onClick que llamará a la función empezarJuego()

  • En esta función que estamos llamando se creará el objeto.
function empezarJuego() {
  var juego = new Juego();
}
  • Creamos la clase Juego que va a tener la lógica del juego
class Juego {
  constructor() {
    
  }

También definimos en constantes los id de cada elementos que intervendran en el juego

const celeste = document.getElementById("celeste");
const violeta = document.getElementById("violeta");
const naranja = document.getElementById("naranja");
const verde = document.getElementById("verde");
const btnEmpezar = document.getElementById("btnEmpezar");

Para dar una pequeña funcionalidad hasta ahora ocultaremos el botón Empezar al dar click en el mismo
En el constructor inicializamos

class Juego {
  constructor() {
    this.inicializar();
  }

y en la función inicializar() ejecutamos ese procedimiento

    btnEmpezar.classList.add("hide");

Después de las clases de asincronismo, estas resultan más tranquilas jajajaja

Si quieren agregar una cuenta regresiva antes de empezar el juego.

const celeste = document.getElementById('celeste');
const violeta = document.getElementById('violeta');
const naranja = document.getElementById('naranja');
const verde = document.getElementById('verde');
const btnEmpezar = document.getElementById('btnEmpezar');
const counter = document.getElementById('counter');

class Juego {
    constructor() {
        this.inicializar()
    }

    inicializar() {
        btnEmpezar.classList.add('hide');
        counter.classList.add('show');
        this.cuentaRegresiva();
    }

    cuentaRegresiva(){
        let i = 3;
        counter.innerHTML = i;
        setTimeout(()=>{
            i=2;
            counter.innerHTML = i;            
        },500);
        setTimeout(()=>{
            i=1;
            counter.innerHTML = i;        
        },1000);
        setTimeout(()=>{
            counter.style.display='none';       
        },1500);
    }
}

function empezarJuego() {
    var juego = new Juego()
}

Esta muy desprolijo el tema de los archivos. El codigo para esta clase esta en el archivo case 42. Pero es la 39.

que rabia, no entendi nada.

que sistema de clases usa , la maestra Teffi ❤️ usaba el BEM pero este es diferente y porque lo usa el gran maestro Sacha

Hola a todos, yo esta mirando como hacer el mismo layout sin necesidad de usar la opcion de float, y utilice lo que aprendí en el curso de diseño de páginas web. Entonces mi clase gameboard quedó así

.gameboard { height: 100vh; width: 100vh; border-radius: 50%; overflow: hidden; margin: 0 auto; max-height: 60vh; max-width: 60vh; display: flex; flex-wrap: wrap; }

Alguien sabe si solo se puede acceder desde un dispositivo?no me deja entrar en PC solo desde la app ,perdón que lo pregunté acá pero claramente me comunique por email , WhatsApp y chat pero no tengo respuestas

git init

Para que mejoren el estilo del boton

.btn-start {
    width: 400px;
    height: 100px;
    background-color: #ecfeec;
    color: #2c4e50;
    font-size: 2.5rem;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 200px);
    border-radius: 24px;
    border: 1px solid #dfe1e5;
    outline: none;
    cursor: pointer;
}
.btn-start:hover {
    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
    border-color: rgba(223, 225, 229, 0);
}

Ahora se viene lo chido :X

Les dejo el template vacío, así no se vuelven loco buscándolo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simon Dice</title>
    <style>
      body {
        margin: 0;
        background: #dedede;
        display: flex;
        align-items: center;
        height: 100vh;
      }

      .gameboard {
        height: 100vh;
        width: 100vh;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        max-height: 60vh;
        max-width: 60vh;
      }

      .color {
        width: 50%;
        height: 50%;
        display: inline-block;
      }

      .left {
        float: left;
      }

      .right {
        float: left;
      }

      .celeste {
        background: #22a6b3;
      }

      .celeste.light {
        background: #7ed6df;
      }

      .violeta {
        background: #be2edd;
      }

      .violeta.light {
        background: #e056fd;
      }

      .naranja {
        background: #f0932b;
      }

      .naranja.light {
        background: #ffbe76;
      }

      .verde {
        background: #6ab04c;
      }

      .verde.light {
        background: #badc58;
      }

      .btn-start {
        width: 400px;
        height: 100px;
        background: #ecf0f1;
        color: #2c3e50;
        font-size: 2.5rem;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 200px);
      }

      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
    <script type="text/javascript">
        
        function empezarJuego(){
            console.log('iniciar');
        }

       
    </script>
  </body>
</html>

Les Recomiendo que salten a la clase de complementos para que luego hagamos el reto, y así entender ciertas nomenclaturas como .bind 😎

Platzi y su facilidad de crear portafolios para sus alumnos ❤️.

Este curso ha sido excelente ,vamos por ese ultimo empujón .

Empezamos haciendo jueguitos, genial!

Yo tambien me animé a hacer mi version de cuenta regresiva, solo es agregarla a su clase y llamarla desde inicializar()

inicializar(){
          this.cuentaRegresiva();
        }

        cuentaRegresiva(){
          let j = 1;
          let time;
          for(let i = 5; i >= 0; i--){ // i itera de 5 a 1
            while(j <= 6){ // j itera de 1 a 6, para contar el 0
              time = j + '000';
              j++;
              break;
            }
            setTimeout(function(){
              let num = i; // var num por cada timeout
              btnEmpezar.textContent = num;
              if(num === 0){
                btnEmpezar.classList.add('hide');
              }
            }, time);
          }
        }```

Buen dia, tengo un error que me produce .classList.add(‘hide’)
Cuando uso… btnEmpezar.classList.add(‘hide’);
me lanza error “Uncaught TypeError: Cannot read property ‘classList’ of null”

y si uso directo… document.getElementById(‘btnEmpezar’).classList.add(‘hide’);
la operacion se ejecuta normalmente

Aqui esta mi .js

const celeste = document.getElementById(‘celeste’)
const violeta = document.getElementById(‘violeta’)
const naranja = document.getElementById(‘naranja’)
const verde = document.getElementById(‘verde’)
const btnEmpezar = document.getElementById(‘btnEmpezar’)

class Juego {
constructor() {
this.inicializar()
}
inicializar() {
btnEmpezar.classList.add(‘hide’);
//document.getElementById(‘btnEmpezar’).classList.add(‘hide’)
}
}

function empezarJuego(){
var juego = new Juego()
}

Genial.

Yo lo hice con grid

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Simon dice...</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste"></div>
      <div id="violeta" class="color violeta"></div>
      <button type="button" name="button" onClick="empezarJuego()">Presiona para jugar</button>
      <div id="naranja" class="color naranja"></div>
      <div id="verde" class="color verde"></div>

    </div>
  </body>
</html>

Y el CSS

body{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.gameboard{
  width: 90vh;
  height: 70vh;
  display: grid;
  grid-template-columns: 10% 1fr 1fr 10%;
  grid-template-rows: repeat(3,1fr);
  /* border: 1px solid red; */
  border-radius: 50%;
  /* overflow: hidden; */
}



.celeste{
  background-color: #2271b3;
  border-top-left-radius: 90%;
  grid-column: 2/3;

}

.violeta{
  background-color: #4a192c;
  border-top-right-radius: 90%;
}

.naranja{
  background-color: #ff8000;
  grid-column: 2/3;
  border-bottom-left-radius: 90%;
}


.verde{
  background-color: #158400 ;
  border-bottom-right-radius: 90%;
}


button{
  grid-column: span 4;
  z-index: 2;
  font-size: 50px;
  font-family: 'Roboto Slab', serif;
  text-decoration: none;
  outline: none;
  border: 2px solid gray;
  box-shadow: 0 5px #828282;
}


button:hover{
  background-color: #adadad;
}

button:active {
  background-color: #adadad;
  box-shadow: 0 2px #828282;
  transform: translateY(2px);
}

Porque no comenzaste el juego desde 0? osea, hacer el html y css junto con los estudiantes…

wooww, me tarde un poco porque me puse hacer desde cero todo el documento, pero me sirvió bastante para practicar, ahora sí a aplicar todo lo aprendido.

Excelente el curso, va muy bien 😄

Igual me estoy volviendo loco o algo…pero no he podido de ningún modo guardar los elementos html en una variable. Me dice que el contenido de la variable es null, y lo he intentado con un javascript limpio sin más, y tampoco. Pero si me voy a un sitio web como google, abro consola e intento guardar un elemento html por el id en una variable…funciona perfectamente. A alguien más le ha pasado?

Código de la clase con anotaciones

//Guardamos los elementos Html en variables
const celeste = document.getElementById('celeste')
const violeta = document.getElementById('violeta')
const naranja = document.getElementById('naranja')
const verde = document.getElementById('verde')
const btnEmpezar = document.getElementById('btnEmpezar')
//La clase juego sera la estructura basica para controlar
//los elementos dentro del html
class Juego {
  constructor() {
    //Inicializa llamando la funcion inicializar()
    //para el objeto creado. Apenas se crea, se ejecuta
    //esta función, por eso desaparece el boton
    this.inicializar()
  }
  //Inicializar agrega la clase hide que oculta el boton
  inicializar() {
    btnEmpezar.classList.add('hide')
  }
}
//La función empezarJuego() crea un nuevo elemento de clase Juego
function empezarJuego() {
  var juego = new Juego()
}

Empezando el Juego

<script>
      const celeste = document.getElementById('celeste')
      const violeta = document.getElementById('violeta')
      const naranja = document.getElementById('naranja')
      const verde = document.getElementById('verde')
      const btnEmpezar=document.getElementById('btnEmpezar')

      class Juego{
        constructor(){
          this.inicializar()
        } 

        inicializar(){
          //usamos las clases del css hide --> definido en el css'
          btnEmpezar.classList.add('hide')
        }
      }
      
      function empezarJuego(){
        var juego = new Juego()
      }
    </script>

La forma sencilla es:
<script>
function empezarJuego()
{
btnEmpezar.classList.add(‘hide’)
}
</script>

cierto por favor organicen el contenido ya que aparece revuelto de todas las clases y no el de interés

Programacion orientada a Objetos en JS

🥰JUEGO
Hola gente!
Desde Argentina les paso el codigo listo (lo copian y pegan en VSC y listo
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Simon dice</title>
<style>
body {
margin: 0;
background: #dedede;
display: flex;
align-items: center;
height: 100vh;
}
.gameboard {
height: 100vh;
width: 100vh;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
max-height: 60vh;
max-width: 60vh;
}
.color {
width: 50%;
height: 50%;
display: block;
}
.left {
float: left;
}
.right {
float: left;
}
.celeste {
background-color: #22a6b3;
}
.celeste .luz {
background-color: #7ed6df;
}
.violeta {
background-color: #be2edd;
}
.violeta .luz {
background-color: #e056fd;
}
.naranja {
background-color: #f0932b;
}
.naranja .luz {
background-color: #ffbe76;
}
.verde {
background-color: #6ab04c;
}
.verde .luz {
background-color: #badc58;
}
.btn-start {
width: 400px;
height: 100px;
background: #ecf0f1;
color: #2c3e50;
font-size: 2.5rem;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 200px);
}
.hide {
display: none;
}
</style>
<body>
<div class = “gameboard”>
<div id=“celeste” class=“color celeste left” data-color=“celeste”></div>
<div id=“violeta” class=“color violeta right” data-color=“violeta”></div>
<div id=“naranja” class=“color naranja left” data-color=“naranja”></div>
<div id=“verde” class=“color verde right” data-color=“verde”></div>
<button id=“btnEmpezar” class=“btn-start” onclick=“empezarJuego()”>Empezar a jugar!</button>
</div>
</body>
<script>
const celeste = document.getElementById(‘celeste’)
const violeta = document.getElementById(‘violeta’)
const naranja = document.getElementById(‘naranja’)
const verde = document.getElementById(‘verde’)
const btnEmpezar = document.getElementById(‘btnEmpezar’)

class Juego {
  constructor() {
    this.inicializar()
  }

  inicializar() {
    btnEmpezar.classList.add('hide')
  }
}

function empezarJuego(){
  var juego = new Juego()
}

</script>
</html>



Recuerden que la propiedad classList retorna el listado de clases que tiene un determinado elemento del DOM en este caso se trae esta lista y se le añade la clase ‘hiden’ usando el add

Código de inicio

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simon Dice</title>
    <style>
      body {
        margin: 0;
        background: #dedede;
        display: flex;
        align-items: center;
        height: 100vh;
      }

      .gameboard {
        height: 100vh;
        width: 100vh;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        max-height: 60vh;
        max-width: 60vh;
      }

      .color {
        width: 50%;
        height: 50%;
        display: inline-block;
      }

      .left {
        float: left;
      }

      .right {
        float: left;
      }

      .celeste {
        background: #22a6b3;
      }

      .celeste.light {
        background: #7ed6df;
      }

      .violeta {
        background: #be2edd;
      }

      .violeta.light {
        background: #e056fd;
      }

      .naranja {
        background: #f0932b;
      }

      .naranja.light {
        background: #ffbe76;
      }

      .verde {
        background: #6ab04c;
      }

      .verde.light {
        background: #badc58;
      }

      .btn-start {
        width: 400px;
        height: 100px;
        background: #ecf0f1;
        color: #2c3e50;
        font-size: 2.5rem;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 200px);
      }

      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
    <script>
      
    </script>
  </body>
</html>

El archivo que hay no es el mismo que ponen en el video…

Este es mi PseudoIntento de personalizarlo un poco xD

Excelente empezar a combinar todo esto con html y css.

Consulta, porque todo se realizo dentro del mismo html?

Muy útil lo de obtener un elemento del HTML en javascript y añadirle clases. Me parece demasiado útil. Ah también se puede obtener por clase.

Yo soy completamente ignorante y desde ya les digo que lo de como hacer ese tablero lo debió explicar. Aunque se que eso es mas de html que de JS. Entonces a darle.

Genial!! ya vi cómo ocultar un objeto, podré usar esto para terminar mi primer proyecto del curso básico de javascript, que es un piedra papel y tijera, desarrollado como un juego interactivo!!

Excelente clase!!

Muchas gracias por la clase instructor Sacha, me gusto la parte del uso de la clase para poder agregarle un display en css y así poder ocultar el botón.

bien, ya lo pude eliminar

aqui el html para que comienzen el juego
<!DOCTYPE html>
<html lang=“en” dir=“ltr”>
<head>
<meta charset=“utf-8”>
<title>Simon Dice</title>
<style>
body {
margin: 0;
background: #dedede;
display: flex;
align-items: center;
height: 100vh;
}

  .gameboard {
    height: 100vh;
    width: 100vh;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    max-height: 60vh;
    max-width: 60vh;
  }

  .color {
    width: 50%;
    height: 50%;
    display: inline-block;
  }

  .left {
    float: left;
  }

  .right {
    float: left;
  }

  .celeste {
    background: #22a6b3;
  }

  .celeste.light {
    background: #7ed6df;
  }

  .violeta {
    background: #be2edd;
  }

  .violeta.light {
    background: #e056fd;
  }

  .naranja {
    background: #f0932b;
  }

  .naranja.light {
    background: #ffbe76;
  }

  .verde {
    background: #6ab04c;
  }

  .verde.light {
    background: #badc58;
  }

  .btn-start {
    width: 400px;
    height: 100px;
    background: #ecf0f1;
    color: #2c3e50;
    font-size: 2.5rem;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 200px);
  }

  .hide {
    display: none;
  }
</style>

</head>
<body>
<div class=“gameboard”>
<div id=“celeste” class=“color celeste left” data-color=“celeste”></div>
<div id=“violeta” class=“color violeta right” data-color=“violeta”></div>
<div id=“naranja” class=“color naranja left” data-color=“naranja”></div>
<div id=“verde” class=“color verde right” data-color=“verde”></div>
<button id=“btnEmpezar” class=“btn-start” onclick=“empezarJuego()”>Empezar a jugar!</button>
</div>
<script>
const celeste = document.getElementById(‘celeste’)
const violeta = document.getElementById(‘violeta’)
const naranja = document.getElementById(‘naranja’)
const verde = document.getElementById(‘verde’)
const btnEmpezar = document.getElementById(‘btnEmpezar’)

  class Juego {
    constructor() {
      this.inicializar()
    }

    inicializar() {
      btnEmpezar.classList.add('hide')
    }
  }

  function empezarJuego() {
    var juego = new Juego()
  }
</script>

</body>
</html>

Okayyy… todo empieza en el boton, este tiene un atributo que llama a una funcio. Por lo que lo aprovechamos para empezar el juego, para ello al momento de hacer click, este creara un prototipo y ahi le agregara el metodo de esconder el boton basicamente.

super!!

Me iba enredando un poco…

Aporte.
Amigos, antes de este curso les recomiendo estudiar el Curso de Desarrollo Web Online primero, para que entiendan todo sobre HTML y CSS. Yo así lo hice y entendí esta clase a la perfección (:

Yo quisé hacer la versión de Among Us, quisiera replicarlo exactamente igual, pero no sé como emular el contenedor

en la sección de archivos y enlaces se puede observar el asincronismo puro en javascript jaja

Vamos por el Simon Dice…!!!

El método inicializar lo puse debajo de la creación del objeto juego en vez de en el constructor y también funciona… De las dos maneras funciona pero ¿cuál sería la manera más recomendable?

class Juego {
      constructor() {
        //this.inicializar()
      }
      inicializar() {
        btnEmpezar.classList.add('hide')
      }
    }
    
    function empezarJuego() {
      var juego = new Juego()
      juego.inicializar()
    }
Const colores = await coloresExistentes(url) conlole.log(colores.basicos) console.log(colores.secundarios) a esto me refiero cual se imprimira primero en consola?

Buen inicio del proyecto

Hola, tengo el codigo exactamente igual y me dice la consola que inicializar no esta definido.

Qué emocionante!!!

En lo personal prefiero trabajar por carpeta (separado). No me gusta juntar todo el código, en una misma ventana (html, js, css).


Esta muy bueno el juego

No sé si alguien mas noto que Sacha creo la variable “Juego” con mayúscula y no “juego”.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simon Dice</title>
  </head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
  </body>
</html>
       const celeste = document.getElementById('celeste')
        const violeta = document.getElementById('violeta')
        const naranja = document.getElementById('naranja')
        const verde = document.getElementById('verde')
        const btnEmpezar = document.getElementById('btnEmpezar')

        class Juego {
            constructor(){
                this.inicializar()
            }
            
            inicializar(){
                btnEmpezar.classList.add('hide')
            }
        }
        function empezarJuego(){
            var game = new Juego()
        }
body {
        margin: 0;
        background: #dedede;
        display: flex;
        align-items: center;
        height: 100vh;
      }

      .gameboard {
        height: 100vh;
        width: 100vh;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        max-height: 60vh;
        max-width: 60vh;
      }

      .color {
        width: 50%;
        height: 50%;
        display: inline-block;
      }

      .left {
        float: left;
      }

      .right {
        float: left;
      }

      .celeste {
        background: #22a6b3;
      }

      .celeste.light {
        background: #7ed6df;
      }

      .violeta {
        background: #be2edd;
      }

      .violeta.light {
        background: #e056fd;
      }

      .naranja {
        background: #f0932b;
      }

      .naranja.light {
        background: #ffbe76;
      }

      .verde {
        background: #6ab04c;
      }

      .verde.light {
        background: #badc58;
      }

      .btn-start {
        width: 400px;
        height: 100px;
        background: #ecf0f1;
        color: #2c3e50;
        font-size: 2.5rem;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 200px);
      }

      .hide {
        display: none;
      }```

Que buen curso hasta ahora me a ayudado mucho! lo he tenido que cursar dos veces pero ha valido la pena, es el curso de fundamentos de JavaScript mas completo que me he encontrado en la vida

muy interesante

Excelente que se haya compartido las clases hasta el momento en Archivos y Enlaces, es un dato importante para tomarlo en cuenta para otros cursos

Excelente. A poner en práctica todo.

llegamos al punto, genial

Ahora si a aplicar todo lo aprendido!!

Al querer descargar los archivos desde la pág estós no están disponibles, y al hacer el clone del proyecto las clases no están en orden, incluso hay unas clases que no están en vídeo, como fechas, recursividad, let y const, etc, ¿ Aún existen o es material que es parte de otro curso?

El tablero que descargo cuando doy click en empezar a jugar se desaparece la letra

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Simón dice</title>
</head>
<body>
    <div class="gameboard">
        <div id="light-blue" class="top-left"></div>
        <div id="violet" class="top-right"></div>
        <div id="orange" class="bottom-left"></div>
        <div id="green" class="bottom-right"></div>
    </div>
    <button id="start" class="btn-start" onclick="startGame()">Empezar a jugar!</button>
    <script>
        const lightBlue = document.getElementById('light-Blue')
        const violet = document.getElementById('violet')
        const oragen = document.getElementById('orange')
        const green = document.getElementById('green')
        const btnStart = document.getElementById('start')

        class game {
            constructor() {
                this.setUp()
            }

            setUp() {
                btnStart.classList.add('hide')
            }
        }

        function startGame() {
            var playing = new game()
        }
    </script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    background-color: #dedede;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gameboard {
    width: 100vh;
    height: 100vh;
    max-height: 60vh;
    max-width: 60vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}
.top-left {
    width: 100%;
    height: 100%;
    background-color: #22a6b3;
    border-top-left-radius: 100%;
}
.top-right {
    width: 100%;
    height: 100%;
    background-color: #be2edd;
    border-top-right-radius: 100%;
}
.bottom-left {
    width: 100%;
    height: 100%;
    background-color: #f0932b;
    border-bottom-left-radius: 100%;
}
.bottom-right {
    width: 100%;
    height: 100%;
    background-color: #6ab04c;
    border-bottom-right-radius: 100%;
}
.btn-start {
    position: absolute;
    width: 100vh;
    height: 100vh;
    max-height: 15vh;
    max-width: 66vh;
    background-color: #ecf0f1;
    color: #2c3e50;
    font-size: 2.5rem;
}
.hide {
    display: none;
}

Profe, no sería más claro separar JavaScript, CSS y HTML en archivos individuales?.. Me parece que n un futuro va a ser mas engorroso leer el código

Muy genial

me empieza a gustar

Aunque nos dan el Html y ccs ya, creo que lo haré para seguir practicando!!

Ve hubiese encantado que nos enseñaran el maquetado del tablero, pero eso tendré que estudiarlo por mi cuenta.

const celeste = document.getElementById('celeste')
const violeta = document.getElementById('violeta')
const naranja = document.getElementById('naranja')
const verde = document.getElementById('verde')
const btnEmpezar = document.getElementById('btnEmpezar')

class Juego {
  constructor(){
    this.inicializar()
  }
  inicializar(){
    btnEmpezar.classList.add('hide')
  }
}

function empezarJuego(){
  var juego = new Juego()
}

Simón dice que le den 💚 a este post

<body>
      <div class="gameboard">

      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
    <script>
      // lo mismo sucede con los colores para poder acceder a ellos
      const celeste = document.getElementById('celeste')
      const violeta = document.getElementById('violeta')
      const naranja = document.getElementById('naranja')
      const verde = document.getElementById('verde')
      //ponemos en una variable el boton empezar mediante su id de la siguente forma
      const btnEmpezar = document.getElementById('btnEmpezar')

      //tendra toda la logica del juego
      class Juego {
        constructor() {
          this.inicializar()
        }
        //aqui el 1° paso es ocultar el boton de la siguente manera
        inicializar() {
          btnEmpezar.classList.add('hide')
        }
      }
      //inicializa el juego
      function empezarJuego() {
        var juego = new Juego()
      }
    </script>
  </body>

Hasta aquí voy bien, después de todo, los archivos están en los enlaces dejados pro el profesor Sacha.

Entendido

Como reemplazar un texto con Ctrl+E y luego Ctrl+D para escribir al mismo tiempo y asi reemplazar por ejemplo el nombre de una variable

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simon Dice</title>
    <style>
      body {
        margin: 0;
        background: #dedede;
        display: flex;
        align-items: center;
        height: 100vh;
      }

      .gameboard {
        height: 100vh;
        width: 100vh;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        max-height: 60vh;
        max-width: 60vh;
      }

      .color {
        width: 50%;
        height: 50%;
        display: inline-block;
      }

      .left {
        float: left;
      }

      .right {
        float: left;
      }

      .celeste {
        background: #22a6b3;
      }

      .celeste.light {
        background: #7ed6df;
      }

      .violeta {
        background: #be2edd;
      }

      .violeta.light {
        background: #e056fd;
      }

      .naranja {
        background: #f0932b;
      }

      .naranja.light {
        background: #ffbe76;
      }

      .verde {
        background: #6ab04c;
      }

      .verde.light {
        background: #badc58;
      }

      .btn-start {
        width: 400px;
        height: 100px;
        background: #ecf0f1;
        color: #2c3e50;
        font-size: 2.5rem;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 200px);
      }

      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
    <script>
      const celeste = document.getElementById('celeste')
      const violeta = document.getElementById('violeta')
      const naranja = document.getElementById('naranja')
      const verde = document.getElementById('verde')
      const btnEmpezar = document.getElementById('btnEmpezar')

      class Juego {
        constructor() {
          this.inicializar()
        }

        inicializar() {
          btnEmpezar.classList.add('hide')
        }
      }

      function empezarJuego() {
        var juego = new Juego()
      }
    </script>
  </body>
</html>