JavaScriptとHTMLで「レトロ風RPG」を作ろう 全コード解説

「ゲームの構造と素材」についての前置きです。

ゲームの画面構成とゲームの内容を確認します。タイトル画面、マップ画面、イベント画面、戦闘画面の4つの画面、そしてゲームのシステムについて確かめます。

ゲームの構成要素や、必要な技術を確認します。ユーザー操作、データ管理、描画、音声、保存・復帰という5つの要素と、その内容を学びます。

作成するプログラムの構成を確認します。ファイルとディレクトリの構成を確かめます。

使用する画像素材を確認します。マップチップとキャラチップ、そしてフォント用画像の実物と仕様を確かめます。

使用する音声素材を確認します。BGMと効果音について、また楽曲の入手方法について学びます。

「HTMLなどの枠組み」についての前置きです。

ゲーム（Webアプリ）の枠組みになる index.html を説明します。CSSファイルの読み込みやJavaScriptファイルの読み込み、bodyタグの中身について学びます。

ゲーム（Webアプリ）の表示を決める main.css を説明します。UIのゲーム化、全画面化、ドット絵化について学びます。

ゲームの初期化の流れを確認します。最初のHTMLの読み込みと解析が完了したら処理を開始し、ゲームのデータの初期化、HTMLとの連携、リソースの読み込み、ゲームの開始をおこなう流れを学びます。

「ゲームのデータ」についての前置きです。

ゲームの描画用の設定と、世界を表現するためのデータを確認します。classとconstructorとthisについて触れておきます。ゲームの全体（画面構築、マップ、宝、敵など）のデータについて学びます。

主人公キャラクターのデータを中心に確認します。classとmethodについて触れておきます。ユーザー固有（地図用のデータや移動用のデータ、アイテムなど）のデータについて学びます。

主人公キャラクターの能力値やレベルを計算します。classとstaticについて触れます。レベルやアイテムをもとに能力値を計算する処理、経験値を追加してレベルアップする処理について学びます。

乱数のシード値をもとに、マップを自動生成します。全体を平地で初期化し、山頂を中心に山を作り、森や湖を散布し、魔王の城や街を生成する処理を学びます。

URLのハッシュ値にユーザーデータを保存、復帰する処理です。ブックマークに保存することで、ゲームを保存したり復帰したりする処理を学びます。

「ゲームの基本的な処理」についての前置きです。

基本的な処理（js-game/～）に含まれる処理について説明します。ゲームの枠組みになる処理、その他の処理、リソース管理の処理、シーン管理について学びます。

複数のCanvasを作り、重ね合わせることでレイヤー構造を作ります。Canvasの生成と、複数のCanvasをレイヤー状に重ねて初期化する処理を学びます。

アニメーションを実現する、繰り返し処理を実装します。Webブラウザ用のアニメーション処理、アップデート用関数の登録、時間の差分を計算して登録関数を呼び出す処理について学びます。

ウィンドウへのサイズ適応と、クリックやタップの座標変換をおこないます。画面サイズの計算や全画面へのフィット、クリックやタップの操作を受け取り、ゲームに送る処理を学びます。

その他の雑多な処理の説明です。ゲームに多用するいくつかの関数を収めています。シード付き乱数生成オブジェクトもここにあります。

画像の読み込み管理についての説明です。画像の読み込みと、Promiseによる読み込み待機、ゲームからのIDを利用しての参照について学びます。

音声の読み込み管理と、再生などの処理についての説明です。音声の読み込みと、Promiseによる読み込み待機、ゲームからのIDを利用しての参照について学びます。また、通常再生やループ再生、BGMの管理などについて学びます。

音声の読み込み管理と、再生などの処理についての説明です。前回の続きです。

「文字とウィンドウの描画」についての前置きです。

描画は、低いレベルの処理を組み合わせて、高いレベルの処理を実現します。その階層構造について学びます。

Webフォントを利用するのではなく、画像を利用したレトロゲーム風文字の描画方法を説明します。通常の文字列描画、中央寄せの文字列描画、枠付きの文字列描画について学びます。

レトロゲーム風のウィンドウを描画する方法を説明します。単純なウィンドウ描画、ウィンドウサイズの計算、1行ずつの文字列描画などを学びます。

マップ、バトルの両方で使用するステータス描画の処理を説明します。ステータス用の文字列を作成して、ウィンドウサイズを計算して描画して、テキストを描画する処理を学びます。

「マップの描画」についての前置きです。

描画は、低いレベルの処理を組み合わせて、高いレベルの処理を実現します。その階層構造について学びます。

同じサイズの画像が並んだマップ チップ、キャラ チップなどの画像から、指定部分を取り出す処理を学びます。2Dのゲームでは多用する処理です。

マップと、その上の主人公を描画します。マップのデータを元に、平地や森、山や水なでおの土地を描画します。また、画面の中央に主人公を描画します。ゲームの中心になる画面描画について学びます。

全体マップを描画します。画面の右上に、マップ全体を縮小して表示します。マップだけではなく、街や城といった重要拠点の点滅表示、主人公位置の強調など、全体マップらしい表示について学びます。

「アイテムの描画」についての前置きです。

マップ画面へのアイテムの描画処理について説明します。文字列描画を利用して、所有アイテムの一覧を表示する処理を学びます。

所有しているアイテムの、名前の配列を取得する処理について説明します。マップ画面での所有アイテム一覧表示以外にも、戦闘画面でのメニューの作成にも使います。そのための処理の共有化についても学びます。

「タイトル画面とマップ画面」についての前置きです。

タイトル画面の処理の内容を説明します。開始、タップ、アニメーションの基本構造と、その処理内容について学びます。

マップ画面の処理の内容を説明します。マップ画面の開始、タップ、アニメーションの基本構造と、その処理内容について学びます。各種メソッドの呼び出しについても学びます。

「マップ画面の処理」についての前置きです。

クリックやタップが、画面内の四方向のいずれであるかを判定します。クリックやタップ位置から、描画領域のどの方向かを判定する処理について学びます。

マップ内での移動の処理をおこないます。移動管理、移動開始、移動中に分けて、アニメーションしながらの移動を実現する方法を学びます。

マップ内で移動した際の、イベント判定を実装します。街や城への到着、戦闘の発生を管理する方法を学びます。