AdAttack

（本アプリは、DDoS 等のあらゆるサイバー攻撃と一切の関係がありません。あらかじめご了承ください。）

ゲーム概要

1. 拡張機能を導入する a. release から zip ファイルをダウンロード b. ↑に書いている手順に従って有効化してネ

こだわり

技術

• ゲームつくりたい
• 任意の Web 上で動かしたい

以上二つの要件を満たすため、ネイティブな JavaScript + Chrome 拡張として作成しました。 ゲーム内の概念をオブジェクト指向に再設計するプロセスを練習してみたかったので、一般的なライブラリなどは使わず、あえて手作業で実装してみています。

OOPあまり詳しくないので、わからない部分は自分なりにパターン化して実装してみました 問題点を洗い出しつつ、リファクタリングしながら都度設計しました

設計

• ゲームの処理全般を別サイクルへと切り出しました
  • 描画と状態処理を分離することで、コードの管理を楽にしています
  • ユーザ操作を管理する状態クラスを用意し、ユーザの操作状態（キーの長押しなど）をフラグ管理しています
  • これらのクラスはシングルトン（唯一のインスタンスをクラス自身が管理する）パターンで実装され、システム内のどこからでも参照できるようにしています

実装

GameState でのオブジェクト管理

• GameState: ゲームの状態を統括管理する
  • ゲーム内のオブジェクトは GameObject を継承し、 GameState.objects でまとめて管理
  • GameObject.update() を継承し、状態更新ロジックを実装
  • GameState 内で各 GameObject.update() を呼ぶことで状態更新

作っててたのしかった（苦しかった）ところ

レンダリング処理

• canvas のレンダリング処理は Game.draw() ですべて取り持っている
  • もともと各オブジェクトは長方形で表され、色と形だけで識別されていた（参考：プロトタイプ）
  • これを任意の画像素材に置換したかったので、ローダーを実装した
    • 素材となる画像の名前を受け取り、
    • Chrome 拡張内部の画像へアクセスし、
    • 読み込めたら canvas にレンダリングできる形式に変換して読み込むように実装した

オブジェクト構造とレンダリング

• もともと、ゲーム内のオブジェクトは JavaScript 上の単一の GameObject で表現していた
• ただ、「閉じる」ボタンをつけたりする段階で、ひとつの敵が複数の GameObject を持つ必要があった
• これを解決するために、以下のような実装を行った
  • 敵オブジェクトは、以下の3つからなる
    • EnemyHead
      • 他のすべての敵パーツを取り持つ親オブジェクト
      • 子要素をすべて破壊する権限を持つ
        • EnemyCloseBtn を一つも持たないとき、自己破壊するようにした
    • EnemyPart
      • 広告の部分
    • EnemyCloseBtn
      • 「閉じる」ボタンの部分