クソアプリアドベントカレンダー2022 5日目担当の@nabettuです！
今日は表題の通り「GitHubが落ちときだけ遊べるゲームを作ってきました！」
みなさんこの崖から落ちていく悲しきOctoCatをみたことはありますか？
この画面が出たらエンジニアはもう仕事になりませんよね。。。
ということでそんなときのために！GitHubが500画面になると自動的にゲームが挿入されるChrome拡張を作ってきました。プレイ画面はこんな感じです。
崖の下で襲ってくるバグから逃げつづけるOctoCatをイメージしたゲームになります。
このChrome拡張さえいれておけば、いつGitHubが落ちても安心ですね！
利用方法
一応GoogleWebストアの審査には出しましたが、多分審査で落ちてしまうのでw、こちらからダウンロードしていただいて、
「Chrome設定画面→拡張機能→右上のデベロッパーモードをON→パッケージ化されていない拡張機能を読み込む」から、Zipを指定してインストールしてください。
そして遊ぶためにはGitHubに落ちてもらわなきゃならないのですが、実は500画面は /500 にアクセスすると500画面が表示できるので、ぜひこちらで遊んでみてください。
※こちらの画面で動くように作ってありますので、もしかしたら怒ったピンクのユニコーンの画面だと動かないかもしれませんｗ
作り方
ブラウザで動くゲームとして、今回はアドベントカレンダー1日目のDE-TEIUさんの構成を参考にさせていただきました。
こちらのゲームもPhaser(フェイザー)を使って作ってみました。
さて、ゲーム単体で動くページであればこちらの記事にそって作っていただくだけでよいのですが、
これを
- 既存の画面に差し込む形で
- ChromeExtensionにゲームを入れて動くようにする
方法をそれぞれ解説していきます。
既存の画面にゲームを差し込む
今回のChromeExtionsionは動作する画面はマニフェストファイルに記述することで、github.comのみとしています。
そして500画面にあるerror_500というIDのdomがあったら動作するようにしています。
そのうえでPhaserのConfigでも同じdomを指定してそのdom内にゲームを配置しつつ、画面の真ん中に置かれるようにcssを追記しています。
const errorDom = document.querySelector("#error_500");
if (errorDom) {
errorDom.setAttribute(
"style",
"position: fixed;top: 0;left: 50%;transform: translateX(-50%);z-index: 100;"
);
startGame();
}
const config: Phaser.Types.Core.GameConfig = {
parent: "error_500",
...省略
};
export const startGame = path => {
new Phaser.Game(config);
};
ChromeExtensionにゲームを入れて動くようにする
上記のように設定したうえで、ビルドしたjsをconsoleで実行するとそのまま動くのですが、一点問題があります。Webサイトと違ってjsと一緒に配置されていないため画像の読込ができなくなってしまいます。
そこで、マニフェストファイルに web_accessible_resources で画像を追加しつつ、
こちらの記事を参考にしてファイルパスを取得→ゲームの実行時に拡張機能内の画像パスを読み込んでゲーム内に展開する。という方法で実現しました。
//ゲーム読込前のパス取得
const imagePath = {
octocat: chrome.runtime.getURL("images/octocat.png"),
bug: chrome.runtime.getURL("images/bug.png"),
bg: chrome.runtime.getURL("images/bg.png"),
};
//ゲーム内での読込
this.load.image("octocat", imagePath.octocat);
以上がChromeExtionsionで動くゲームを既存のサイトに挿入する方法でした！
ソースコードはこちら
明日は@Gonsunaさんよろしくお願いします！