はじめに
この記事は「クソアプリ Advent Calendar 2022（カレンダー3）」7日目の記事です。
なぜ作ろうと思ったのか？
もともとはポケモンカードゲームなどで先攻・後攻を決める時、手持ちのコインが無くてもWeb上でコイントス出来たら良いな、と考えて作りました。
でもポケカプレーヤーはコインにもこだわるはずなので、持ち歩かないとかあるんですかね？…無いような気がしてきました。でもまあ、それ以外の用途でも、何か大事なことを決めたい時に、コイントスしたいような稀有な人（？）がいるかも知れません。
▼完成品はこちら▼
謎のこだわり
裏表の判定をするだけするなら見た目は2Dで良いかなと思いましたが、敢えて3Dでやってみたくなりました。
物理演算を使って実際にコイントスをシミュレートするため、JavaScript製の3D物理演算エンジンについて調べました。
仕組み
3Dの見た目部分は「Three.js」、物理演算には「Cannon.js」というJavaScriptライブラリを使っています。
「Cannon.js」は「Three.js」と相性が良いので一緒に使いやすいらしかったのです。
設定について
- Cannon.jsで物理演算を行うためのワールドを作成
- Cannon.jsでコインと床作成
- Three.jsでシーン・カメラ・ライト・レンダラーを設定
- Three.jsでコインと床作成（Cannon.jsで作成したものと対応するオブジェクトを作成）
- レンダリング
「Cannon.js」と「Three.js」の連携方法については、下記が分かりやすかったです。
three.jsとcannon.jsの連携メモ - メモの穴
指で上にスワイプ
始めは画面上をクリックで、ランダムに力を加えてコイントスさせようとしていましたが、ゲーム的な要素を入れたくなり画面を上にスワイプすることで、実際にコイントスしているかのような仕組みを入れることにしました。
デスクトップでもスマホでも対応したかったので良くある両対応のタッチイベントを使っています。
const _touchstart = window.ontouchstart === undefined ? 'mousedown' : 'touchstart';
const _touchend = window.ontouchstart === undefined ? 'mouseup' : 'touchend';
toucharea.addEventListener(_touchstart, touchStart, false);
toucharea.addEventListener(_touchend, touchEnd, false);
あとはタッチ開始からタッチ終了までの距離によってランダム値を変えてやり、CSSに反映してゲージを表示するだけです。
要るこれ？
ちなみにGoogleで「コイントス」と検索すればその場でコイントスを行ってくれます。
また、「サイコロを振る」などで検索すると、多面体サイコロとかも出せるのでボードゲーマーにも有益ですね。
Google検索、何でもあってすごいですね。。
あんま作る意味なかったかもですが、JavaScript製の3D物理演算エンジンを使ってみたかったのでまあ(๑•̀ㅂ•́)و✧ﾖｼ！としましょう！！！