JavaScriptとHTMLで「タワーディフェンス」を作ろう 全コード解説

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

ゲームの画面構成とゲームの内容を確認します。タイトル シーン、防衛シーンの2つの画面、そしてゲームのシステムについて確かめます。

ゲームの構成要素や、必要な技術を確認します。ユーザー操作、データ管理、描画という3つの要素と、その内容を学びます。また、必要なゲーム内の処理について学びます。

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

使用する画像素材を確認します。タワーや弾や敵、ボタンやロゴの画像の実物と仕様を確かめます。

使用するWebフォントを確認します。またWebフォントの入手方法について学びます。

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

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

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

ゲーム終了時のダイアログ表示用の dialog-end.css を説明します。

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

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

ゲームの基本的なデータを確認します。classとconstructorとthisについて触れておきます。ゲームの全体（敵、塔など）のデータについて学びます。

「ゲーム データ」の続きです。

ゲームの表示や描画用の設定をまとめたファイルです。複数のゲームを作る際に、切り換えられるように、ファイルに設定をまとめています。

プレイ中のデータを中心に確認します。classとmethodについて触れておきます。プレイ中固有のデータや、盤面の初期化について学びます。

「ユーザー データ」の続きです。

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

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

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

「Canvasによるレイヤー構造」の続きです。

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

「アニメーションと時間の管理」の続きです。

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

「リサイズ対応と入力の座標変換」の続きです。

「リサイズ対応と入力の座標変換」の続きです。

「リサイズ対応と入力の座標変換」の続きです。

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

基本的な処理2（js-game2/～）に含まれる処理について説明します。リソース管理の処理、雑多な処理について学びます。

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

「画像管理」の続きです。

Webフォントの読み込み管理についての説明です。Webフォントの読み込みと待機方法、Promiseによる読み込み待機について学びます。

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

スクリーンショットを保存する処理の説明です。セキュリティー的な制限についても説明します。

「スクリーンショット」の続きです。

「タイトル シーンと防衛シーン」についての前置きです。

「タイトル シーン」の処理の内容を説明します。開始、タップ、更新の基本構造と、その処理内容について学びます。

「タイトル シーン」の続きです。

「タイトル シーン」の続きです。

「防衛シーン」の処理の内容を説明します。開始、タップ、更新の基本構造と、その処理内容について学びます。

「防衛シーン」の続きです。

「防衛シーン」の続きです。

ボタンの振る舞いをおこなうための処理を説明します。ここでは簡易的に、範囲を持ち、タップやクリックから一定時間後に実行するボタンを学びます。

防衛シーンでのボタンの初期化を見ていきます。ボタン用の設定を作り、配置していく処理を学びます。

「描画基本」についての前置きです。

背景描画の処理について説明します。ここを差し替えることで、独自の背景にすることができます。

防衛シーンの盤面描画について説明します。効率よく盤面を描く方法を学びます。

防衛シーンの情報描画について説明します。ゲームの情報を描画する方法を学びます。

「情報の描画」の続きです。

「描画タワーディフェンス」についての前置きです。

防衛シーンの弾の描画について説明します。弾の中心位置に対して、どう画像を描画するのかを学びます。

防衛シーンの敵の描画について説明します。敵の中心位置に対して、どう画像を描画するのかを学びます。また、敵のHPのバーの描画について学びます。

防衛シーンの塔の描画について説明します。塔の画像、レベル、攻撃範囲の描画について学びます。

「描画終了処理」についての前置きです。

防衛シーンの終了時の表示について説明します。実際の表示と付き合わせて確かめていきます。

防衛シーンの終了時のダイアログについて説明します。各種ボタンの作成と、実際の処理について学びます。

「終了ダイアログ」の続きです。