続・「シューティングゲームの当たり判定をQRコード読み取りでやってみた」やつをスマホで使えるようにした。

3702 ワード
Vue.js obniz codepen JavaScript JavaScript テキストリンク

スマホでシューティングゲーム

まずは前回の記事を参照してください。

シューティングゲームの当たり判定をQRコード読み取りでやってみた

構成（前回との変更点）

射撃：Webアプリ内のボタン押下　→　obnizのボタン押下
カメラ：フロントカメラ　→　リアカメラ（背面カメラ）

動かしてみたいかたは↓のURLをクリック

https://nervous-ardinghelli-c10e69.netlify.app
※リアカメラがない端末では動きません
※スマホの場合は横向きにしてください
※ご自身のobnizをご用意ください

■obnizについては↓を参照
https://obniz.com/ja/products/obnizboard

コード

See the Pen QRコードで当たり判定。トリガーはobniz by sawa (@sawakoshi_yy) on CodePen.

課題

・スマホでフルスクリーンにできない

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

上のタグを入れてもブラウザのヘッダー・フッターが消えない
　→Webアプリに接続したら、フルスクリーンでカメラを表示させたい

・射撃時に音がでない。

var audio = new Audio('https://soundeffect-lab.info/sound/battle/mp3/beamgun1.mp3');
audio.play();

上を追加しても音がでない。

・射撃時にヒットしたら、LINEnotifyで通知をしたいがCORSのエラーを解消できない
↓記事参照
CORSのエラーが出たけど解消できなかったときのメモ