センサーAPIを使ったゲームが作りたい
スマートフォンのセンサーAPIの使用方法を知ったので、体験ゲームを作りました。
今でこそセンサーを使用したゲーム（Nintendo Switch リングフィットアドベンチャーなど）があふれていますが、一昔前はなかなか考えられなかったことだと思います。更に自分の携帯がそのままセンサーに使えてしまうというすごい時代です。
材料はそろった。素人でもセンサーを使ってゲームが作れるかチャレンジです。
野球にするか、ゴルフにするか最後まで悩みましたがドラマ性を重視し野球が題材です。
↓参考画面です。テストプレイでホームランは一度も出ませんでした。
完成品
まずはこちらをアクセスして触ってみてください
※使用方法はリンク先の画面下部のルール説明を参照ください。
※iOSではバイブレーションが作動しません。
※加速度センサーを使用するのでスマートフォンでアクセスしてください。
（以下のＱＲコードからどうぞ）
ソースコード
See the Pen NETtou甲子園 by tishiyama (@tishiyama) on CodePen.
解説
・加速度センサーから情報を取得する。
参考にしたサイト：【Javascript】addEventlistenerについて
小数点が多すぎるので整数化しています。
window.addEventListener('deviceorientation', (e) => {
this.accX = Math.floor(e.alpha *100);
accX = Math.floor(e.alpha *100);
this.accY = Math.floor(e.beta *100);
accY = Math.floor(e.beta *100);
this.accZ = Math.floor(e.gamma *100);
accZ= Math.floor(e.gamma *100);
});
・スイングの加速度を取得する。
ボタン押下からスイングまで時間が空くため、setTimeoutで開始を遅らせています。
setIntervalで0.2秒ごとに加速度の情報を配列に格納しています。
permission() {
$('#permission2').prop('disabled', false);
//3秒後に実行
setTimeout(function () {
//バイブレーションを0.3秒
if (ios == 1){
mes = '振れ！';
}else{
window.navigator.vibrate(200);
mes = '振れ！';
}
// 指定時間ごとに繰り返し実行される setInterval(実行する内容, 間隔[ms]) タイマーを設定
var timer = window.setInterval(() => {
cnt++;
if(cnt > 5){
windows.clearInterval(timer);
}
arraypush(); // arraypush 関数を実行
}, 200); // 200msごとに（0.2秒間に1回）
//情報をアレイに突っ込む
function arraypush(){
arrayX.push(accX);
arrayY.push(accY);
arrayZ.push(accZ);
};
}.bind(this),2000);
},
・ボタンの押下順の誘導
HTML上は非活性の状態にして、JavaScriptで活性化するようにしています。
<button v-on:click="permission" class="btn btn-primary" disabled id="permission">まずは素振りをしよう</button>
$('#permission').prop('disabled', false);
・スイングの加速度を点数化して判定する
配列に格納された情報をぐりぐり判定して点数をつけています。
素振りと本番の差分で判定をしていますが、加速度センサの情報がプラスとマイナスでずれると差分が大きくぶれるので絶対値（Math.abs）に変換しています。
配点はかなり適当です。
長いので省略
permission3() {
for( let i = 0; i < 5; ++i ){
arrayX3[i] = arrayX[i] - arrayX2[i];
if (0 < Math.abs(arrayX3[i]) && Math.abs(arrayX3[i]) < 100){
res = res + 10;
}else if (101 < Math.abs(arrayX3[i]) && Math.abs(arrayX3[i]) < 1000){
res = res + 1;
}
arrayY3[i] = arrayY[i] - arrayY2[i];
if (0 < Math.abs(arrayY3[i]) && Math.abs(arrayY3[i]) < 100){
res = res + 10;
}else if (101 < Math.abs(arrayY3[i]) && Math.abs(arrayY3[i]) < 1000){
res = res + 1;
}
arrayZ3[i] = arrayZ[i] - arrayZ2[i];
if (0 < Math.abs(arrayZ3[i]) && Math.abs(arrayZ3[i]) < 100){
res = res + 10;
}else if (101 < Math.abs(arrayZ3[i]) && Math.abs(arrayZ3[i]) < 1000){
res = res + 1;
}
}
if(res > 50){
res2 = 120 + (res/10);
mes = 'ホームラン！！！僕たちの夏は終わらない';
mes2 = '飛距離'+res2+'m';
}else if(res > 30){
mes = '２塁打！しかし後続が続かず負けてしまった。僕たちの夏は終わった';
}else if(res > 10){
mes = '出塁！しかし後続が続かず負けてしまった。僕たちの夏は終わった';
}else {
mes = '三振、、、僕たちの夏は終わった';
};
},
感想
前回のナオトインティライミで初めてwebアプリを開発しましたが、2作品？目になります。一度はゲームを作りたかったということもあり、楽しく作ることができました。前回と変わらずただただ難しかったというのは変わりませんが少しは慣れてきたような気はします。
ただ、素人でもセンサーを使ったゲームが作れるか？というと、作れないことはないが、だいぶ大味な仕上がりになってしまう。というのが個人的な結論になります。