Detectar eventos del teclado con JavaScript

🐱‍💻 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;
    }
}

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

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

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

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.

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

Hola, compañeros les comparto mi código

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.

_“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
}

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

}

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

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.

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')
    }
}```

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

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

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 :(");
	}
}

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.

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

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

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:

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.

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

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”)

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

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.

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.

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.

Switch: estructura de control;

¿Qué es una estructura de control?

• Una estructura de control son aquellas que nos permiten modificar el flujo de la ejecución de las instrucciones de un programa, tarea o función.

• En otras palabras: una estructura de control nos ayuda a que nuestro código tome decisiones basado en lo que tengamos definido.

Oigan, no se si les pasó, pero por esta clase entendí cómo programan los mandos de los videojuegos ❤️

les recomiendo mucho este PDF: https://drive.google.com/file/d/11Qd_2a9YfHq7Yt4IGLXwWRs6OFpSu-6o/view
allí podran encontrar apuntes de JS muy bien explicados, sobre todo teóricos

El conocimiento compartido en la manera que Freddy lo hace,es la forma mas eficiente para despues aplicarlo!

A partir del minuto 31 ya estaremos haciendo aerobics.

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

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");
    }

Aqui dejo mi codigo para el ejercicio de dibujar en canvas con las teclas

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

var ancho = document.getElementById(“htmlArea”).clientWidth;
var largo = document.getElementById(“htmlArea”).clientHeight;
var posX = ancho/2;
var posY = largo/2;
var linea = 5;
var color = "red"
var area = document.getElementById(“htmlArea”).getContext(“2d”);

function dibujame(colorTrazo, xI, yI, xF, yF) {
area.beginPath();
area.strokeStyle = colorTrazo;
area.moveTo(xI, yI);
area.lineTo(xF, yF);
area.stroke();
area.closePath();
}

document.addEventListener(“keyup”, dibujarTeclado);

function dibujarTeclado(evento) {
switch(evento.keyCode){
case teclas.UP:
dibujame(color, posX, posY, posX, posY - linea);
posY = posY - linea;
break;
case teclas.DOWN:
dibujame(color, posX, posY, posX, posY + linea);
posY = posY + linea;
break;
case teclas.LEFT:
dibujame(color, posX, posY, posX - linea, posY);
posX = posX - linea;
break;
case teclas.RIGHT:
dibujame(color, posX, posY, posX + linea, posY);
posX = posX + linea;
break;
default:
console.log(“Otra tecla”);
break;
}
}

Yo utilize IF para la flecha.UP y Switch para las demas, me di cuenta que ejecuta los dos, entonces mostraba “otra tecla” y “arriba” al mismo tiempo. Tegan cuidado

Este es un curso Premium y Freddy eres un excelente instructor, estoy atrapado, enamorado y amarrado a JavaScript.

Que buen curso, estoy aprendiendo cada día mas, incluso hay detalles que desconocía.

estudie programacio de software pero platzi e aprendido cosas que no aprendi en sena .

Las buenas practicas nos facilitan la vida a todos los programadores, nos facilita la lectura.

cada vez el curso se pone mejor.!

Logrado. Seguimos aprendiendo con Platzi. Excelente!

Hola, alguien podría decirme como publicar una imagen aqui?

Ahhhh, estuvo fantástica la clase. Hay que diferenciar de HTML Y JavaScript

Tip:
Depende del teclado pero por lo regular "F12 " tambien da acceso a la consola

http://gcctech.org/csc/javascript/javascript_keycodes.htm

Todos los kEyCode del teclado

Freddy, la palabra negligible no existe en español.

Este curso simplemente ha sido interesante y relajante de huevos!

Alguien sabe como hago la estructura el HTML con el teclado de MAC

Necesitamos a gente como Freddy en el gobierno #FreddyparaPresidente ;D

keydown-> cuando oprimes un teclado, se cuenta hasta que dejes de oprimirla (si importa el tiempo)
keyup-> se cuenta cuando dejas de oprimirlo( no importa el tiempo que lo estas oprimiendo)

Estoy estudiando para entrar a medicina de la universidad, este curso me relaja bastante cuando ya no siento los parpados ajajjaja, me encanta la verdad.
console.log(" dales las gracias a PLATZI 😃 ");

Ahi esta mi codigo completo, adicionalmente agregue una función para poder cambiar el color de la linea con un solo click, seleccionando un boton en la interfaz grafica.

Aqui voy, poco a poco aprnediendo. En este punto aun sigo luchando para hacer el funcionamiento del mouse, pero antes de seguir con los videos voy a terminar con el mouse.

Ayuda

¿Cómo detectamos cual tecla presiona el usuario?

• Primero hay que determinar en que punto le agregamos el addEventListener, este debe ser en el punto donde todo ocurre, el document.

    	document.addEventListener()
  

• La forma de llamar la acción de oprimir una tecla es “keydown” y su contraparte “keyup”

    	document.addEventListener("keyup", dibujarTeclado);
  

• Dibujamos la función dibujarTeclado

    	function dibujarTeclado ()
    	{
    	
    	}
  

• Para poder detectar que tecla fue oprimida podemos utilizar console.log leyendo cuales son los datos que posee el evento de la función

    	function dibujarTeclado (evento)
    	{
    		console.log ("evento");
    	}
    	
    Esto nos arrojará los datos que necesitamos al utilizar cualquier tecla, en este caso el code y el keycode:
    	- "ArrowUp"  38
    	- "ArrowDown" 40  
    	- "ArrowRight" 39
    	- "ArrowLeft" 37
  

• Al conocer los valores de las teclas vamos a crear variables para usarlas. En este caso vamos a crear una sola variable con variables por dentro, esto vamos a hacerlo con un bloque de código

    	var teclas = {
    		UP: 38
    		DOWN: 40
    		RIGHT: 39
    		LEFT: 37
    	}
    	
    	Este bloque de código lo separamos con comas (,) ya que técnicamente es una sola línea de código, en la última variable no le colocamos "coma" ya que si lo hacemos nos crearía un error de sintaxis, también es una buena práctica escribir las variables que nunca o casi nunca cambian en mayúsculas, como en este caso.
  

• Para verificar que nuestras variables funcionan al momento de presionas las teclas deseadas vamos a probarlo con if’s y console.log.

    	function dibujarTeclado (evento)
    	{
    		if (evento.keycode == teclas.UP)
    		{
    			console.log ("Vamo' pa arriba");
    		}
    		if (evento.keycode ==teclas.DOWN)
    		{
    			console.log ("Vamo' pa abajo");
    		}
    	}
    	
    	(Recordemos que == es para comparar en JS) Este ejercicio nos debería arrojar el mensaje establecido en la consola al presionas las teclas establecidas para verificar que el código está funcionando.
  

• Para continuar deberíamos crear cuatro if’s para cada una de nuestras teclas. Pero existe una función que nos simplifica esta tarea: switch, la cual se usa cuando se deben asignar varios if’s y siempre y cuando todos sean para comparar (==)

    	function dibujarTeclado (evento) 
    	{
    		switch (evento.keycode)
    		{
    			case teclas.UP:
    				console.log ("arriba");
    			break;
    			case teclas.DOWN:
    				console.log ("abajo");
    			break;
    			default:
    				console.log ("otra tecla");
    			break;
    		}
    			
    	}
    	
    	El switch únicamente funciona para comparar, funciona con case que determina la función que se va a ejecutar, al terminar se utiliza un break, la forma de determinar el "else" es con un default.

keyCode = el código interno del sistema operativo en el que el sistema operativo almacena las teclas