No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Detectar eventos del teclado con JavaScript

16/37
Recursos

Podemos hacer que nuestro dibujo reaccione al teclado, primero debemos aprender a detectar eventos del teclado.

 

Recuerda:

 

  • Un programador divide los grandes problemas en problemas m√°s peque√Īos.

 

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

Aportes 1844

Preguntas 281

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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