カードが動くタロット占いをつくろう　JavaScriptでアニメーションするWebアプリ

Webブラウザー上で「カードが動くタロット占い」を作る本です。

　画面上にカードを並べ、シャッフルし、配るものです。最終的に表側になったカードの内容をもとに、占い結果の文章を出力します。

　実現方法はいくつかありますが、今回は次のような方針で作ることにしました。

* 使用言語は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章　公開の準備

『Python』で、PC向けゲームを作る本です。簡単に遊べるレトロ風RPGを作ります。

　ゲーム開発のライブラリは『Pygame』を使います。

　環境の構築、『Python』の簡単な仕様、『Pygame』の使い方を学んだあと、実際のプログラムに入ります。ゲームは全コードを解説しています。

　簡略化した目次は次のとおりです。

第1章 開発するゲーム
第2章 開発環境の構築
第3章 Pythonの基本的な文法
第4章 Pygameの使い方
第5章 main.pyと初期化
第6章 データ パッケージ
第7章 イメージ パッケージ
第8章 ゲーム パッケージ
第9章 タイトル シーン パッケージ
第10章 マップ シーン パッケージ
第11章 バトル シーン パッケージ
第12章 その他のプログラム

『7-Zip』にはコンソール版があります。このコンソール版を利用すると、コマンドラインからさまざまな機能を利用できます。そしてクラウド向けのバックアップツールとして活用できます。『7-Zip』は、ファイルの差分圧縮や暗号化に対応しているからです。

クラウドへのバックアップは、今ではふつうのことになりました。その際、圧縮して差分ファイルを作ると転送量が大幅に減ります。また暗号化するとクラウド運営会社にファイルの中身を見られなくなります。

また『7-Zip』はファイルの分割・結合もできます。無圧縮でファイル分割をすると、ファイル分割・結合ツールとしても利用できます。Windowsにはファイル分割コマンドがないので、その代わりになります。クラウドにバックアップする際も、ファイルの単体が数GBになっている場合には、この方法で小分けにできます。

本書では、こうした用途で利用する場合のコマンドやスイッチを、豊富なサンプルとともに解説していきます。

目次は次のとおりです。

第1章：7-Zipとは
　7-Zipとは
　コマンドやスイッチ
　コンソール版の構文
第2章：基本的な使い方
　フォルダを圧縮
　展開
　出力先を指定して展開
　パスの一覧
第3章：対象の選別や除外
　選別や除外の必要性
　リストファイル
　再帰サブディレクトリ スイッチ
　除外ファイル スイッチ
　収録ファイル スイッチ
第4章：暗号化
　暗号化の必要性
　暗号化して圧縮
　暗号化された圧縮ファイルを解凍
第5章：差分ファイルの作成
　差分ファイル作成の必要性
　基本圧縮ファイルの作成
　差分圧縮ファイルの作成
　展開による復元
第6章：ファイル分割
　ファイル分割の必要性
　ファイルを分割する
　分割したファイルを復元する
　ファイル分割と差分作成の問題
第7章：CPU負荷の調整
　CPU負荷の調整の必要性
　CPUを制限して実行

ダンジョンを探検するアクションゲームの全コードを掲載して解説した本です。HTML5＋JavaScriptで、ライブラリを使わずに開発しています。

サンプルのコードが付いており、実際に遊ぶことができます。遊んだり、改造したりしながら、ゲームの中身を確認できる技術書です。

ゲームは、以下の特徴を持っています。

・画面をタップして、その方向にキャラクターが移動する。
・迷路の要素を含んだダンジョンを自動的に生成する。
・鍵を取って、ゴールの扉まで移動するとクリアという、イベント要素が入っている。
・イベントが起きると、ドット絵のダイアログを表示する。
・移動速度やアルゴリズムの違う敵が、ダンジョン内を徘徊している。
・敵に当たると死亡する。
・レトロゲーム風に、ドットのみで構成された画面を表示する。
・外部ライブラリを使わない。

本書を通して、ゲーム開発の楽しさを体験していただければと思います。


　目次は以下になります。

- 目次 -

・第1部：枠組み
・　第1章：ゲームの構造と素材
・　第2章：HTML、CSS、main.js他
・　第3章：ゲームの基本処理
・第2部：ゲーム本体
・　第4章：タイトル シーン
・　第5章：ゲームのデータ
・　第6章：ダンジョン生成1 アルゴリズム
・　第7章：ダンジョン生成2 コード
・　第8章：敵
・　第9章：移動処理
・　第10章：マップ シーン1 初期化
・　第11章：マップ シーン2 移動とイベント
・　第12章：マップ シーン3 描画
・第3部：基本処理
・　第13章：基本処理
・　第14章：リソース
・　第15章：ユーティリティ
・　第16章：UI部品

JavaScriptのエラー メッセージについて、サンプル コードと、Chrome、Firefoxでのログを掲載して解説した本です。

プログラミングの初心者は、エラー メッセージを読まないことが多いです。そのため、エラー メッセージを読むこと、その内容を調べることをよく伝えます。また、MDNの「JavaScript エラーリファレンス」をすすめます。

本書では、MDN の「JavaScript エラーリファレンス」を元に、その全てをサンプル コードを書いて検証しました。実際に実行すると、Chrome と Firefox でエラー メッセージが異なっていたり、挙動が違っていたりすることが分かります。本書では、このサンプル コードとエラー メッセージを全て掲載して解説しています。

本書で取り上げている項目は、2022年9月1日時点で MDN の「JavaScript エラーリファレンス」に掲載されているものです。サンプル コードとともに、実際にはどのようなエラーが発生するのかを確認してください。

目次は以下になります。

- 目次 -

まえがき
第1章：ReferenceError
第2章：SyntaxError
第3章：TypeError
第4章：RangeError
第5章：URIError、InternalError、Error
第6章：Warning
あとがき
巻末付録