Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gamepad API
<!-- Setup for the PiHut SNES controller: https://thepihut.com/products/raspberry-pi-compatible-usb-gamepad-controller-snes-style -->
<div class="frame">
<div class="blobs">
<div class="blob blob--a">A</div>
<div class="blob blob--b">B</div>
<div class="blob blob--x">X</div>
<div class="blob blob--y">Y</div>
<div class="blob blob--l">L</div>
<div class="blob blob--r">R</div>
<div class="blob blob--select">SELECT</div>
<div class="blob blob--start">START</div>
<div class="blob blob--up">UP</div>
<div class="blob blob--down">DOWN</div>
<div class="blob blob--left">LEFT</div>
<div class="blob blob--right">RIGHT</div>
</div>
</div>
class JoyTest {
constructor() {
this.blobsContainer = document.querySelectorAll('.blobs');
this.blobs = document.querySelectorAll('.blob');
this.pressed = '';
this.blobs.forEach((blob) => {
blob.value = blob.innerHTML.toLowerCase();
});
window.addEventListener('gamepadconnected', (event) => {
this.stateCheck();
});
}
stateCheck() {
window.requestAnimationFrame(() => {
this.gamepads = navigator.getGamepads();
window.gamepad = this.gamepad
this.gamepad = this.gamepads[0];
window.gamepad = this.gamepad
this.padStatus();
this.stateCheck();
this.highlightBlob(this.blobs, this.pressed);
});
}
padStatus() {
this.gamepad.buttons.forEach((button, index) => {
if (this.blobs[index]){
this.blobs[index].classList.remove('pressed');
if (button.pressed) {
this.sendCommand(index);
}
}
});
this.directionCommand(this.gamepad.axes);
}
directionCommand(axis) {
// Left & Right
if (axis && round(axis[0]) === -1) {
console.log('Left Pressed');
this.pressed = 'left';
} else if (axis && round(axis[0]) === 1) {
console.log('Right Pressed');
this.pressed = 'right';
}
// Up & Down
if (axis && round(axis[1]) === -1) {
console.log('Up Pressed');
this.pressed = 'up';
} else if (axis && round(axis[1]) === 1) {
console.log('Down Pressed');
this.pressed = 'down';
}
}
sendCommand(button) {
// let pressed = '';
switch(button) {
case 0:
console.log('Button X Pressed');
this.pressed = 'x';
break;
case 1:
console.log('Button A Pressed');
this.pressed = 'a';
break;
case 2:
console.log('Button B Pressed');
this.pressed = 'b';
break;
case 3:
console.log('Button Y Pressed');
this.pressed = 'y';
break;
case 4:
console.log('Button L Pressed');
this.pressed = 'l';
break;
case 5:
console.log('Button R Pressed');
this.pressed = 'r';
break;
case 8:
console.log('Button Select Pressed');
this.pressed = 'select';
break;
case 9:
console.log('Button Start Pressed');
this.pressed = 'start';
break;
default:
console.log('Button not mapped to command');
break;
}
}
highlightBlob(blobs, pressed) {
[...blobs].filter((blob) => {
blob.classList.remove('pressed');
if (blob.value === pressed){
blob.classList.add('pressed')
}
});
this.pressed = '';
}
}
new JoyTest();
function round(v) {
return (v >= 0 || -1) * Math.round(Math.abs(v));
}
.frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
perspective: 100;
}
$blob-size: 4em;
.blobs {
position: absolute;
top: 50%;
left: 50%;
width: $blob-size * 8;
margin-top: -$blob-size;
margin-left: -($blob-size * 4);
}
.blob {
float: left;
width: $blob-size;
height: $blob-size;
line-height: $blob-size;
text-align: center;
border-radius: ($blob-size / 2);
background-color: #333333;
}
.blob.pressed {
background-color: white;
}
.blob--0 {
// transform: translate3d(-4em,0,0);
}
.blob--0.pressed {
background-color: green;
}
.blob--1.pressed {
background-color: red;
}
.blob--2.pressed {
background-color: blue;
}
.blob--3.pressed {
background-color: yellow;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.