LoginSignup
1
0

憧れの飛天御剣流を俺は出す!(まだ先は長そう)

Last updated at Posted at 2023-06-27

「二重の極み」練習したことありますよね?

30代半ば~40代半ばぐらいの人で二重の極みを練習したことが無い人は恐らくいないでしょう。

今回はスマートフォンに内蔵されている加速度センサーを利用して、るろうに剣心の技が発動するウェブアプリを作ろうとしてみたのでその途中経過です。

最初に作ったもの

最終目標は「九頭龍閃」ですが、あまりに動きが複雑なので、まずは動きが単純(失礼)な「牙突」から作ってみました。
(飛天御剣流はどこに行った?というのは一旦置いといてください)

スマートフォンから以下のQRコードを読み取ってください。
加速度センサーが必要なので、ブラウザでは動作しません。
QR_854505.png

牙突の速度によって齋藤一の画像が変わっていくようになっております。
ちょっと分かりにくいですが動画です。

コードはこちらに記載しております。
https://codepen.io/tbahbiri-the-reactor/pen/rNQjzRy

加速度センサーを使って前後水平方向の動き(X軸)を測定し、X軸の値が10、30、60を超えたときに画像が切り替わるようにしております。

使った感想(フィードバック)をもらった

妻:内容知っている人だったら面白いのかもしれないけど、私みたいに知らない人からすると良く分からん。せめて音声ぐらい付けたら。
息子:振ったら画像が変わるの面白い。あと最初の顔が面白い。僕もパソコン欲しい。

音声実装(途中)→2023年6月30日実装完了

QR_105718.png

コードはこちらに記載しております。
https://codepen.io/tbahbiri-the-reactor/pen/jOQyjrY?editors=1010

音声はこちらで作っています。

画像が切り替わるのは最初に上げたものと同じですが、
10<30
「まだまだだな」
まだまだだな

30<50(子供でも遊べるように60から10値を小さくしました)
「なかなかやるな」
なかなかやるな

50<
「~免許皆伝だ~」
免許皆伝

と画像だけではなく、音声も出し分けるようにしました。

今後に向けて

前後方向だけではなく、左右(Y軸)や前後(Z軸)の動きも組み合わせて他の技も登録するようにしていきたいなと考えております。

お読みいただきありがとうございました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0