{"id":1559,"date":"2018-10-25T07:18:46","date_gmt":"2018-10-25T06:18:46","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1559"},"modified":"2018-10-25T07:18:46","modified_gmt":"2018-10-25T06:18:46","slug":"html-gamepad-api","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/html-gamepad-api\/","title":{"rendered":"HTML Gamepad API"},"content":{"rendered":"<pre class=\"lang:js decode:true \" title=\"GamepadExample.html\">&lt;script&gt;\r\nconst document = window.document;\r\nconst navigator = window.navigator;\r\n\r\nlet gamePadSelect = null;\r\nlet axisSelect = null;\r\n\r\nlet init = function () {\r\n    gamePadSelect = $('&lt;select&gt;');\r\n    axisSelect = $('&lt;select&gt;');\r\n    $('body')\r\n        .append(gamePadSelect);\r\n    $('body')\r\n        .append(axisSelect);\r\n\r\n    updateGamepads();\r\n};\r\n\r\nlet updateGamepads = function () {\r\n    let gamepads = navigator.getGamepads();\r\n\r\n    for (let i = 0; i &lt; gamepads.length; i += 1) {\r\n        let pad = gamepads[i];\r\n        if (pad) {\r\n            let option = $('&lt;option&gt;');\r\n            option.attr('value', i);\r\n            option.text(pad.id);\r\n            gamePadSelect.append(option);\r\n\r\n            for (let j = 0; j &lt; pad.axes.length; j += 1) {\r\n                let option2 = $('&lt;option&gt;');\r\n                option2.attr('value', j);\r\n                option2.text('Axis ' + j);\r\n                axisSelect.append(option2);\r\n            }\r\n        }\r\n    }\r\n    console.log(gamepads);\r\n};\r\n\r\n$(document).ready(init);\r\n\r\nwindow.addEventListener('gamepadconnected', updateGamepads);\r\nwindow.addEventListener('gamepaddisconnected', updateGamepads);\r\n\r\n\/*\r\ninterface Gamepad {\r\n    readonly        attribute DOMString           id;\r\n    readonly        attribute long                index;\r\n    readonly        attribute boolean             connected;\r\n    readonly        attribute DOMHighResTimeStamp timestamp;\r\n    readonly        attribute GamepadMappingType  mapping;\r\n    readonly        attribute double[]            axes;\r\n    readonly        attribute GamepadButton[]     buttons;\r\n};\r\ninterface GamepadButton {\r\n    readonly        attribute boolean pressed;\r\n    readonly        attribute double  value;\r\n};\r\npartial interface Navigator {\r\n    sequence&lt;Gamepad?&gt; getGamepads ();\r\n};\r\nwindow.addEventListener('gamepadconnected', fn);\r\nwindow.addEventListener('gamepaddisconnected', fn);\r\nnavigator.getGamepads()\r\nnavigator.webkitGetGamepads()\r\n*\/\r\n\r\n\/\/ shim layer with setTimeout fallback\r\nlet requestAnimFrame = (function () {\r\n    return window.requestAnimationFrame ||\r\n        window.webkitRequestAnimationFrame ||\r\n        window.mozRequestAnimationFrame ||\r\n        function (callback) {\r\n            window.setTimeout(callback, 1000 \/ 60);\r\n        };\r\n})();\r\n\r\n\/\/ gamepads should look like [null, [object Gamepad]]\r\nlet prevVal = 0;\r\nfunction runAnimation() {\r\n    requestAnimFrame(runAnimation);\r\n    let gamepads = navigator.getGamepads();\r\n    for (let i = 0; i &lt; gamepads.length; i += 1) {\r\n        let pad = gamepads[i];\r\n        if (pad) {\r\n            if (i == gamePadSelect.val()) {\r\n\r\n                let val = pad.axes[axisSelect.val()];\r\n                if (val !== prevVal) {\r\n                    prevVal = val;\r\n                    console.log(val);\r\n                    socket.emit('axes', JSON.stringify({x: val}));\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\nrequestAnimFrame(runAnimation);\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;script&gt; const document = window.document; const navigator = window.navigator; let gamePadSelect = null; let axisSelect = null; let init = function () { gamePadSelect = $(&#8216;&lt;select&gt;&#8217;); axisSelect = $(&#8216;&lt;select&gt;&#8217;); $(&#8216;body&#8217;) .append(gamePadSelect); $(&#8216;body&#8217;) .append(axisSelect); updateGamepads(); }; let updateGamepads = function () { let gamepads = navigator.getGamepads(); for (let i = 0; i &lt; gamepads.length; i += [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1559","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1559"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1559\/revisions"}],"predecessor-version":[{"id":1560,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1559\/revisions\/1560"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}