{"id":418,"date":"2022-10-06T10:21:10","date_gmt":"2022-10-06T08:21:10","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=418"},"modified":"2022-11-13T13:22:47","modified_gmt":"2022-11-13T11:22:47","slug":"6-5-interactuando-con-el-teclado","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/6-5-interactuando-con-el-teclado\/","title":{"rendered":"6.5. Interactuando con el teclado"},"content":{"rendered":"<p>La interacci\u00f3n con el teclado funciona de manera muy similar a la del rat\u00f3n: P5 nos ofrece algunas variables y funciones dedicadas con las que podemos capturar cu\u00e1ndo se presiona alguna tecla y tambi\u00e9n discriminar qu\u00e9 tecla se ha pulsado.<\/p>\n<p>Para determinar si se ha pulsado alguna tecla, disponemos de la variable del sistema <span class=\"courier\">keyIsPressed<\/span>. Igual que en el caso de <span class=\"courier\">mouseIsPressed<\/span>, se trata de una variable booleana, por lo que podemos f\u00e1cilmente usar una estructura condicional para detectar la pulsaci\u00f3n de teclas:<\/p>\n<figure id=\"attachment_182\" aria-describedby=\"caption-attachment-182\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-182\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_074.jpg\" alt=\"\" width=\"800\" height=\"325\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_074.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_074-300x122.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_074-768x312.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-182\" class=\"wp-caption-text\">Figura 75. La variable <span class=\"courier\">keyIsPressed<\/span><br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<h3>Diferenciando entre teclas<\/h3>\n<p>De la misma manera que interactuando con el rat\u00f3n pod\u00edamos usar <span class=\"courier\">mouseButton<\/span> para determinar qu\u00e9 bot\u00f3n del rat\u00f3n hab\u00eda sido pulsado, con el teclado podemos usar <span class=\"courier\">key<\/span> para diferenciar entre unas teclas u otras:<\/p>\n<pre>if(keyIsPressed) {\r\n  if(key == \"a\" || key == \"A\") {\r\n    \/\/ Si pulsamos la tecla A\r\n  }\r\n  if(key == \"1\") {\r\n    \/\/ Si pulsamos la tecla 1\r\n  }\r\n  if(key == \" \") {\r\n    \/\/ Si pulsamos la barra espaciadora\r\n  }\r\n}<\/pre>\n<p>En el ejemplo anterior observamos que podemos usar el operador l\u00f3gico <span class=\"courier\">OR<\/span> para activar la interacci\u00f3n si pulsamos una tecla de letra min\u00fascula o may\u00fascula.<\/p>\n<h3>Teclas especiales<\/h3>\n<p>Hay algunas teclas a las que no podemos acceder directamente con la palabra clave <span class=\"courier\">key<\/span>, como por ejemplo las flechas del teclado o la tecla escape (Esc). Para poder utilizarlas en P5, necesitamos conocer su <span class=\"courier\">keyCode<\/span>:<\/p>\n<pre>if(keyIsPressed) {\r\n  if(keyCode == UP_ARROW) {\r\n    \/\/ Si pulsamos la flecha hacia arriba\r\n  }\r\n  if(keyCode == ESCAPE) {\r\n    \/\/ Si pulsamos la tecla escape\r\n  }\r\n}<\/pre>\n<p>Los <em>key codes <\/em>que P5 reconoce son los siguientes: <span class=\"courier\">UP_ARROW<\/span>, <span class=\"courier\">DOWN_ARROW<\/span>, <span class=\"courier\">LEFT_ARROW<\/span>, <span class=\"courier\">RIGHT_ARROW<\/span>, <span class=\"courier\">ENTER<\/span>, <span class=\"courier\">RETURN<\/span>, <span class=\"courier\">ESCAPE<\/span>, <span class=\"courier\">DELETE<\/span>, <span class=\"courier\">ALT<\/span>, <span class=\"courier\">OPTION<\/span> y <span class=\"courier\">CONTROL<\/span>. Dependiendo de nuestro navegador web algunas teclas se reconocen de forma distinta, pero por lo general deben funcionar.<\/p>\n<h3>Eventos del teclado<\/h3>\n<p>Igual que ocurr\u00eda con el rat\u00f3n, P5 nos ofrece varias funciones cuya ejecuci\u00f3n se dispara al detectar ciertos eventos del teclado: cuando pulsamos una tecla, cuando soltamos una tecla, etc. Se pueden consultar las distintas funciones en la <a href=\"https:\/\/p5js.org\/reference\/\" target=\"_blank\" rel=\"noopener\">referencia de P5<\/a>, dentro del apartado \u00abEvents\u00bb. Veamos un par de ejemplos:<\/p>\n<pre>function keyPressed() {\r\n  \/\/ Se ejecuta cuando presionamos cualquier tecla\r\n}\r\n\r\nfunction keyReleased() {\r\n  \/\/ Se ejecuta cuando soltamos cualquier tecla\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>La interacci\u00f3n con el teclado funciona de manera muy similar a la del rat\u00f3n: P5 nos ofrece algunas variables y funciones dedicadas con las que podemos capturar cu\u00e1ndo se presiona alguna tecla y tambi\u00e9n discriminar qu\u00e9 tecla se ha pulsado. Para determinar si se ha pulsado alguna tecla, disponemos de la variable del sistema . [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/418"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=418"}],"version-history":[{"count":2,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/418\/revisions"}],"predecessor-version":[{"id":770,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/418\/revisions\/770"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}