静岡理工科大学 情報学部 全体目次 菅沼ホーム

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

ーHTML5 の CANVAS の利用ー

  ここでは,HTML5 の CANVAS 要素を利用したゲームを作成することによって,プログラミング言語 JavaScript について学びます.いくつかのゲームを扱いますが,あくまでプログラミング言語を学ぶことが目的であるため,作成するゲームの完成度は高くありません.また,ゲーム作成の手順に沿って学習するため,一般的なプログラミング言語に対する教科書とは学習する順序もかなり異なってくると思います.逆に,「プログラミング言語を学ぶ」ということを目的としているがため,実際のゲーム作成手順・方法とは異なったり,非効率になっている部分も多いかと思います.「HTML を理解しよう!」,「JavaScript で動的なホームページを作ってみよう!」,「HTML(目次)」,「JavaScript(目次)」,「DOM 及び CANVAS 関係の JavaScript のプロパティとメソッド」なども参考にして下さい.

  では,具体的に,ゲームを作成しながら JavaScript について学んでいきましょう.

  1. JavaScript と CANVAS

    1. JavaScript
      1. JavaScript の特徴と機能
      2. JavaScript の利用方法
    2. CANVAS 要素の利用方法
      1. アニメーション
      2. イベント処理

  2. ゲーム枠の作成

    1. 全体構造
    2. HTML ファイル
    3. MainPanel
    4. StartPanel
    5. GamePanel
    6. GameClearPanel
    7. GameOverPanel

  3. 基礎技術

    1. フィルタ
    2. イベント処理(ドラッグ)
    3. 速度と加速度
    4. 跳ね返り
    5. 衝突判定
    6. 移動,回転,縮小・拡大

  4. ゲームの作成

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

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

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

    4. 迷路
      1. ステップ1: ゲームの枠組み
      2. ステップ2: 主人公と迷路の配置
      3. ステップ3: 完成
      4. ステップ3: 完成( BGM 付き)

    5. シューティングゲーム
      1. ステップ1: ゲームの枠組み
      2. ステップ2: 移動(自機)
      3. ステップ3: 移動(ボス,敵機)
      4. ステップ4: 弾の発射(自機)
      5. ステップ5: 弾の発射(ボス,敵機)
      6. ステップ6: 完成
      7. ステップ6: 完成( BGM 付き)

    6. ぷよぷよ
      1. ステップ1: ゲームの枠組み
      2. ステップ2: ピースの落下
      3. ステップ3: ピースの生成と落下
      4. ステップ4: ピースの移動・回転・色の交換
      5. ステップ5: ピースの積み上げ
      6. ステップ6: 完成
      7. ステップ6: 完成( BGM 付き)

    7. 8パズル
      1. ステップ1: ゲームの枠組み
      2. ステップ2: 初期状態の生成
      3. ステップ3: 完成

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

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

静岡理工科大学 情報学部 全体目次 菅沼ホーム