一般的な 10 種類のゲームを選択し、代表的な例を通じてゲーム エンジンとツールの選択テクニックを詳細に分析し、各ゲームの制作プロセスを詳細に説明し、Web ゲーム開発を短期間でマスターするための体系的かつ実践的なガイドを提供します。

Web ゲーム開発のヒント 目次:

訳者の序文
はじめに
序文
第1章 クイズゲーム1
1.1 ステップ 1: 質問 1
1.2 ステップ 2: 隠れた質問 8
1.3 ステップ 3: 質問 9 を再現する
1.4 ステップ 4: さまざまなプログラム ライブラリの導入 11
1.5 ステップ 5: プレイヤーが選んだ答えが正しいかどうかを判断する 15
1.6 まとめ 19
第2章 テキストアドベンチャーゲーム 20
2.1 ステップ 1: ページ スタイルのデザイン 21
2.2 ステップ 2: ページ ジャンプの実装 25
2.3 ステップ 3: プロップ バーとプロップのドラッグ アンド ドロップ機能を追加する 27
2.4 ステップ 4: 複雑な対話型関数を追加する 35
2.5 ステップ 5: 履歴ナビゲーション機能を追加する 44
2.6 ステップ 6: 素晴らしいエンディングを追加する 46
2.7 まとめ 48
第 3 章 パーティー ゲーム 50
3.1 ステップ 1: atom.js を使用してサンプル ゲームを作成する 50
3.2 ステップ 2: Canvas 要素を使用した描画 56
3.3 3 番目のステップ: マウスの穴を描く 58
3.4 ステップ 4: ほくろを描く 60
3.5 ステップ 5: ほくろをマウスの穴に入れる 63
3.6 ステップ 6: ほくろを穴から出させる 65
3.7 ステップ 7: キーボードをタップしてプレイヤーがモグラと戦えるようにする 67
3.8 HTML5 の [audio] タグが不十分 70
3.9 まとめ 72
第4章 パズルゲーム 73
4.1 ステップ 1:easel.js を使用して 74
をレンダリングする 4.2 ステップ 2: 複数のブロックをレンダリングする 78
4.3 ステップ 3: 同じ色のブロックのペアを作成する 81
4.4 ステップ 4: 同じ色のブロックを一致させて削除する 83
4.5 ステップ 5: 画像の非表示と反転 85
4.6 ステップ 6: 結果の決定 87
4.7 ステップ 7: キャッシュとパフォーマンスの最適化 91
4.8 ステップ 8: ブロック マッチング ゲームを文字認識ゲームに変更する 93
4.9 まとめ 99
第 5 章 プラットフォーム ゲーム 100
5.1 melon.js 100 の最初の紹介
5.2 ステップ 1: タイル マップの作成 101
5.3 ステップ 2: ゲームを開始する 102
5.4 ステップ 3: ゲームキャラクターを追加する 105
5.5 ステップ 4: 衝突レイヤー 107
を構築する 5.6 ステップ 5: ウォーキングとジャンプ 108
5.7 ステップ 6: タイトル画面 110
5.8 ステップ 7: プレイヤーが収集するアイテムを追加する 112
5.9 ステップ 8: 敵を追加する 113
5.10 ステップ 9: 能力強化の小道具を追加する 115
5.11 ステップ 10: 勝敗判定機構の追加とゲーム情報の表示 116
5.12 概要 118
第6章 格闘ゲーム 120
6.1 最初のステップ: game.js 120
について知る 6.2 ステップ 2: スプライト シートに各スプライトを個別に描画する 123
6.3 ステップ 3: 2 人のプレーヤーの入力を処理する 124
6.4 ステップ 4: 移動と変換 127
6.5 ステップ 5: 2 人のプレーヤーの入力がお互いにブロックされないようにする 130
6.6 ステップ 6: ビットマスクを使用してキーステータスを記録する 134
6.7 ステップ 7: マスクを使用して衝突を検出する 137
6.8 ステップ 8: 2 人のゲーム キャラクターを互いに攻撃させます 140
6.9 まとめ 145
第7章 フライトシューティングゲーム 146
7.1 レンダリングに関する準備知識 146
7.2 最初のステップ: gameQuery 148 を理解する
7.3 ステップ 2: 「敵航空機」を追加 150
7.4 ステップ 3: 独自の戦闘機を作成する 153
7.5 ステップ 4: プレイヤーと敵の間の衝突の処理 156
7.6 ステップ 5: 弾丸を発射する 157
7.7 ステップ 6: プレイヤーにさまざまな武器を提供する 159
7.8 まとめ 162
第 8 章 一人称シューティングゲーム 164
8.1 最初のステップ: ジョーズについて知る 164
8.2 ステップ 2: 2 次元マップの作成 166
8.3 ステップ 3: プレーヤーの追加 169
8.4 ステップ 4: レイ キャスティング テクノロジを使用して上面図を描画する 173
8.5 ステップ 5: 光投影技術を使用して疑似 3D 効果を実現する 177
8.6 ステップ 6: プレーヤーにカメラを装備する 180
8.7 ステップ 7: ゲームシーンを装飾する 184
8.8 ステップ 8: コンパニオンを追加する 188
8.9 まとめ 195
第9章 ロールプレイングゲーム 197
9.1 最初のステップ:enchant.js について知る 197
9.2 ステップ 2: マップを作成する 199
9.3 ステップ 3: プレーヤーの追加 202
9.4 ステップ 4: 衝突レイヤー 207
を追加する 9.5 ステップ 5: ステータス画面の描画 209
9.6 ステップ 6: NPC 212
と話す 9.7 ステップ 7: プロペラ バーを描画する 215
9.8 ステップ 8: 小道具ストアを開く 218
9.9 ステップ 9: 戦闘インターフェースの実装 226
9.10 ステップ 10: HTML5 のローカル ストレージ API を介してゲームの進行状況を保存する 236
9.11 概要 238
第 10 章 リアルタイム ストラテジー ゲーム 240
10.1 サーバー 240
10.2 ステップ 1: ノード 243 の構成
10.3 ステップ 2:socket.io を使用して即時通信を実現する 246
10.4 ステップ 3: crafty.js でアイソメ図を作成する 249
10.5 ステップ 4: チェスの駒を引く 251
10.6 ステップ 5: ピースを移動する 255
10.7 ステップ 6: プレーヤーが自分のチェスの駒のみを制御し、相手のチェスの駒のパターンを非表示にできるようにする 258
10.8 ステップ 7: プレイヤーが相手の駒を捕らえてそのパターンを確認できるように衝突検出を実装する 264
10.9 まとめ 268
第 11 章 ゲーム開発のレベルを向上し続ける方法 270
11.1 本書ですでに説明されている内容 270
11.2 次に何を学ぶべきか 271
付録 A JavaScript の基本 273
付録 B コード品質管理 280
付録 C リソース 285