Gamepad API

gamepad-api.markdown

Gamepad API

A Pen by Kevin Leutzinger on CodePen.

License.

index.html

<!-- Tested with a USB XBox 360 controller -->
<div class="frame">
  <div class="blobs">
    <div class="blob blob--0">A</div>
    <div class="blob blob--1">B</div>
    <div class="blob blob--2">X</div>
    <div class="blob blob--3">Y</div>
    <div class="blob blob--4">LB</div>
    <div class="blob blob--5">RB</div>
    <div class="blob blob--6">LT</div>
    <div class="blob blob--7">RT</div>
    <div class="blob blob--8">SEL</div>
    <div class="blob blob--9">START</div>
    <div class="blob blob--10">L3</div>
    <div class="blob blob--11">R3</div>
    <div class="blob blob--12">UP</div>
    <div class="blob blob--13">DOWN</div>
    <div class="blob blob--14">LEFT</div>
    <div class="blob blob--15">RIGHT</div>
  </div>
</div>

script.babel

class JoyTest {
  constructor() {    
    this.blobsContainer = document.querySelectorAll('.blobs');
    this.blobs = document.querySelectorAll('.blob');
    
    window.addEventListener('gamepadconnected', (event) => {
      this.stateCheck();
    });
  }
  
  stateCheck() {
    window.requestAnimationFrame(() => {
      this.gamepads = navigator.getGamepads();
      this.gamepad = this.gamepads[0];
      this.padStatus();
      this.stateCheck();
    });
  }
  
  padStatus() {
    this.gamepad.buttons.forEach((button, index) => {
      if (this.blobs[index]) {
        this.blobs[index].classList.remove('pressed');
        if (button.pressed) {
          this.blobs[index].classList.add('pressed');
        }
      }
    });
    
    const x = this.gamepad.axes[0];
    const y = this.gamepad.axes[3];
    
    this.blobsContainer[0].style.transform = `translate(${x}em, ${y}em)`;
  }
}

new JoyTest();

style.scss

.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;
}