Nipplejsライブラリを使って、Web上で円を描くようなジョイスティック操作を可能とするジョイスティックを作成します。

ジョイスティックアプリの作成

「Nipplejs 」を参考にして、ジョイスティックアプリ「nipplejs_test」を作成します。

index.html

<html lang="ja">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="dynamic active highlight highlight-javascript"> </div>

  <div id="zone_joystick">
    <div id="debug">
      <ul>
        <li class="position">
          position :
          <ul>
            <li class="x">x : <span class='data'></span></li>
            <li class="y">y : <span class='data'></span></li>
          </ul>
        </li>
        <li class="force">force : <span class='data'></span></li>
        <li class="distance">distance : <span class='data'></span></li>
        <li class="angle">
          angle :
          <ul>
            <li class="radian">radian : <span class='data'></span></li>
            <li class="degree">degree : <span class='data'></span></li>
          </ul>
        </li>
        <li class="direction">
          direction :
          <ul>
            <li class="x">x : <span class='data'></span></li>
            <li class="y">y : <span class='data'></span></li>
            <li class="angle">angle : <span class='data'></span></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="zone dynamic active">
      <h1>dynamic</h1>
    </div>
  </div>

  <script src="main.js" type="module"></script>
  <script src="https://cdn.jsdelivr.net/npm/nipplejs@0.10.2/dist/nipplejs.min.js"></script>
</body>

</html>

main.js

var s = function (sel) {
  return document.querySelector(sel);
};
var sId = function (sel) {
  return document.getElementById(sel);
};
var joysticks = {
  dynamic: {
    zone: s('.zone.dynamic'),
    color: 'blue',
    multitouch: true
  }
};
var joystick;

// Get debug elements and map them
var elDebug = sId('debug');
//var elDump = elDebug.querySelector('.dump');
var els = {
  position: {
    x: elDebug.querySelector('.position .x .data'),
    y: elDebug.querySelector('.position .y .data')
  },
  force: elDebug.querySelector('.force .data'),
  distance: elDebug.querySelector('.distance .data'),
  angle: {
    radian: elDebug.querySelector('.angle .radian .data'),
    degree: elDebug.querySelector('.angle .degree .data')
  },
  direction: {
    x: elDebug.querySelector('.direction .x .data'),
    y: elDebug.querySelector('.direction .y .data'),
    angle: elDebug.querySelector('.direction .angle .data')
  }
};


var timeoutCreate;
function createThrottle(evt) {
  clearTimeout(timeoutCreate);
  timeoutCreate = setTimeout(() => {
    createNipple(evt);
  }, 100);
}

createNipple('dynamic');

function bindNipple() {
  joystick.on('start end', function (evt, data) {
    debug(data);
  }).on('move', function (evt, data) {
    debug(data);
  }).on('dir:up plain:up dir:left plain:left dir:down ' +
    'plain:down dir:right plain:right',
    function (evt, data) {
    }
  ).on('pressure', function (evt, data) {
    debug({
      pressure: data
    });
  });
}

function createNipple(evt) {
  var type = typeof evt === 'string' ?
    evt : evt.target.getAttribute('data-type');
  if (joystick) {
    joystick.destroy();
  }
  s('.highlight.' + type).className += ' active';
  s('.zone.' + type).className += ' active';
  joystick = nipplejs.create(joysticks[type]);
  console.log(joystick, nipplejs);
  bindNipple();
}

// Print data into elements
function debug(obj) {
  function parseObj(sub, el) {
    for (var i in sub) {
      if (typeof sub[i] === 'object' && el) {
        parseObj(sub[i], el[i]);
      } else if (el && el[i]) {
        el[i].innerHTML = sub[i];
      }
    }
  }
  setTimeout(function () {
    parseObj(obj, els);
  }, 0);
}

style.css

body {
  margin: 0;
  padding: 0;
  margin-top: 20px;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

.highlight {
  display: none;
}

.highlight.active {
  display: block;
}

.zone {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}

.zone.active {
  display: block;
}

.zone>h1 {
  position: absolute;
  padding: 10px 10px;
  margin: 0;
  color: white;
  right: 0;
  bottom: 0;
}

.zone.dynamic {
  background: rgba(0, 0, 255, 0.1);
}

ジョイスティックアプリの実行

「xampp」環境のパソコン上で、ブラウザ上から「http://localhost/nipplejs_test/index.html」でアクセスし、作成したジョイスティックアプリ「nipplejs_test」を実行します。