{"id":533,"date":"2025-07-19T16:33:20","date_gmt":"2025-07-19T06:33:20","guid":{"rendered":"https:\/\/nonlinearexperience.com\/?p=533"},"modified":"2025-07-19T16:47:24","modified_gmt":"2025-07-19T06:47:24","slug":"controls-input","status":"publish","type":"post","link":"https:\/\/nonlinearexperience.com\/index.php\/2025\/07\/19\/controls-input\/","title":{"rendered":"Controls\/Input"},"content":{"rendered":"<h1 class=\"wp-block-post-title\">Controls\/Input<\/h1>\n\n\n<p class=\"wp-block-paragraph\">See also:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">System:<\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Keyboard input<\/strong><\/h6>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">allows for if you are pressing &#8216;left&#8217; then press &#8216;right&#8217; at the same time, then let go of &#8216;right&#8217;, &#8216;left&#8217; will continue &#8211; all in the &#8216;DirectionInput.js&#8217; class.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">utilises &#8216;held directions&#8217; array &#8211; e.g.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>when pressing new, valid key, and it isn&#8217;t in the array, add to start of array<\/li>\n\n\n\n<li>when releasing valid key, and its in the array, remove it from the array<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;We also have a getter so that other items can ask which key is being held right now\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Arrow keys &#8211; keep responding while down<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Enter key &#8211; respond once when pressed and held<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We want some buttons to have more of a &#8216;control ad&#8217; functionality &#8211; e.g. press the button, do the thing, then don&#8217;t do anything until the button is released, and pressed again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Arrow Keys<\/strong> &#8211; keydown and keyup event listeners<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\ndocument.addEventListener(&quot;keydown&quot;, (e) =&gt; {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/do the keydown stuff\n});\ndocument.addEventListener(&quot;keyup&quot;, e =&gt; {\n\u00a0\u00a0\u00a0\u00a0\/\/do the keyup stuff\n});\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Enter key<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nclass KeyPressListener {\n\u00a0\u00a0\u00a0\u00a0constructor(keyCode, callback) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let keySafe = true;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.keydownFunction = function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (event.code === keyCode) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(keySafe) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0keySafe = false;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0callback();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.keyupFunction = function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (event.code === keyCode) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0keySafe = true;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nCODE HERE\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resources<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>See also: System: Keyboard input allows for if you are pressing &#8216;left&#8217; then press &#8216;right&#8217; at the same time, then let go of &#8216;right&#8217;, &#8216;left&#8217; will continue &#8211; all in the &#8216;DirectionInput.js&#8217; class. utilises &#8216;held directions&#8217; array &#8211; e.g. &nbsp;We also have a getter so that other items can ask which key is being held [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"wp-custom-template-nlx-the-knowledge-page","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-533","post","type-post","status-publish","format-standard","hentry","category-the-knowledge"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/comments?post=533"}],"version-history":[{"count":2,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/533\/revisions"}],"predecessor-version":[{"id":539,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/533\/revisions\/539"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}