クロクロ・ショップ
サイトTOP

JavaScriptでカードが動くタロット占いアプリを作ろう

Xにポスト X@ruten 開発支援 開発/執筆依頼

 Webブラウザー上で「カードが動くタロット占い」を作る動画講座です。ダイヤモンドクロスの占いをおこないます。

 『Pixi.js』と『Anime.js』を使います。

詳細情報

 中級者(JavaScriptの文法が分かる人)向けの講座です。

 このコースでは、JavaScriptを使って、Webページ上でタロットカードがアニメーションする占いアプリケーションを作成します。

 次のようなアプリケーションを作ります。

 また、その開発を通して、Webページ上でアニメーションするアプリケーションの作り方を学びます。

 このコースでは、次のような事を学びます。

  • ゲーム向けライブラリー「Pixi.js」を利用した、カードをアニメーションさせるアプリケーションの作り方。
  • Tween方式でオブジェクトを動かすライブラリー「Anime.js」を利用した、手軽なアニメーションの手法。
  • タロット占いのデータの用意の仕方から、実際のアプリケーションの作成までの過程。
  • 作成したアプリケーションのプログラムやCSSを1つにまとめて、ライブラリー化する簡単な方法。
  • Webフォントの縮小化によるファイルサイズの軽量化。
  • 既存のWebサイトへの新規アプリケーションの組み込み。

 使用するライブラリー「Pixi.js」「Anime.js」はMIT licenseなので無料で利用できます。

 コースで紹介するコードやデータは、サンプルとして全てダウンロードできます。開発は、Windowsでおこなっていきますが、基本的なところはOS共通です。


screenshot screenshot screenshot screenshot screenshot screenshot

 コースは、次のように進みます。

● 第1章 イントロダクション  ・画面の遷移  ・ファイル構成  ・サンプルコードの入手 ● 第2章 開発の準備  ・開発環境の準備  ・Pixi.js  ・Anime.js  ・画像  ・フォント  ・タロット占いのデータ ● 第3章 アプリケーションの入り口  ・HTMLファイル  ・CSSファイル  ・エントリーポイント  ・縦横サイズの調整  ・リソースの読み込み ● 第4章 タイトル画面  ・進行 - アプリの進行  ・進行 - タイトル画面  ・UI - テキストボタンを作る  ・UI - フェードアウトとフェードイン ● 第5章 カード操作 - シャッフル  ・進行 - カードを積み重ねる  ・UI - メッセージボックスを作る  ・UI - スプライトボタンを作る  ・進行 - シャッフル  ・進行 - カードの展開 ● 第6章 カード操作 - 3つの山  ・進行 - 3つの山を作る  ・進行 - 3つの山をまとめる  ・進行 - 4枚を十字に並べる ● 第7章 占いの結果  ・進行 - 結果表示ボタン  ・進行 - 結果の表示  ・全体の確認 ● 第8章 ライブラリー化 公開の準備  ・Webフォントの軽量化  ・ライブラリーの出力

QR コード

情報

著作権者 : 柳井 政和

Web Site : http://crocro.com/

This Page : https://crocro.com/shop/item/course_js_tarot.html

Twitter : ruten

Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2024 Cronus Crown (c)1997-2024 Masakazu Yanai
ご意見・お問い合わせはサイト情報 弊社への連絡までお願いします
個人情報の取り扱い、利用者情報の外部送信について