Detectar eventos del teclado con JavaScript

 La impresión que me ha quedado hasta ahora es que, a pesar de que el curso es "Programación básica" va mucho más allá que la oferta actual de cursos básicos gratuitos.

Es básico, enseña los conceptos fundamentales de la programación, pero lo hace mediante la construcción de proyectos, con tecnologías actuales. Esa es la diferencia, te hace sentir involucrado, te hace parte, te pone en la mente del programador, te prepara para lo que te puedes encontrar en éste mundo y te guía en la creación de proyectos muy interesantes mientras aprendes las bases de la programación.

Para todo el equipo de Platzi que trabajaron con mucho esfuerzo y amor para que todo esto fuera posible ¡Muchísimas gracias! Cuando aprendo cosas nuevas, experimento crecimiento personal. 

Freddy nos enseña con humildad, he visto mucha gente que le da rabia porque uno no sabe, o hace las clases aburridas o simplemente no sabe conectar con uno porque no es capaz de expresar los conceptos en un estado intermedio entre lo técnico y los conocimientos del público objetivo. Enseñar no es fácil, admiro y agradezco ese talento

Lo siento si consideran que éste espacio es más para discusiones de la clase que para mi comentario. Solo quería expresarlo porque sentía que tenía que divulgar el impacto que ha generado el curso en mi y lo afortunados que somos de tener una startup latinoamericana como ustedes que sacan la cara por la región (y que nos instruyen con temas actuales en Platzi Live)

🐱‍💻 Completando el código para todas las direcciones de las teclas.

var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

console.log(teclas);

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento){
    switch(evento.keyCode){
        case teclas.UP:
            console.log("Ariba");
            break; 
        case teclas.DOWN:
            console.log("Abajo");
            break;
        case teclas.LEFT:
            console.log("Izquierda");
            break;
        case teclas.RIGHT:
            console.log("Derecha");
            break;
        default:
            console.log("Inexistente");
            break;
    }
}

Problemas a resolver en esta clase:

1: ¿Cómo detectamos cuando el usuario presiona una flecha arriba,abajo etc.?

2:¿Que evento es  y cómo se llama? keydown o keyup

3:¿Cómo dibujar las líneas?... siguiente clase

4: Recordar el último punto donde me quedé para trazar la siguiente raya. ... siguiente clase

1)Detectar la tecla presionada con el evento keydown: 

document.addEventListener('keydown',nombreFunción);

CamelCase es un estilo de escritura que se aplica a frases o palabras compuestas. El nombre se debe a que las mayúsculas a lo largo de una palabra en CamelCase se asemejan a las jorobas de un camello. El nombre CamelCase se podría traducir como Mayúsculas/Minúsculas Camello. El término case se traduce como "caja tipográfica", que a su vez implica si una letra es mayúscula o minúscula y tiene su origen en la disposición de los tipos móviles en casilleros o cajas.

Existen dos tipos de CamelCase:

• UpperCamelCase, cuando la primera letra de cada una de las palabras es mayúscula. Ejemplo: EjemploDeUpperCamelCase.
• lowerCamelCase, igual que la anterior con la excepción de que la primera letra es minúscula. Ejemplo: ejemploDeLowerCamelCase.

Fuente: https://es.wikipedia.org/wiki/CamelCase

Atajo de teclado para abrir la consola en el navegador:

ctrl+Shift+i

Recargar el navegador:

Ctrl+r

Código de teclas para las flechas:

// Flecha Izquierda: KeyCode= 37

// Flecha Arriba: KeyCode= 38

// Flecha Derecha: KeyCode= 39

// Flecha Abajo: KeyCode= 40

Objeto para almacenar el valor numérico de las teclas: JSON (Javascript Objet Notation)

var teclas = {

UP:38,   // Clave-Valor

DOWN:40,  //Clave-Valor

LEFT:37,  // Clave-Valor

 

RIGTH:39  // el último elemento no lleva coma. 

}

Estas líneas serían lo mismo que esto:

var teclas = {UP:38,DOWN:40,LEFT:37,RIGTH:39} //Por eso el último elemento no lleva coma. 

Estructura de control switch: (se utiliza en casos especiales porque no es muy legible el código)

switch(tecla.keyCode) {

  case teclas.UP:console.log('arriba switch');

  break;

  case teclas.DOWN:console.log('abajo switch');

  break;

  case teclas.RIGTH:console.log('derecha switch');

  break;

  case teclas.LEFT:console.log('izquierda switch');

  break;

  default: console.log('¿Para dibujar utiliza las flechas del teclado?');// en caso que la tecla  oprimida no sea una flecha

  breack; // el último breack no es necesario porque finaliza el bloque de código.  

}

console.log("conexión :D");

var canva = document.getElementById("area_de_dibujo");
var lienzo = canva.getContext("2d");

document.addEventListener("keyup",dibujarTeclado);
var contador = 0;//esta variable sirve para saber si ya iniciamos el dibujo
var xi=0,yi=0;//posiciones

var teclas = {
  LEFT:37,
  UP:38,
  RIGTH:39,
  DOWN:40
};

function dibujarTeclado(e)
{
  var aumento = 10;//el numero de pixeles de largo de la linea
  var color = "#0B88B5";//color de la linea

  if(contador == 0)//si aun no iniciamos el dibujo
  {
    xi = (canva.width / 2);//punto en x de inicio
    yi = (canva.height / 2);//punto en y de inicio
    contador++;
  }
  if(e.keyCode == teclas.LEFT)//tecla izquierda
  {
    dibujarLinea(color,xi,yi,(xi-aumento),yi);
    xi = xi-aumento;//disminuimos en x
    yi = yi;
  }
  else if(e.keyCode == teclas.UP)//tecla arriba
  {
    dibujarLinea(color,xi,yi,xi,yi-aumento);
    xi = xi;
    yi = yi-aumento;//disminuimos en y
  }
  else if(e.keyCode == teclas.RIGTH)//tecla derecha
  {
    dibujarLinea(color,xi,yi,xi+aumento,yi);
    xi = xi+aumento;//aumentamos en x
    yi = yi;
  }
  else if(e.keyCode == teclas.DOWN)//tecla abajo
  {
    dibujarLinea(color,xi,yi,xi,yi+aumento);
    xi = xi;
    yi = yi + aumento;//aumentamos en y
  }
}
//funcion para dibujar lineas
function dibujarLinea(color,xinicial,yinicial,xfinal,yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial,yinicial);
  lienzo.lineTo(xfinal,yfinal);
  lienzo.stroke();
  lienzo.closePath();
}```

Frases Freddy 2016 : "Cuádo ustedes aprenden a usar Switch, empiezan a ver todos los problemas como un problema switchiable "  

jajajaja Muy ciertas palabras 

En la universidad pasaron 8 cuatrimestres para que apenas empezaramos con JS, asi queaprendi por mi cuenta, y hasta ahora, me esta resolviendo dudas y mostrando secretos que desconocia por completo... GRACIAS PLATZI!!!

Freddy que paso con que switch "es del diablo". jajaja 

++Aquí les dejo algunos tips ++
https://keycode.info/: Muestra el event keycode de cada tecla que oprimas.

<canvas style="border: 1px solid red;" width="300" height="300" id="area_de_dibujo"></canvas>

Este código agrega un borde rojo al canvas.

 por cierto cuando tengan un error en el código (hasta el momento lo he visto en lo referente  a la sintaxis) y no sepan donde esta, pueden ejecutar el archivo html  he ir a la consola, ahi les mostrara el error en color rojo, y al final les aparecerá el nombre del archivo y la linea de donde esta el error. hasta el momento me ha salvado de estar revisando el código linea por linea 

APUNTES DE LA CLASE
Los eventos no necesitan parámetros porque son opcionales, + (variable) que guarda todos los eventos en esa variable
keyCode —> código interno del sistema operativo, es la forma en la que se almacenan letras u otras.
Todas las teclas tienen un código de esos.
De esa forma esta implementado por dentro en el interior de JavaScript
Los números gastan menos espacio en memoria
Forma fácil de saber cual de las flechas estoy oprimiendo es guardándolo en una variable especial
Una especie de colección de variables
Ejemplo: (tamaño = 10) es una variable (caja) y esa caja JavaScript la llama un objeto literal
Cuando tienes una variable que no va a cambiar en mucho tiempo , y una práctica interna de los programadores es poner esa variable en mayúsculas: a estas se les llama constantes
Ejemplo —> keyCode (“donde C esta en mayúscula”)
variable, atributo o propiedad que estén en mayúscula no cambiará a lo largo del tiempo: ejemplo —> UP, DOWN, LEFT, RIGHT serian constantes.
Una colección de variables es igual a un bloque de código y parecido a CSS o JSON
Notación de objetos en JavaScript
Var con var por dentro debes crear un bloque de código
Javascript Object Notation o JSON
**Proto ** == alert(“mundo extraño”); forma en que internamente los navegadores estructuran y construyen un objeto para que este listo.
switch es una estructura de control que se utiliza cuando hay mucho if, para crear mas condiciones

Una gran persona un dia me dijo  "switch es del diablo" y no lo pienso usar

Estoy super emocionado ya voy en esta clase en solo dos dias yeahh.. Amo platzi

document.addEventListener("keyup", dibujarTeclado); //para detectar el evento donde el usuario oprima una tecla.

var teclas = { //Objeto que tiene internamente una colección de variables. Técnicamente es una sola linea de codigo. JSON
    UP: 38,
    DOWN:40,
    LEFT: 37,
    RIGHT: 39
}; //Con esto ya sabemos qué tecla está siendo oprimida.

function dibujarTeclado(evento){  //creamos la variable evento como parámetro
switch(evento.keyCode){  //Dentro del switch, el elemento que se evalúa, es el elemento que cambia. Precisamente el "evento" que llega por parámetro, de la función dibujarTeclado, que se dispara cuando la tecla se levanta (keyup) del addEventListener del documento.

        case teclas.UP:
            console.log("ARRIBA");
            break;

        case teclas.DOWN:
            console.log("ABAJO");
            break;

        case teclas.LEFT:
            console.log("IZQUIERDA");
            break;

        case teclas.RIGHT:
            console.log("DERECHA");
            break;

        default: //Es como el Else
            console.log("Otra tecla");
            break;
    }
}

ese tipo de escritura donde se unen las palabras y cada nueva palabra es mayúscula se le llama 'camelCase'  :)

Que libro recomiendan para complementar el aprendizaje de JavaScript junto a los cursos?

Resumen:

• Cómo piensa un programador? Un programador agarra un problema grande y lo divide en problemas chiquitos.

• Todo manejador de eventos devuelve un objeto con los detalles del evento

• El canvas no es el lugar correcto para poner el keydown porque las flechas son un evento de todo. El objeto de HTML que tiene todo lo que hacemos en HTML es el objeto document. En document es el lugar donde está la forma de detectar que las flechas del teclado o realmente cualquier tecla del teclado ha sido presionada.

• Es una mala práctica colocar números sueltos dentro del código. Cuando tenemos números que significan algo no nos cuestan nada crear variables que le agreguen ese significado.

• Objeto Literal: una variable especial que tiene por dentro más variables. Objeto que tiene una colección interna de variables, un objeto que es inmediatamente descripto.

• Una buena práctica es escribir el nombre de variables, atributo o propiedad en mayúscula para indicar que esa variable no va a cambiar de valor durante mucho tiempo o que nunca cambia a lo largo de la vida del código. Todo lo que sigue a continuación es una sola línea de código:
  var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
  };

• switch: se usa cuando tengo muchas condicionales que están agrupadas (cuando tengo muchos if). El uso de switch tiende a ser abusado.

• Buena práctica es preguntarse:
  ¿mi uso de if hace más fácil o más difícil de leeer el código?
  ¿mi uso de switch hace más fácil o más difícil de leeer el código?

• switch no funciona para hacer un mayor que o un menor que. Sólamente funciona para comparar una cosa inicial con una cosa final.

• La opción por defecto del case es default. En éste caso no es necesario colocar el break, porqu lo que hace break es que el resto del código no se ejecute y como esta es la opción por defecto no haría falta escribirla.

Con "keydown" se satura el documento por la cantidad de eventos que suceden al dejar la tecla presionada. Con el "keyup" sólo se detecta el evento cuando la tecla se suelta.

Apuntes en Clase:

• Ctrl+Shift+I => Abre la ventana inspect (inspeccionar).
• onLoad => Evento de carga del navegador.
• Javascript agrega una serie de propiedades a cada tecla, con el fin de poder identificar y facilitar su manejo en caso necesario.
• En programación normalmente es mas cómodo trabajar con números debido a que ocupan menos espacio en memoria que las letras, aunque hoy en día esto ya no es problema por el avance de la tecnología, se sigue aplicando el mismo concepto.
• El keyCode de cada tecla no varía independientemente de que sea mayúscula o minúscula
• Objeto Literal => Lo constituye una variable que está compuesta internamente por una colección de variables, generalmente de valor constante. Una colección de variables se representa similar a un bloque de código.
• JSON => Javascript Object Model
• Proto => Es la manera en que el navegador estructura las información del objeto.
• SWITCH => Es una estructura de control generalmente utilizada para evitar el uso excesivo de IF anidados, haciendo de este modo un código más limpio y fácil de leer, se debe también evaluar su utilización ante cada situación para evitar su uso excesivo.

Aporte 

Cuando colocamos un solo igual (=) lo que estamos realizando en una asignación de valor . Es decir cuando queremos que una variable sea igual a algo solamente aplicamos un igual (=) como por ejemplo var profesor = "Freddy"; 

Luego cuando utilizamos un doble igual (==) lo que estamos realizando es una comparación entre dos valores . Por eso es que donde mas lo van a utilizar es dentro de los condicionales (if , swich) . Es decir que si queremos comparar si mi variable es igual a un valor aplicamos el doble igual (==) . profesor == "Freddy".

Por último existe algo mas que nos podemos encontrar, es un triple igual (===) lo que realiza esto es una comparación entre dos valores pero ademas de comparar el valor compara el tipo de los valores . Es decir si comparamos 10 === "10" , por mas que el valor sea el mismo nos va a decir que la comparación es falsa ya que un valor es de tipo entero y otro es de tipo alfanumérico 

En este desafió me quedo con la frase: 'less is more (menos es más)

document.addEventListener('keyup', drawKey);
var draw = document.getElementById('area_dibujo');
var lienzo = draw.getContext('2d');

var teclas = {
  arriba: 38,
  abajo: 40,
  izq: 37,
  der: 39
};

var ix = 150,
    iy = 150,
    fx = 150,
    fy = 150;
drawLines(ix, iy, fx, fy); //Punto de inicio

function drawKey(evento) {
switch (evento.keyCode) {
  case teclas.arriba:
    iy = iy - 10;
    drawLines('blue', ix, iy, fx, fy);
    fy = fy - 10

    console.log('ARRIBA');
  break;

  case teclas.abajo:
    iy = iy + 10;
    drawLines('blue', ix, iy, fx, fy);
    fy = fy + 10;

    console.log('ABAJO');
  break;

  case teclas.izq:
    fx = fx - 10;
    drawLines('red', ix, iy,  fx, fy);
    ix = ix - 10;

    console.log('IZQUIERDA');
    break;

  case teclas.der:
    fx = fx + 10;
    drawLines('red', ix, iy,  fx, fy);
    ix = ix + 10;

    console.log('DERECHA');
  break;

    default:
      console.log('Otra tecla');
      break;
  }
 }

function drawLines(color, xi, yi, xf, yf) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xi, yi);
  lienzo.lineTo(xf, yf);
  lienzo.stroke();
  lienzo.closePath();
}```

Les dejo mi ejercicio tomando en cuenta las paredes y no se desborde.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Dibujando con Flechas</title>
  </head>
  <body>
    <h1>Dibujando con Flechas</h1>
    <canvas id="area_de_dibujo" width="300" height="300"></canvas>
    <p>Mueve las flechas del teclado para dibujar.</p>
    <script src="eventosTeclado.js"></script>
  </body>
</html>

JS

var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
}

// keydown: tecla mantenida, keyup: tecla oprimida
document.addEventListener("keydown", dibujarTeclado);
var cuadradito = document.getElementById('area_de_dibujo');
var lienzo = cuadradito.getContext('2d');
var x = 150, y = 150; // Posiciones Iniciales.
var colorInicial = "red";
var colorParedes = "skyblue";
var colorcito = "#FAA";

//console.log(evento);

// Dibujar el punto de inicio.
dibujarLinea(colorInicial, x - 1, y - 1, x + 1, y + 1);
// Dibujar las paredes del canvas.
dibujarLinea("skyblue", 0, 0, 0, 300); // Izquierda
dibujarLinea("skyblue", 300, 0, 300, 300); // Derecha
dibujarLinea("skyblue", 0, 0, 300, 0); // Arriba
dibujarLinea("skyblue", 0, 300, 300, 300); // Abajo

function dibujarTeclado(evento) {
  var movimiento = 10;

  switch (evento.keyCode) {
    case teclas.UP:
      if (y > 0) {
        dibujarLinea(colorcito, x, y, x, y - movimiento);
        y = y - movimiento;
      }
    break;
    case teclas.DOWN:
      if (y < 300) {
        dibujarLinea(colorcito, x, y, x, y + movimiento);
        y = y + movimiento;
      }
    break;
    case teclas.LEFT:
      if (x > 0) {
        dibujarLinea(colorcito, x, y, x - movimiento, y);
        x = x - movimiento;
      }
    break;
    case teclas.RIGHT:
      if(x < 300) {
        dibujarLinea(colorcito, x, y, x + movimiento, y);
        x = x + movimiento;
      }
    break;
  }
}

function dibujarLinea(color, xInicial, yInicial, xFinal, yFinal) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3; // Grosor de la línea.
  lienzo.moveTo(xInicial, yInicial);
  lienzo.lineTo(xFinal, yFinal);
  lienzo.stroke();
  lienzo.closePath();
}

_“La teoría sobre usar if-else versus switch está basada en el número de condiciones que se están evaluando: a mayor número de condiciones, más inclinado estas a usar switch en lugar de if-else. Normalmente depende de cual codigo es más fácil de leer. El argumento es que if-else es más fácil de leer cuando hay menos condiciones y switch es más fácil de leer cuando el número de condiciones es grande.” Fuente

En el primer caso tenemos pocas condiciones y switch solo complica el código:

if (found){
    //do something
} else {
    //do something else
}

switch(found){
    case true:
        //do something
        break;

    default:
        //do something else
}

En el segundo caso tenemos más condiciones, notamos que if-else es bastante más complicado de leer

if (color == "red"){
    //do something
} else if (color == "blue"){
    //do something
} else if (color == "brown"){
    //do something
} else if (color == "black"){
    //do something
} else {
    //do something
}

switch (color){
    case "red":
        //do something
        break;

    case "blue":
        //do something
        break;

    case "brown":
        //do something
        break;

    case "black":
        //do something
        break;

    default:
        //do something
}

Solo digiten log + tab y obtendrán console.log() más rápido.

Este es mi proyecto

Este es mi código por si alguien lo quiere

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibuja con las lineas</title>
    <style type="text/css">
      body
      {
          background-color: #eff7e1;

          font-family: Helvetica;
      }

      p
      {
        font-family:Courier;
      }
      small
      {font-family:Courier;}
        div.a{text-align: center;}

      canvas
      {
        background-color: #FFFFFF;
      }
      input type="range" {background-color: #f1f1f1;}

  </style>

  </head>
<div class="a"><body>
    <h1>Ya puedes dibujar con el mause!!</h1>
    <p><strong>Has click para pocicionar el comienzo de la linea y suentalo para terminarlo</strong></p>
    <p><small><small>si quieres mejorar tu experiencia sigue bajando</small></small></p>
    <canvas id="area_de_dibujo" width="500" height="500"  style="border: 2px solid black"></canvas><br><br><br>
    <h1>Quieres personalisar tus dibujos?</h1><br><br>
    <p>Escoje el colorque mas te guste <input type="color" id="colorcito"/></p>
    <p>Elige el grosor de la linea <input type="range" name="rango"  min="1" max="9" id="grosor" ></p>
    <p>Si aplastas a  Gastly limpiaras el lienzo <button type="reset">
  <img src="descarga.png" alt="imagen" width="32" height="32" id="borrar"style="vertical-align: middle">

</button></p>
    <canvas id="area_de_dibujo_2" width="500" height="500"  style="border: 2px solid black"></canvas><br><br>

    <script src="teclas_flechas1.2.js"></script>
  </body></div>
</html>

area_de_dibujo.addEventListener("mousedown", dibujarClik);
area_de_dibujo.addEventListener("mouseup", dibujarClik_2);
area_de_dibujo_2.addEventListener("mousedown", dibujarClik_2_1);
area_de_dibujo_2.addEventListener("mouseup", dibujarClik_2_2);

var boton = document.getElementById("borrar");

boton.addEventListener("click", borrador);
var colorsote = document.getElementById("colorcito").value;
var grosorcito = document.getElementById("grosor").value;

var cuadrito = document.getElementById("area_de_dibujo");
var cuadrito_2 = document.getElementById("area_de_dibujo_2");

var papel = cuadrito.getContext("2d");
var papel_2 = cuadrito_2.getContext("2d");

var colorsote;


var down_X;
var down_Y;
var up_X;
var up_Y;

var down_X1;
var down_Y1;
var up_X1;
var up_Y1;

function borrador()
{
  papel_2.clearRect(0, 0, cuadrito_2.width, cuadrito_2.height);
}

function dibujarClik(evento)
{
  var color = "black";
  down_X = evento.offsetX;
  down_Y = evento.offsetY;
  console.log("PRECIONADO " + evento.offsetX + "X");
  console.log("PRECIONADO " + evento.offsetY + "Y");

  dibujarLinea(color, down_X - 1, down_Y - 1, down_X + 1, down_Y + 1, papel);

}
function dibujarClik_2(evento_2)
{
  var color = "black";
  up_X = evento_2.offsetX;
  up_Y = evento_2.offsetY;
  console.log("SOLTADO " + evento_2.offsetX + "X");
  console.log("SOLTADO " + evento_2.offsetY + "Y");
  dibujarLinea(color, down_X, down_Y, up_X, up_Y, papel);
}
function dibujarClik_2_1(evento_3)
{
  var colorsote = document.getElementById("colorcito").value;

  var punto = 1;
  down_X1 = evento_3.offsetX;
  down_Y1 = evento_3.offsetY;
  console.log("PRECIONADO " + evento_3.offsetX + "X");
  console.log("PRECIONADO " + evento_3.offsetY + "Y");

  dibujarLinea_2(colorsote, down_X1 - punto, down_Y1 - punto, down_X1 + punto, down_Y1 + punto, papel_2, 3);

}
function dibujarClik_2_2(evento_4)
{
  var colorsote = document.getElementById("colorcito").value;
  var grosorcito = document.getElementById("grosor").value;
  up_X1 = evento_4.offsetX;
  up_Y1 = evento_4.offsetY;
  console.log("SOLTADO " + evento_4.offsetX + "X");
  console.log("SOLTADO " + evento_4.offsetY + "Y");
  dibujarLinea_2(colorsote, down_X1, down_Y1, up_X1, up_Y1, papel_2, grosorcito);
}


function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}
function dibujarLinea_2(color, xinicial, yinicial, xfinal, yfinal, lienzo, grosore)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = grosore;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

Hola soy un nuevo estudiante y estoy en mi primer curso de programación, realizando esta clase el 29/04/2020 (plena cuarentena xd) me di cuenta que la palabra/herramienta de “keyCode” para poder ver las teclas del teclado en su numero de referencia no funciona o por lo menos ami no.Busque en Internet y encontré un post en stackoverflow que me sugerían usar en ves del “keyCode” que use “which” para ver el numero de cada tecla y me funciono 😃
Solo por si alguien mas tenia ese problema lo menciono,ME ENCANTA PLAZTI!!!

Mi Codigo incluye las tipicas letras A,W,D,S cuando un personaje se mueve en juego de PC

En mi opinion, el mejor caso de flujo de control para esta situacion, es el IF

var teclas = {
// Movimiento hacia la Izquierda
    LEFT: 37,
    A: 65,
// Movimiento hacia Arriba
    UP: 38 ,
    W: 87,
//  Movimiento hacia la Derecha
    RIGTH: 39,
    D: 68,
//  Movimiento hacia Abajo
    DOWN: 40,
    S: 83,
};

const CANVAS = document.getElementById('myCanvas');
document.addEventListener('keyup', teclaPresionada);

function teclaPresionada (evento) {
    if ( evento.keyCode == teclas.LEFT || evento.keyCode == teclas.A ) {

        console.log('Izquierda');

    } else if ( evento.keyCode == teclas.UP || evento.keyCode == teclas.W ) {

        console.log('Arriba');

    } else if ( evento.keyCode == teclas.RIGTH || evento.keyCode == teclas.D ) {

        console.log('Derecha');

    } else if ( evento.keyCode == teclas.DOWN || evento.keyCode == teclas.S ) {

        console.log('Abajo');

    } else {
        console.log('otra tecla')
    }
}```

Hola, compañeros les comparto mi código

No me funcionaba mi codigo y estaba igual al de Fredy y al de mis compañeros. Hasta que me di cuenta que switch(evento.keycode) tenia el error de keycode no es en minuscula, es en mayuscula switch(evento.keyCode). Cosas tan simples que afectan todo.

Excelente, vídeo aprendí más en 38 min aquí que 1 semestre en la universidad XD

se debe estar muy pendiente de las mayúsculas y minúsculas, ademas de los puntos y de las comas y punto y coma…
y no es solo por buenas practicas sino también porque a veces no se
ejecuta el código

Vengo del curso de programación básica del 2014, se nota bastante la diferencia con platzi Core. Felicidades amo esta plataforma.

Mi primer reto fue hacer que con el teclado se puedan dibujar líneas diagonales usando el teclado. Las diagonales las dibuja de un color diferente de las horizontales y las verticales.

Esta es mi solución

Muchas gracias Freddy por devolverme la pasión de programar! No sabes cuánto te lo agradezco, y apenas pueda me suscribo a tu sitio!

Vaya, he seguido varios cursos distintos en youtube que en verdad me han ayudado bastante para aprender a programar, pero debo decir que las explicaciones en este curso y los ejercicios son mucho más interesantes y mejores.

Me costó bastante porque no me había dado cuenta que el switch va dentro de la Funcion. Erro de principiante. Quede muy contento con el final.

También había cometido el error de poner el número de UP a Right y el archivo enviaba cualquier cosa…

var teclas = {UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39};

console.log(teclas);

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento)
{
  if(evento.keyCode == teclas.UP)
  {
    console.log("Arriba");
  }
  if(evento.keyCode == teclas.DOWN)
  {
    console.log("Abajo");
  }
  if(evento.keyCode == teclas.RIGHT)
  {
    console.log("Derecha");
  }
  if(evento.keyCode == teclas.LEFT)
  {
    console.log("Izquierda");
  }

  switch (evento.keyCode)
  {
    case teclas.UP:
      console.log("ArribaSwitch");
    break;
    case teclas.DOWN:
      console.log("AbajoSwitch");
    break;
    case teclas.RIGHT:
      console.log("DerechaSwitch");
    break;
    case teclas.LEFT:
      console.log("IzquierdaSwitch");
    break;
    default:
      console.log("OtraTeclaSwitch");
    break;
  }

}

Así se ve mi video juego que te permite mover le cerdo pero debes tener cuidado con las vacas y los pollos que se mueven aleatoriamente mientras tu avanzas y si te toca perdiste el juego. Ganas si llegas a donde está la llma Jajjajaja
.
.
.

var vp   =document.getElementById("villaplatzi");
document.addEventListener("keyup",moverCerdo);
document.addEventListener("keyup",moverVaca);
document.addEventListener("keyup",moverVaca1);
document.addEventListener("keyup",moverPollos1);
document.addEventListener("keyup",moverPollos2);
document.addEventListener("keyup",moverPollos3);
document.addEventListener("keyup",moverPollos4);
var papel= vp.getContext("2d");


var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

var fondo={
  url:"tile.png",
  cargaOK: false
}
var vaca = {
  url: "vaca.png",
  cargaOK: false
}
var vaca1 = {
  url: "vaca1.png",
  cargaOK: false
}
var cerdo = {
  url: "cerdo.png",
  cargaOK: false
}
var pollo = {
  url: "pollo.png",
  cargaOK: false
}
var fuego = {
  url: "fuego.png",
  cargaOK: false

};

fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load",cargarFondo);

vaca.imagen = new Image();
vaca.imagen.src = vaca.url;
vaca.imagen.addEventListener("load",cargarVacas);

vaca1.imagen = new Image();
vaca1.imagen.src = vaca1.url;
vaca1.imagen.addEventListener("load",cargarVacas1);

cerdo.imagen = new Image();
cerdo.imagen.src = cerdo.url;
cerdo.imagen.addEventListener("load",cargarCerdos);

pollo.imagen = new Image();
pollo.imagen.src = pollo.url;
pollo.imagen.addEventListener("load",cargarPollos);

fuego.imagen = new Image();
fuego.imagen.src = fuego.url;
fuego.imagen.addEventListener("load",cargarFuego);

function cargarFondo()
{
  fondo.cargaOK =true;
  dibujar();
}
function cargarVacas()
{
  vaca.cargaOK =true;
  dibujar();
}
function cargarVacas1()
{
  vaca1.cargaOK =true;
  dibujar();
}
function cargarCerdos()
{
  cerdo.cargaOK =true;
  dibujar();
}
function cargarPollos()
{
  pollo.cargaOK =true;
  dibujar();
}
function cargarFuego()
{
  fuego.cargaOK =true;
  dibujar();
}

var xcerdo= 400;
var ycerdo= 400;

var xvaca= 320;
var yvaca= 240;

var xvaca1= 150;
var yvaca1= 200;

var xpollo1=aleatorio(1,100);
var ypollo1=aleatorio(200,300);
var xpollo2=aleatorio(30,350);
var ypollo2=aleatorio(100,400);
var xpollo3=aleatorio(200,250);
var ypollo3=aleatorio(10,300);
var xpollo4=aleatorio(10,500);
var ypollo4=aleatorio(300,400);

var movimiento = 20;
var cantidadPollos= aleatorio(3,6)
console.log(cantidadPollos);

function dibujar()
{
  if(fondo.cargaOK)
  {
    papel.drawImage(fondo.imagen,0,0);
  }
    if(vaca.cargaOK)
  {
      papel.drawImage(vaca.imagen,xvaca,yvaca);
  }
  if(vaca1.cargaOK)
  {
    papel.drawImage(vaca1.imagen,xvaca1,yvaca1);
  }
  if(cerdo.cargaOK)
  {
      papel.drawImage(cerdo.imagen,xcerdo,ycerdo);
  }
  if(pollo.cargaOK)
  {
    papel.drawImage(pollo.imagen,xpollo1,ypollo1);
    papel.drawImage(pollo.imagen,xpollo2,ypollo2);
    papel.drawImage(pollo.imagen,xpollo3,ypollo3);
    papel.drawImage(pollo.imagen,xpollo4,ypollo4);
  }
  if(fuego.cargaOK)
  {
    papel.drawImage(fuego.imagen,1,1);
  }
}

var xyzPollos1;

function moverPollos1(evento)
{
    var xyzPollos1= aleatorio(37,40)

    if (xyzPollos1==38 && ypollo1-movimiento>-20 ) {
      ypollo1 = ypollo1 - movimiento;
      dibujar();
      console.log("si");}

    if (xyzPollos1==40 && ypollo1+movimiento<450) {
      ypollo1 = ypollo1 + movimiento;
      dibujar();
      console.log("no");}

    if (xyzPollos1==37 && xpollo1-movimiento>-20) {
      xpollo1 = xpollo1 - movimiento;
      dibujar();
      console.log("ssisi");}

    if (xyzPollos1==39 && xpollo1+movimiento<440) {
      xpollo1 = xpollo1 + movimiento;
      dibujar();
      console.log("nnono");}
}
function moverPollos2(evento)
{
    var xyzPollos2= aleatorio(37,40)

    if (xyzPollos2==38 && ypollo2-movimiento>-20 ) {
      ypollo2 = ypollo2 - movimiento;
      dibujar();
      console.log("si");}

    if (xyzPollos2==40 && ypollo2+movimiento<450) {
      ypollo2 = ypollo2 + movimiento;
      dibujar();
      console.log("no");}

    if (xyzPollos2==37 && xpollo2-movimiento>-20) {
      xpollo2= xpollo2 - movimiento;
      dibujar();
      console.log("ssisi");}

    if (xyzPollos2==39 && xpollo2+movimiento<440) {
      xpollo2 = xpollo2 + movimiento;
      dibujar();
      console.log("nnono");}
}
function moverPollos3(evento)
{
    var xyzPollos3= aleatorio(37,40)

    if (xyzPollos3==38 && ypollo3-movimiento>-20 ) {
      ypollo3 = ypollo3 - movimiento;
      dibujar();
      console.log("si");}

    if (xyzPollos3==40 && ypollo3+movimiento<450) {
      ypollo3 = ypollo3 + movimiento;
      dibujar();
      console.log("no");}

    if (xyzPollos3==37 && xpollo3-movimiento>-20) {
      xpollo3 = xpollo3 - movimiento;
      dibujar();
      console.log("ssisi");}

    if (xyzPollos3=39 && xpollo3+movimiento<440) {
      xpollo3 = xpollo3 + movimiento;
      dibujar();
      console.log("nnono");}
}
function moverPollos4(evento)
{
    var xyzPollos4= aleatorio(37,40)

    if (xyzPollos4==38 && ypollo4-movimiento>-20 ) {
      ypollo4 = ypollo4 - movimiento;
      dibujar();
      console.log("si");}

    if (xyzPollos4==40 && ypollo4+movimiento<450) {
      ypollo4 = ypollo4 + movimiento;
      dibujar();
      console.log("no");}

    if (xyzPollos4==37 && xpollo4-movimiento>-20) {
      xpollo4 = xpollo4 - movimiento;
      dibujar();
      console.log("ssisi");}

    if (xyzPollos4==39 && xpollo4+movimiento<440) {
      xpollo4 = xpollo4 + movimiento;
      dibujar();
      console.log("nnono");}
}

var xyz;

function moverVaca(evento)
{
    var xyz= aleatorio(37,40)

    if (xyz==38 && yvaca-movimiento>-20 ) {
      yvaca = yvaca - movimiento;
      dibujar();
      console.log("up");}

    if (xyz==40 && yvaca+movimiento<450) {
      yvaca = yvaca + movimiento;
      dibujar();
      console.log("down");}

    if (xyz==37 && xvaca-movimiento>-20) {
      xvaca = xvaca - movimiento;
      dibujar();
      console.log("left");}

    if (xyz==39 && xvaca+movimiento<440) {
      xvaca = xvaca + movimiento;
      dibujar();
      console.log("right");}

}

var xyz1;

function moverVaca1(evento)
{
    var xyz1= aleatorio(37,40)

    if (xyz1==38 && yvaca1-movimiento>-20 ) {
      yvaca1 = yvaca1 - movimiento;
      dibujar();
      console.log("si");}

    if (xyz1==40 && yvaca1+movimiento<450) {
      yvaca1 = yvaca1 + movimiento;
      dibujar();
      console.log("no");}

    if (xyz1==37 && xvaca1-movimiento>-20) {
      xvaca1 = xvaca1 - movimiento;
      dibujar();
      console.log("ssisi");}

    if (xyz1==39 && xvaca1+movimiento<440) {
      xvaca1 = xvaca1 + movimiento;
      dibujar();
      console.log("nnono");}

}

function moverCerdo(evento)
{
    if(evento.keyCode==teclas.UP && ycerdo-movimiento>-20 ){
      ycerdo = ycerdo - movimiento;
      dibujar();
      console.log("arriba");}
    if(evento.keyCode==teclas.DOWN && ycerdo+movimiento<450){
      ycerdo = ycerdo + movimiento;
      dibujar();
      console.log("abajo");}
    if(evento.keyCode==teclas.LEFT && xcerdo-movimiento>-20){
      xcerdo = xcerdo - movimiento;
      dibujar();
      console.log("izquierda");}
    if(evento.keyCode==teclas.RIGHT && xcerdo+movimiento<440){
      xcerdo = xcerdo + movimiento;
      dibujar();
      console.log("derecha");}

    if ((xcerdo <= xvaca+70 && xcerdo+70 >= xvaca) && (ycerdo <= yvaca+30 && ycerdo+30 >= yvaca)){
      alert("Perdio: PRESIONA F5");}
    if ((xcerdo <= xvaca1+70 && xcerdo+70 >= xvaca1) && (ycerdo <= yvaca1+30 && ycerdo+30 >= yvaca1)) {
      alert("Perdio: PRESIONA F5");}
    if ((xcerdo <= xpollo1+40 && xcerdo+40 >= xpollo1) && (ycerdo <= ypollo1+30 && ycerdo+30 >= ypollo1)) {
      alert("Perdio: PRESIONA F5");}
    if ((xcerdo <= xpollo2+40 && xcerdo+40 >= xpollo2) && (ycerdo <= ypollo2+30 && ycerdo+30 >= ypollo2)) {
      alert("Perdio: PRESIONA F5");}
    if ((xcerdo <= xpollo3+40 && xcerdo+40 >= xpollo3) && (ycerdo <= ypollo3+30 && ycerdo+30 >= ypollo3)) {
      alert("Perdio: PRESIONA F5");}
    if ((xcerdo <= xpollo4+40 && xcerdo+40 >= xpollo4) && (ycerdo <= ypollo4+30 && ycerdo+30 >= ypollo4)) {
      alert("Perdio: PRESIONA F5");}
    if (xcerdo <= 20 && ycerdo <= 1) {
      alert("GANASTE");}

}





function aleatorio(min,maxi)
{
  var resultado;
  resultado = Math.floor(Math.random()*(maxi - min + 1))+min;
  return resultado;
}

Les recomiendo agregar comentarios a sus códigos, en JavaScript se hace colocando “//” en cualquier lado, el resto de la línea será ignorado por el compilador (es decir, que no hará diferencia. Sirve como el console.log pero dentro del código, y no en la consola). También pueden comentar varias líneas de código usando “/" para abrir el comentario y "/” para cerrarlo.

// Añado un escuchador que me reconozca el teclado
document.addEventListener("keyup", dibujarTeclado);

// Objeto con mis valores keyCode de las teclas que me interesan
var teclas = {
	LEFT: 	37,
	UP: 	38,
	RIGHT: 	39,
	DOWN: 	40 
};

// Función a llamar cuando se reconozca una tecla
function dibujarTeclado(evento){
	switch(evento.keyCode){	// Variable a estudiar
		case teclas.LEFT:
			console.log("Se presionó izquierda");
			break;
		case teclas.UP:
			console.log("Se presionó arriba");
			break;
		case teclas.RIGHT:
			console.log("Se presionó derecha");
			break;
		case teclas.DOWN:
			console.log("Se presionó abajo");
			break;
		default:
			console.log("No presionaste una flecha :(");
	}
}

“Los programadores convierten problemas grandes en problemas chiquitos” Apliquemos esto para la vida y seguramente no nos ahogaremos.

Mi aporte: Para hacer comando rapido usar F12 les ayudar abrir rápido la consola, SOLAMENTE Visual Studio Code:usar ALT + SHIFT+f les ayuda a organizar el código, Para mover una lìnea código sin copiar y pegar pueden usar solo selecionandola oprimiendo ALT y usar las flechas para mover arriba o abajo, Si tiene una variable que se repite por todo el código y es muy largo y deben cambiar el nombre con seleccionarla y darle f2 la variable o nombre de funcion o lo que sea se cambiara en todo el código.
Espero sea de ayuda para todos ustedes

Cada clase debería de proponer algunos ejercicios.

Si tienen todo bien y no pueden ver el evento, sólo hagan click sobre el espacio en blanco y ahí sí comiencen a presionar teclas. Me pasó que sólo escribía y sufrí un buen rato jajajaja

Diferencia entre keyup/keydown:

• keydown → detecta el evento mientras este presionada la tecla (si mantenemos presionada la tecla tendremos muchas llamadas)
• keyup → detecta el evento solo cuando dejamos de presionar la tecla (detecta el evento una sola vez por presionado)

Nota:
pasa lo mismo con los eventos mouseup y mousedown

Por segunda vez veo esta clase y me parece increíble cuánto puede aprender uno cuando se devuelve a intentar comprender cosas que no comprendió bien en el primer intento. Amo esto

Mi tarea permite escoger ancho y alto del canvas, cantidad de lineas y color.
Este es el codigo HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>DIBUJANDO CON CANVAS</title>
</head>
<body>
<h1>Flor en CANVAS</h1>
<p>
Ancho del dibujo :
<input type=“text” id=“texto-ancho”/>
Alto del dibujo :
<input type =“text” id=“texto-alto”/>
Cantidad de líneas :
<input type=“text” id=“texto-lineas”/>
Color :
<input type=“text” id=“texto-color”/>
<input type=“button” value=“A darle” id=“botoncito”/>
</p>
<canvas id=“dibujito” width=600 height=600></canvas>
<p>asi queda la flor.</p>
<script src=“dibujo.js”>
</script>
</body>
</html>

El codigo javascript:

var texto=document.getElementById(“texto-lineas”);
var ancho=document.getElementById(“texto-ancho”);
var alto=document.getElementById(“texto-alto”);
var color=document.getElementById(“texto-color”);

var boton=document.getElementById(“botoncito”);
boton.addEventListener(“click”,dibujoPorClick);

var d=document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);

function dibujarLinea(color,xinicial,yinicial,xfinal,yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle =color;
lienzo.moveTo(xinicial,yinicial);
lienzo.lineTo(xfinal,yfinal);
lienzo.stroke();
lienzo.closePath();
}

function dibujoPorClick()
{

d.width=ancho.value;
d.height=alto.value;
var l=0;
var lineas = parseInt(texto.value);
var alto2 = parseInt(alto.value);
var ancho2= parseInt(ancho.value);
var colorcito = color.value;
var espaciox = ancho2/2 / lineas;
var espacioy = alto2/2 / lineas;
var ax,ay,bx,by;
console.log(ancho2,alto2,espaciox,espacioy,lineas);

for(l=0 ; l < lineas ; l++)
{
ax = espaciox * l;
ay = espacioy * l;
bx = espaciox * (l + 1);
by = espacioy * (l + 1);
dibujarLinea(colorcito,0,ay,bx,alto2/2);
dibujarLinea(colorcito,ax,0,ancho2/2,by);
dibujarLinea(colorcito,ancho2/2,alto2/2-ay,ancho2/2+bx,0);
dibujarLinea(colorcito,ancho2/2+ax,alto2/2,ancho2,alto2/2-by);

dibujarLinea(colorcito,0,alto2-ay,bx,alto2/2);
dibujarLinea(colorcito,ax,alto2,ancho2/2,alto2-by);

dibujarLinea(colorcito,ancho2/2,alto2/2+ay,ancho2/2+bx,alto2);
dibujarLinea(colorcito,ancho2/2+ax,alto2/2,ancho2,alto2/2+by);

}
//Dibuja bordes exteriores
dibujarLinea(colorcito,1,1,ancho2-1,1);
dibujarLinea(colorcito,ancho2-1,1,ancho2-1,alto2-1);
dibujarLinea(colorcito,1,1,1,alto2-1);
dibujarLinea(colorcito,1,alto2-1,ancho2-1,alto2-1);
//Dibuja bordes internos
dibujarLinea(colorcito,ancho2/2,1,ancho2/2,alto2);
dibujarLinea(colorcito,0,alto2/2,ancho2,alto2/2);
}

Y los resultados:

Felicitaciones a Platzi y a Freddy este curso es genial.

Hice el código para dibujar con el mouse, inicia la linea con mousedown desplaza el cursor con el botón presionado hasta donde quiere que termine y dibuja la linea con mouseup, funciona bien, pero en móviles no me funciona.

Alguien me puede explicar como hago para que me funcione en un iPhone?

Ver código en: 

http://www.piloto266.com/ensayo2

Saludos,

Hola! una duda porque en atom
Al colocar html y tab me aparece así:

<!DOCTYPE html>
<html lang=“en” dir=“ltr”>

realmente no afecta en nada solo que no entiendo porque me aparece así …
😄

¿Quién más prefiere estudiar de noche?

Estoy repasando antes de comprar el Platzi expert y volverme parte del la maravillosa familia Platzi.

Gracias Freddy, no esperaba llegar tan lejos en un curso gratuito

Buenas practicas:

• Los nombres de las funciones empiezan por minúsculas y para diferenciar cada palabra nueva usamos Mayúsculas (también se puede usar _ para diferenciar palabras pero lo usual en javaScript son las mayúsculas)
• Es mala practica tener números sueltos en el código es mejor darles un nombre descriptivos (para que sirven/que son)
• Si tenemos constantes o variables que no van a cambiar usamos MAYUSCULAS para hacerlo notar
• Es muy util aprender y usar los atajos del teclado

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Dibujando con mouse</title>
</head>
<body>
<canvas id=“area_de_dibujo” width=“300” height=“300”></canvas>
<p>Mueve el mouse para dibujar<p>
<script src=“eventosmouse.js”></script>
</body>
</html>

var cuadro = document.getElementById(“area_de_dibujo”)
var hoja = cuadro.getContext(“2d”);
var xi, yi, xf, yf, click;
var color = “red”

cuadro.addEventListener(“mousedown”, clickD);
cuadro.addEventListener(“mouseup”, clickU);
cuadro.addEventListener(“mousemove”, clickM);

function dibujarlinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.lineWidth = 3;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}

function clickD(evento1)
{
click=true;
xi = evento1.layerX;
yi = evento1.layerY
}

function clickM(evento2)
{
if(click)
{
xf = evento2.layerX;
yf = evento2.layerY
dibujarlinea(color, xi, yi, xf, yf, hoja)
xi = xf;
yi = yf;
}
}

function clickU(evento3)
{
click = false;
}

"use stric"
/**
*@Autor: Edwin zenon
*@fecha: 12/04/2020 9:41pm
*/
document.addEventListener("keyup",dibujarTeclado);
function dibujarTeclado(evento){
  //console.log(evento);
  switch (evento.keyCode) {
    case 37:
      console.log("izquierda");break;
    case 38:
    console.log("arriba");break;
    case 39:
      console.log("derecha");break;
    case 40:
      console.log("abajo");break;

    default:
    console.log("No mames wey");
    break;

    }

}```

var teclas = {UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 };

document.addEventListener(“keyup”,dibujarTeclado);
function dibujarTeclado(evento)
{
switch (evento.keyCode) {
case teclas.DOWN:
console.log(“abajo”)
break;
case teclas.UP:
console.log(“arriba”);
break;
case teclas.LEFT:
console.log(“izquierda”);
break;
case teclas.RIGHT:
console.log(“derecha”);
break;
default:
}
}

Realice el código con laposicion inicial que me tome al dar un click en el canva

concuerdo con usar el switch en casos muy repetitivos y se ve el código muy sencillo de leer, los if los uso cuando son sólo uno o cuando es en cadena; un if tras otro if.

Me parece que este curso deberia primero que todo comenzar por definir que es cada cosa y como reconocerlo de acuerdo a la estructura sintactica. por ejemplo que es un objeto, que es su atributo etc.

switch (evento.keyCode) {
case teclas.ARRIBA:
console.log(“subir”);
break;
case teclas.ABAJO:
console.log(“bajar”);
break;
case teclas.IZQUIERDA:
console.log(“izquierda”);
break;
case teclas.DERECHA:
console.log(“dercha”);
break;
default:
alert(“presione las flechas”)

reanudo mis clases despues de unos dias de mucho trabajo, y estoy mas entusiasmado. buenisima clase

Si también tienes problemas para ver (evento) en Chrome puede ser por la versión del navegador.
La manera en que te salen las especificaciones del KeyboardEvent es:

1. Ve a la opción “Sources” a un lado de “Console”.
2. De lado izquierdo inferior hay un menú con la opción "Event Listener Breakpoints,
   dale click para desplegar las opciones que tiene y dale check en la casilla “Keyboard”.
3. Da click en el navegador y presiona la tecla que quieras. Y vualá!!
4. En la ventana Scope te aparecerán las especificaciones 😃

Espero les funcione!

Switch es más comodo porque agrupa las opciones; no sirve para mayor o menor que, sirve para comparar una cosa inicial con una cosa final. Es una sintaxis que no se ve en ninguna instrucción, en vez de tener bloques de código tiene dos puntos y un break.

desafío completado :V

var teclas = {
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT: 39
};

console.log(teclas);

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento)
{
  
  switch (evento.keyCode)
  {
    case teclas.UP:
      console.log("Camino al cielo");
    break;
    case teclas.DOWN:
      console.log("Camino al infierno");
    break;
    case teclas.LEFT:
      console.log("Comunista");
    break;
    case teclas.RIGHT:
      console.log("Liberal");
    break;
    default:
    console.log("la existencia precede a la esencia");
  }
}

¡Listo!

Resumen:

• Los eventos no necesitan parámetros porque son opcionales, + (variable) que guarda todos los eventos en esa variable
• keyCode —> código interno del sistema operativo, es la forma en la que se almacenan letras u otras.

1. Todas las teclas tienen un código de esos.
2. De esa forma esta implementado por dentro en el interior de JavaScript

• Los números gastan menos espacio en memoria
• Forma fácil de saber cual de las flechas estoy oprimiendo es guardándolo en una variable especial

1. Una especie de colección de variables
2. Ejemplo: (edad = 20) es una variable (caja) y esa caja JavaScript la llama un objeto literal
3. O simplemente un objeto, que tiene una colección interna de variables
4. Objeto inmediatamente descrito
5. Cuando tienes una variable que no va a cambiar en mucho tiempo , y una práctica interna de los programadores es poner esa variable en mayúsculas:
   Ejemplo —> keyCode (“donde C esta en mayúscula”)
6. variable, atributo o propiedad que estén en mayúscula no cambiará a lo largo del tiempo: ejemplo —> UP, DOWN, LEFT, RIGHT
7. Sería un valor perpetuo (“Por decirlo así”);
8. Una colección de variables es igual a un bloque de código y parecido al CSS o JSON
9. Notación de objetos en JavaScript

• Var con var por dentro debes crear un bloque de código
• Javascript Object Notation o JSON
• Proto —> alert(“mundo extraño”); forma en que internamente los navegadores estructuran un objeto para que este listo
• Recuerda —> switch es una estructura de control que se utiliza cuando hay mucho if

A mi no me aparece en el navegador en consolémosle no me aparece “tecla oprimida”…uso el programa visual studio

Es una mala practica colocar números sueltos dentro del código, cuando tenemos números que significan algo no nos cuesta nada crear variables que le agreguen ese significado, además será mas fácil acceder a ellas.

Alguien puede ayudarme explicándome por que la linea de código…document.addEventListener(“Keydown” , dubijarTeclado);
no me funciona ?
no me marca error pero tampoco se ejecuta cuando declaro la función en la siguiente linea.

hola tengo un pequeño problema al momento de utilizar addEventListener no pasa nada, no entiendo por que.
Alguien que me pueda ayudar

Mi aporte!

eventos.js

var teclas = {UP: 38, DOWN: 40, LEFT: 37, RIGTH: 39 }; //JSON (JavaScript Object Notation)

document.addEventListener("keyup",dibujarTeclado); //keyup:soltar tecla | keydown:presionar tecla

function dibujarTeclado(evento){
	switch(evento.keyCode){
		case teclas.UP:
			console.log("arribea");
			break;
		case teclas.DOWN:
			console.log("abajo");
			break;
		case teclas.LEFT:
			console.log("izquierda");
			break;
		case teclas.RIGTH:
			console.log("derecha");
			break;
		default:
			console.log("otra tecla");
			break;
	}//end switch
}//end dibujarTeclado

flechas.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Dibujando con flechas</title>
</head>
<body>
	<canvas width="300" height="300" id="area_de_dibujo"></canvas>
	<p>Mueve las flechas del teclado para dibujar</p>
	<script src="eventos.js"></script>
</body>
</html>

Saludos!

Un breve (muy breve) resumen:
Se detecto un evento del teclado y para eso usamos document.addEventListener (“Escucha el evento”) y luego lo definimos con keyup; keydown y luego se definió la función function dibujarTeclado(evento) que se produciría al realizar el evento y se le agrego la una variable donde se guardaría el evento y adentro de la función usamos _switch (evento.keyCode) _ que es un condicional como if pero este los agrupa.

document.addEventListener("keyup",breaki)

var teclas =
{
  UP:   38,
  DOWN: 40,
  LEFT: 37,
  RIGH: 39
};
      function breaki(breac)
    {
      switch (breac.keyCode)
      {
        case teclas.UP:
        console.log("arriba");
        break;
        case teclas.DOWN:
        console.log("abajo");
        break;
        case teclas.LEFT:
        console.log("izquierda");
        break;
        case teclas.RIGH:
        console.log("derecha");
        break;
        default:
        console.log("otraTecla")
      }
    }

Muchas Gracias Freddy, yo nunca me imagine de que iba a escribir lineas de códigos, excelente pedagogía.

en javascript una variable con variables internas se manejan como objetos, mientras q en otros lenguajes se manejan como arreglos o variables de varias dimensiones. y el uso de switch tiene otra funcion de condicional.

var teclas = {

  UP: 38,

  DOWN: 40,

  LEFT: 37,

  RIGHT: 39

};

console.log(teclas);

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento)

{

 switch (evento.keyCode)

  {

   case teclas.UP:

   console.log("arriba");

    break;

  case teclas.DOWN:

  console.log("abajo");

    break;

  case teclas.LEFT:

  console.log("izquierda");

    break;

  case teclas.RIGHT:

  console.log("derecha");

  break;

   default:

   console.log("otras teclas");

 }

}

iba hacer una anidacion del codigo pero la opcion de switch es mejor.

¡La manera en la que explicas es brutal!
Mucho mejor que los profesores de mi Universidad.
De verdad se agradece muchísimo el esfuerzo;
Supe de Platzi por un programa de radio, y comentaron la iniciativa que tuvieron con respecto a Venezuela. Es admirable 😄

Este curso es lo máximo!!!
Tiene bastante información y les recomiendo ver las clases al menos un par de veces para anotar la info clave (que es un montón, al menos para los que recién aprendemos) y luego intentar hacer el código por uno mismo.

Resumen a la antigua de esta Clase.

He puesto los puntos que me han parecido mas importantes.

Objeto JavaScript

Freddie la consola no se muestra en mi navegador de la manera en que tu la tienes en el video. 

Hola!!! Incluyo lo q me ha quedado luego de la inclusión de las otras teclas…

Le puse también A, W, S, D

Alguein sabe por que me parece en rojo el document?
document.addEventListener(“keydown”,dibujartecaldo);

A mi en lo personal me gustó y me parece de forma más ordenada el usar switch, claro en este caso en específico, no así en casos en los que haya una simple comparación. ah! una duda, ¿existe algún límite en cuanto al número de comparaciones que puedo hacer dentro del switch?

Una pregunta. ¿Es obligatorio como programador aprenderte los keycode?. ya que si por algún motivo no puedes tener acceso a esos números y los necesitas.

Hola,

Les relaciono el resultado del pequeño desafio:

switch (evento.keyCode) {
case teclas.UP:
console.log(“arriba”);
break;
case teclas.DOWN:
console.log(“abajo”);
break;
case teclas.LEFT:
console.log(“izquierda”);
break;
case teclas.RIGHT:
console.log(“Derecha”);
break;
default:
console.log(“otra tecla”);
}

Saludos!

Logrado

switch (evento.keyCode)
  {
    case teclas.UP:
      console.log("Arriba");
      break;
    case teclas.DOWN:
      console.log("Abajo");
      break;
    case teclas.RIGHT:
      console.log("Derecha");
      break;
    case teclas.LEFT:
      console.log("Izquierda");
      break;
    default:
      console.log("Otra tecla");
  }
}

var keys = {
  UP: 38,
  RIGHT: 39,
  LEFT: 37,
  DOWN: 40
};

document.addEventListener("keyup", drawWithKeyboard);

function drawWithKeyboard(event) {
  switch (event.keyCode) {
    case keys.UP:
      console.log("UP PRESSED");
      break;
    case keys.RIGHT:
      console.log("RIGHT PRESSED");
      break;
    case keys.LEFT:
      console.log("LEFT PRESSED");
      break;
    case keys.DOWN:
      console.log("DOWN PRESSED");
      break;
    default:
      console.log("KEY CODE PRESSED: " + event.keyCode);
  }
}

var teclas =
{
    UP:38,
    DOWN: 40,
    LEFT: 37,
    RIGTH: 39

};
console.log(teclas);
document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento)
{
    
    switch (evento.keyCode) {
        case teclas.UP:
            console.log("Arriba");
            break;
        case teclas.DOWN:
            console.log("Abajo");
            break;
        case teclas.LEFT:
            console.log("Izquierda");
            break;
        case teclas.RIGTH:
            console.log("Derecha");
            break;
        default:
            console.log("Otra tecla");
            break;
        
    }
    
}

// JavaScript source code
var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

console.log(teclas);
document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento) {
   
    switch (evento.keyCode) {
        case teclas.UP:
            console.log("Vamos para arriba");
        break;

        case teclas.DOWN:
            console.log("Vamos abajo");
        break;

        case teclas.LEFT:
            console.log("Vamos para la izquierda");
        break; 

        case teclas.RIGHT:
            console.log("Vamos para la derecha");
        break; 

        default:
            console.log("Otra tecla");
        break;
    }
}

Hace tiempo no veía el switch, cuando aprendía a programar FPGAs le llamábamos “case”, en ese tiempo era fanático de su uso.
Ahora se que toca usar cuando sea mejor usarlo, no siempre 😉

// script.js
var teclas = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 };

console.log(teclas);

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento) {
  switch (evento.keyCode) {
    case teclas.UP:
      console.log("UP");
      break;
    case teclas.DOWN:
      console.log("DOWN");
      break;
    case teclas.LEFT:
      console.log("LEFT");
      break;
    case teclas.RIGHT:
      console.log("RIGHT");
      break;
    default:
      console.log("tecla oprimida " + evento.key + " kecode " + evento.keyCode);
  }
}

Tambien puedes desplegar la consola en Windows, con la tecla de funcion F12; Saludos y sigamos disfrutando de ese camino largo pero excitante de aprender programacion.

Aun me falta mucho por aprender pero es evidente que con la efectividad con la que instruye Freddy Vegas será más fácil llegar al nivel deseado.
Ya estoy empezando a entender!!!

A mi no me sale los numeritos solo se acumulan en la pantalla, supongo que ha de ser de la cong¿figuracion del navegador, especificamente alguien sabe porque?

me esta gustando este curso en mi vida no he visto nada de programación pero estoy mirando el curso y me esta interesando aunque es un poco complicado pero es de dedicación .

<var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
};

document.addEventListener("keyup", dibujarTeclado);

function dibujarTeclado(evento)
{
    switch(evento.keyCode)
    {
        case teclas.UP:
            console.log("arriba");
        break;
        case teclas.DOWN:
            console.log("abajo");
        break;
        case teclas.LEFT:
            console.log("izquierda");
        break;
        case teclas.RIGHT:
            console.log("derecha");  
        break; 
    }
}> 

switch(evento.keyCode)
{
	case teclas.DOWN:
		console.log("Abajo");
	break; 
	case teclas.UP:
		console.log("Arriba");
	break;
	case teclas.RIGHT:
		console.log("Derecha");
	break; 
	case teclas.LEFT:
		console.log("Izquierda");
	break;
	default:
		console.log("Otra tecla");
    }