A gamepad-to-keyboard handler for HTML 5 games.
Lots of HTML 5 games already have built-in gamepad support using browser's Gamepad API. Older games often don't. This is a small script for simulating keyboard events from gamepad input in HTML5 games. It now supports multiple gamepads. g2k.js is loosely based on apps like JoyToKey and antimicro.
-
Copy the
g2k.jsfile to your HTML5 game folder. -
Configure the
mapping(more details below),refreshRateandtargetElementvalues in theg2k.jsfile. -
On your main HTML file, link the
g2k.jsscript, by adding a<script>tag like the one below, right before closing the<body>tag:<script src="g2k.js"></script>
-
(Optional) If you want to add a click or touch-to-fullscreen functionality, you can go to the HTML tag of your game (maybe
canvasor evenbody) and add theonclick="g2k.doFullscreen()"attribute:// This example game runs on a canvas element <canvas onclick="g2k.doFullscreen()"></canvas>
Within the g2k.js file, you can change the mapping object to configure your controller.
// Mapping for a one-player game using axes and buttons
const mappings = {
playerCount: 1, // Total players supported
devices: [{
player: 1, // Mapping assigned to player 1
axes: [
{ index: 1, threshold: -0.8, keyCode: 38 }, // Lower values than threshold fire Up Arrow key
{ index: 1, threshold: 0.8, keyCode: 40 }, // Higher values than threshold fire Down Arrow key
{ index: 0, threshold: 0.8, keyCode: 39 },
{ index: 0, threshold: -0.8, keyCode: 37 },
],
buttons: [
{ index: 0, keyCode: 13 }, // Fires Enter key
{ index: 15, keyCode: 39 }, // Fires Right Arrow key
{ index: 14, keyCode: 37 }, // Fires Left Arrow key
{ index: 12, keyCode: 38 }, // Fires Up Arrow key
{ index: 13, keyCode: 40 }, // Fires Down Arrow key
],
}],
};To figure out the adequate axes or button indexes and threshold values for your specific gamepad device, check https://gamepad-tester.com/. To get keyCode values for the keys you are interested in, check the http://keycode.info/ website. These are the keys that will be simulated by g2k.j.
If you want multiple controllers, you can add more add more mappings to the devices array above. Check the example below:
// Mapping for a two-player game using only buttons
const mappings = {
playerCount: 2, // Total players supported
devices: [{
player: 1, // Mapping assigned to player 1
axes: [],
buttons: [
{ index: 0, keyCode: 13 }, // Fires Enter key
{ index: 15, keyCode: 39 }, // Fires Right Arrow key
{ index: 14, keyCode: 37 }, // Fires Left Arrow key
{ index: 12, keyCode: 38 }, // Fires Up Arrow key
{ index: 13, keyCode: 40 }, // Fires Down Arrow key
],
},
{
player: 2, // Mapping assigned to player 2
axes: [],
buttons: [
{ index: 0, keyCode: 32 }, // Fires Space key
{ index: 15, keyCode: 87 }, // Fires W key
{ index: 14, keyCode: 83 }, // Fires S key
{ index: 12, keyCode: 65 }, // Fires A key
{ index: 13, keyCode: 68 }, // Fires D key
],
}],
};If an axis threshold value is positive, it will send a keydown event if the current reading is higher than that threshold value. If the threshold is negative, it will send a keydown event on a lower value.
If the button with a given index is pressed, it will fire a keydown event with the corresponding key code.