JavaScript によるゲームプログラミング

ーHTML5 の CANVAS の利用ー

　　ここでは，HTML5 の CANVAS 要素を利用したゲームを作成することによって，プログラミング言語 JavaScript について学びます．いくつかのゲームを扱いますが，あくまでプログラミング言語を学ぶことが目的であるため，作成するゲームの完成度は高くありませんし，実際のゲーム作成手順・方法とは異なったり，非効率になっている部分も多いかと思います．また，ゲーム作成の手順に沿って学習するため，一般的なプログラミング言語に対する教科書とは学習する順序や内容がかなり異なってくると思います．特に，このページで示したゲーム内で利用していない言語仕様には触れない，重複した説明がたびたび現れるなど，通常の教科書とはかなり異なった内容になることをご承知ください．HTML や JavaScript に対する仕様の詳細については，「 HTML & CSS」や「 JavaScript と C/C++」を参考にして下さい．

　　では，具体的に，ゲームを作成しながら JavaScript について学んでいきましょう．ゲーム自身は，どのゲームを先に読んでもらっても構いませんが，特にプログラミング言語に詳しくない方は，各ゲームに対する説明を読む前に，必ず，Ⅰ 章及び Ⅱ 章を先に読むようにしてください．

1. JavaScript と CANVAS
   1. HTML 文章の基本構造
   2. JavaScript
      1. JavaScript の特徴と機能
      2. JavaScript の利用方法
   3. CANVAS 要素の利用方法
      1. アニメーション
      2. イベント処理

2. ゲーム枠の作成
   1. 全体構造
   2. HTML ファイル
   3. MainPanel
   4. StartPanel
   5. GamePanel
   6. GameClearPanel
   7. GameOverPanel

3. 基礎技術
   1. 図形の描画
      1. 描画方法
      2. もう一つの例
   2. ビットマップ，フィルタ，外部画像
      1. ビットマップ
      2. 外部画像
      3. フィルタ
      4. もう一つの例
   3. イベント処理
      1. マウスのクリック
      2. ドラッグ
      3. キーイベント
      4. もう一つの例
   4. 速度と加速度（その１）
      1. 速度
      2. 加速度
      3. 自由落下
      4. もう一つの例
   5. 速度と加速度（その２）
      1. 摩擦
      2. 周期運動
      3. もう一つの例
   6. 跳ね返りと乱数
      1. 跳ね返り
      2. 乱数
      3. もう一つの例
   7. 衝突判定
      1. パスと点
      2. パスと複数の点
      3. 距離
      4. もう一つの例
   8. 移動，回転，縮小・拡大
      1. アフィン変換
      2. もう一つの例
   9. 背景（マップ）
      1. マップの使用
      2. もう一つの例
   10. HTML 要素の属性値

4. ゲームの作成

   1. アクションゲーム
      （その１）　1 枚の画像で背景や障害物を表現
      1. ステップ１： ゲームの枠組み
      2. ステップ２： ゲームオーバー
      3. ステップ３： ジャンプ
      4. ステップ４： 完成
      5. ステップ４： 完成（ BGM 付き）
      （その２）　格子内に配置した小さな画像の組合せで背景や障害物を表現
      1. ステップ１： ゲームの枠組み
      2. ステップ２： ゲームオーバー
      3. ステップ３： ジャンプ
      4. ステップ４： 完成
      5. ステップ４： 完成（ BGM 付き）

   2. タワーディフェンスゲーム
      1. ステップ１： マップの表示
      2. ステップ２： マップの編集
      3. ステップ３： 敵の生成
      4. ステップ４： 味方の生成
      5. ステップ５： 完成

   3. ブロック崩し
      1. ステップ１： ゲームの枠組み
      2. ステップ２： ボールの動き
      3. ステップ３： ブロック崩し
      4. ステップ４： 完成

   4. 迷路
      1. ステップ１： ゲームの枠組み
      2. ステップ２： 主人公と迷路の配置
      3. ステップ３： 完成
      4. ステップ３： 完成（ BGM 付き）

   5. シューティングゲーム
      1. ステップ１： ゲームの枠組み
      2. ステップ２： 移動（自機）
      3. ステップ３： 移動（ボス，敵機）
      4. ステップ４： 弾の発射（自機）
      5. ステップ５： 弾の発射（ボス，敵機）
      6. ステップ６： 完成
      7. ステップ６： 完成（ BGM 付き）

   6. ぷよぷよ
      1. ステップ１： ゲームの枠組み
      2. ステップ２： ピースの落下
      3. ステップ３： ピースの生成と落下
      4. ステップ４： ピースの移動・回転・色の交換
      5. ステップ５： ピースの積み上げ
      6. ステップ６： 完成
      7. ステップ６： 完成（ BGM 付き）

   7. ８パズル
      1. ステップ１： ゲームの枠組み
      2. ステップ２： 初期状態の生成
      3. ステップ３： 完成

   8. ナンプレ
      1. ステップ１： ゲーム枠の作成
      2. ステップ２： ルール違反のチェック
      3. ステップ３： 数字の出現回数の表示
      4. ステップ４： 数字入力可能位置の表示
      5. ステップ５： 状態の記憶と復元

   9. オセロ
      1. ステップ１： ゲームの枠組み
      2. ステップ２： 初期状態の表示
      3. ステップ３： コマを置く
      4. ステップ４： 勝敗とスキップ
      5. ステップ５： 完成