るてんのお部屋

　Webブラウザー上で「カードが動くタロット占い」を作る本です。 　画面上にカードを並べ、シャッフルし、配るものです。最終的に表側になったカードの内容をもとに、占い結果の文章を出力します。 【Webブラウザー上のサンプル】 https://crocro.com/tools/item/fortune_telling_tarot_one_oracle/ 　実現方法はいくつかありますが、今回は次のような方針で作ることにしました。 * 使用言語はJavaScript * canvasに描画する * Tween方式でアニメーションする * PC、スマホで使うことを想定して、画面サイズに合わせて初期canvasサイズを変える * 結果の文章は、canvasの外にテキストとして出力させる * 既存のWebサイトに占いページを追加することを想定する * 最終的にライブラリーとしてファイルをまとめる 　canvasへの描画は、『Pixi.js』を使います。ゲーム用の有名ライブラリーで、WebGLを利用して高速に描画できます。 　Tween方式のアニメーションは『Anime.js』を使います。軽量で使いやすいアニメーション用のライブラリーです。DOM要素を動かすだけでなく、オブジェクトのプロパティの値をアニメーションできます。 　この2つのライブラリーは、いずれもMIT licenseです。 　それではWebブラウザー上で「カードが動くタロット占い」アプリケーションを作っていきましょう。 # 簡略化した目次 第1章　開発するプログラム 第2章　開発の準備 第3章　アプリケーションの入り口 第4章　タイトル画面 第5章　カード操作 第6章　占いの結果 第7章　公開の準備 # 詳細な目次 第1章　開発するプログラム 1-1　画面の遷移 1-2　ファイル構成 第2章　開発の準備 2-1　開発環境の準備 2-2　Pixi.js 2-3　Anime.js 2-4　画像とフォント 2-5　タロット占いのデータ　data-tarot.js 第3章　アプリケーションの入り口 3-1　HTMLファイル　index.html 3-2　CSSファイル 3-3　エントリーポイント　main.js 3-4　縦横サイズ　size.js 3-5　リソースの読み込み　preload.js 第4章　タイトル画面 4-1　【進行】アプリの進行　proc.js 4-2　【進行】タイトル画面　proc-01-title.js 4-3　【UI】テキストボタンを作る　ui-button-text.js 4-4　【UI】フェードアウトとフェードイン　ui-fade.js 第5章　カード操作 5-1　【進行】カードを積み重ねる　proc-02-stack.js 5-2　【UI】メッセージボックスを作る　ui-message-box.js 5-3　【UI】スプライトボタンを作る　ui-button-sprite.js 5-4　【進行】シャッフル画面　proc-03-shuffle.js 5-5　【進行】カードの展開　proc-04-spread.js 第6章　占いの結果 6-1　【進行】カードの選択　proc-05-select.js 6-2　【進行】カードの開示　proc-06-open.js 6-3　【進行】結果の表示　proc-07-result.js 第7章　公開の準備 7-1　Web フォントの軽量化　fontmin 7-2　ライブラリーの出力　vite