D
The purpose of the event keydown takes the events of the buttons of some joysticks/controls, in case could enumerate them so:document.addEventListener("keydown", function(event) {
console.log(event.keyCode);
}, true);
So I'd find out every code on each key, I can't say that everyone will work, I don't even have to test.Remember that there is a native API for this, the https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getGamepads ( https://w3c.github.io/gamepad/ )But it's experimental, being this the case there are no guarantees that it will always be so or that all browsers will support immediatelyWith the event gamepadconnected you know when the control is connected (MDN example):window.addEventListener("gamepadconnected", function(e) {
var gp = navigator.getGamepads()[e.gamepad.index];
console.log(
"Gamepad connected at index %d: %s. %d buttons, %d axes.",
gp.index, gp.id, gp.buttons.length, gp.axes.length
);
});
You can also check at the beginning of the script when it starts if all indexed controls are connected without having to press anything on the button, remembering that the control was already connected before the page loads the event gamepadconnected will only be fired if the user moves a "directional" (axis), then something how should resolve to detect what was connected:var joys = navigator.getGamepads();
for (let i = 0, j = joys.length; i < j; i++) {
if (joys[i].connected) console.log("Controle conectado: ", i);
}
Rescuing, it's experimental. You can also check if the control is disconnected: https://w3c.github.io/gamepad/#event-gamepaddisconnected window.addEventListener("gamepaddisconnected", function(e) {
...
});
It is not documented if there is event to detect when you need a key, but basically one setTimeout would solve, something quite simple as:var listenJoysTimeout, connected = false;
var joys = navigator.getGamepads();
//Verifica se pelo menos um controle esta conectado
for (let i = 0, j = joys.length; i < j; i++) {
if (joys[i].connected) {
connected = true;
break;
}
}
if (connected) startGame();
window.addEventListener("gamepadconnected", startGame);
window.addEventListener("gamepaddisconnected", function (e) {
//Só aceita o controle "1"
if (e.gamepad.index != 0) return;
if (listenJoysTimeout) clearTimeout(listenJoysTimeout);
connected = false;
});
function listenJoys(joys)
{
if (joys[0] && joys[0].connected) {
let joy = joys[0]; //Aqui pegamos apenas o controle "1", mas seria possivel iterar e verificar todos
for (let axe of joy.axes) {
if (axe !== 0) console.log("direção (de -1.0 até 1.0)", axe);
}
//Teclas
for (let button of joy.buttons) {
if (button.pressed) console.log("Pressionado", button);
}
}
setTimeout(listenJoys, 10, joys);//Executa novamente
}
function startGame(e)
{
connected = true;
if (listenJoysTimeout) clearTimeout(listenJoysTimeout);
listenJoys(joys);
}
In this example I added only one control, but in general it is not complicated to evaluate several, what has to keep in mind is to know which, but there goes beyond what was asking, because it will depend on the desired structure of your game.No https://w3c.github.io/gamepad/#usage-examples talk to us requestAnimationFrame, but using this depends on understanding what you are doing in your hypothetical game, no use getting here I tell you that this is a good practice, because it can be something so simple or you can create something that stops X situation that in general may end up turning a problem, of course if built your game (animations and frames) with requestAnimationFrame so you probably already have no idea how the control works about this, but getting to embed it directly would not be a question of good practice, it would be like "directing" if knowing what is "freio" and "accelerator", so it is better to work for parts.
