Joystick1
SW - 0
VRy - 1
VRx - 2
Joystick2
SW - 3
VRy - 4
VRx - 5
Joystick1, Joystick2の+5Vの線を半田付けして1本の線にして
同様にGNDの線も1本の線にして
obniz電源ポートへ直接接続
+5V
GND
ジョイスティックで操作<br />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@3.x/obniz.js" crossorigin="anonymous" ></script>
<style>
table {
border-collapse: collapse; /* セルの線を1本にする */
}
.c {
width: 40px;
height: 30px;
border: 2px solid #AAAAAA;
text-align: center;
cellspacing: 0px;
}
.ud { background-color: #FF9999 }
.lr { background-color: #99FF99 }
</style>
obniz ID:<input type="text" id="oid" style="width: 100px;">
<br />
<button onClick="init();">実行</button><br />
<table>
<tr>
<td class="c"></td>
<td class="c"></td>
<td class="c">-<br />x<br />+</td>
<td class="c"></td>
<td class="c"></td>
<td class="c"></td>
<td class="c">-<br />x<br />+</td>
<td class="c"></td>
</tr>
<tr>
<td class="c"></td>
<td class="c"></td>
<td class="c ud"><span id="xm1">0</span></td>
<td class="c"></td>
<td class="c"></td>
<td class="c"></td>
<td class="c ud"><span id="xm2">0</span></td>
<td class="c"></td>
</tr>
<tr>
<td class="c">+y-</td>
<td class="c lr"><span id="yp1">0</span></td>
<td class="c">●</td>
<td class="c lr"><span id="ym1">0</span></td>
<td class="c"></td>
<td class="c lr"><span id="yp2">0</span></td>
<td class="c">●</td>
<td class="c lr"><span id="ym2">0</span></td>
</tr>
<tr>
<td class="c"></td>
<td class="c"></td>
<td class="c ud"><span id="xp1">0</span></td>
<td class="c"></td>
<td class="c"></td>
<td class="c"></td>
<td class="c ud"><span id="xp2">0</span></td>
<td class="c"></td>
</tr>
</table>
<script>
var obniz, joystick1, joystick2;
function init() {
obniz = new Obniz($("#oid").val());
obniz.onconnect = async function () {
joystick1 = obniz.wired("JoyStick", {sw:0, y:1, x:2});
joystick2 = obniz.wired("JoyStick", {sw:3, y:4, x:5});
setInterval(function() {
main();
}, 200);
};
}
async function main() {
var x1 = Math.round(await joystick1.getXWait() * 10);
var y1 = Math.round(await joystick1.getYWait() * 10);
var x2 = Math.round(await joystick2.getXWait() * 10);
var y2 = Math.round(await joystick2.getYWait() * 10);
setCell("1", x1, y1);
setCell("2", x2, y2);
}
function setCell(s, x, y) {
$("#xm"+s).html("");
$("#xp"+s).html("");
if (x < 0) {
$("#xm"+s).html(x);
} else if (x > 0) {
$("#xp"+s).html(x);
}
$("#ym"+s).html("");
$("#yp"+s).html("");
if (y < 0) {
$("#ym"+s).html(y);
} else if (y > 0) {
$("#yp"+s).html(y);
}
}
</script>