スマホ版ビー玉はじき

2018.12.25

スマートフォン専用のゲームです。自機のビー玉をスマートフォンの傾きで操作します。敵ビー玉は スマートフォンの傾きの 影響は受けません。敵ビー玉をはじき出してください。赤い壁にぶつけると、「ビー玉大」→「ビー玉中」→「ビー玉小」の順に小さくなっていきます。「ビー玉小」を赤い壁にぶつけると消滅させることができます。 iphoneのSafariで実行する時には、 「設定」>「Safari」 >「モーションと画面の向きのアクセス」 をONにして下さい。

クリックでスマホ版ビー玉はじきがスタート

HTMLで、重要な設定をしています。
このゲームのindex.htmlです

<!doctype html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="index.css">
<script src="matter.min.js"></script>
<script src="three.min.js"></script>
</head>
<body ontouchmove="event.preventDefault()">
<audio id="tonn" preload="auto"><source src="tonn.wav"></audio>
<div id="js-game" class="game">
<div id="js-view" class="view"></div>
<div id="js-engine" style="display:none;" class="engine"></div>
<script src="main.js"></script>
</body>
</html>

（１）「id=”js-engine” style=”display:none;” class=”engine”」の部分は、javascript製の物理演算エンジンであるmatter.js用の表示エリアになっています。ゲームはmatter.jsだけでつくります。
「style=”display:none;”」を削除すると次のような画面になります。

このmatter.js でつくったゲームを three.js でレンダリングしています。 three.js は WebGLだけで3D表現をするための ライブラリーです。

（２）アイフォンは、いつの間にかjavascript側ではスクロールを無効化できない仕様になってしまいました。そこで、 HTML のbodyで スクロールを無効 にします。

<body ontouchmove=”event.preventDefault()”>

（３） オーディオについては、アイフォンの場合window.addEventListener(‘touchend’, function() {})などで一度音を鳴らしてオーディオ再生制限の解除が必要です。そして 音声データがwavでは再生されますがmp3では type=”audio/mp3″などtype指定しないと音が鳴りません。

コメント