カードが動くタロット占いをつくろう JavaScriptでアニメーションするWebアプリ
るてんのお部屋 Webブラウザー上で「カードが動くタロット占い」を作る本です。画面上にカードを並べ、シャッフルし、配るものです。
最終的に表側になったカードの内容をもとに、占い結果の文章を出力します。
実現方法はいくつかありますが、今回は次のような方針で作ることにしました。
*使用言語はJavaScript*canvasに描画する*Tween方式でアニメーションする*PC、スマホで使うことを想定して、画面サイズに合わせて初期canvasサイズを変える*結果の文章は、canvasの外にテキストとして出力させる*既存のWebサイトに占いページを追加することを想定する*最終的にライブラリーとしてファイルをまとめるcanvasへの描画は、『Pixi.js』を使います。
ゲーム用の有名ライブラリーで、WebGLを利用して高速に描画できます。
Tween方式のアニメーションは『Anime.js』を使います。
軽量で使いやすいアニメーション用のライブラリーです。
DOM要素を動かすだけでなく、オブジェクトのプロパティの値をアニメーションできます。
この2つのライブラリーは、いずれもMITlicenseです。
それではWebブラウザー上で「カードが動くタロット占い」アプリケーションを作っていきましょう。