#20 JavaScriptでアクションゲームを作る │ 外部サイト「GitHub」に公開

走れない代わりに、走るゲームを創るプロジェクト、第20回。

今回は、ブログに直接JavaScriptを書くのではなく

外部サイトに公開したゲームをブログで表示する

というバージョンアップを行った。

おかげでブログがサクサク動くようになった。

プレイヤーにとっては小さな変化だが、開発者にとっては大きな一歩なのである。

バックナンバー

過去のバックナンバー（改訂履歴）は以下のとおり。

• #1　横移動・ジャンプ移動
• #2　敵・ダメージ・スコア
• #3　ジャンプ動作・敵ランダム出現・ゲームオーバー表示
• #4　走る動作・地平線追加・タップして再開
• #5　タップdeスタート・登場シーン・スピードレベル追加
• #6　ダメージ動作
• #7　背景変更
• #8　地面画像変更
• #9　敵キャラ追加
• #10　効果音追加
• #11　背景の追加
• #12　中ボス登場！
• #13　体力ゲージ追加
• #14　3回までダメージOK・ダメージ音追加
• #15　Twitterシェアボタン
• #16　回復アイテム登場！
• #17　変身アイテム登場！
• #18　スライディング・ボタン追加
• #19　無敵モード追加

本日の成果物

解説

本ブログにはコチラに公開したゲームを埋め込んでいる。

今までブログに直接JavaScriptを書いており、50万字を超える記事になってしまっていたので、ブログがめちゃくちゃ重くて公開するのもひと苦労だった。

それを外部サイト「GitHub」にゆだねることで一気に肩の荷がおりたのである。

本日の参考Web

「GitHub」はプログラムソースを管理をすることもできれば、Webページを作って公開することもできてしまう超優秀なサービスである（しかも、ほぼ無償）。

今回は

1. GitHubでゲームを外部に公開
2. 外部公開したゲームをブログに埋め込む

ことで、ブログへの負担を一気に下げることに成功した。

実現にあたって参考にさせていただいたWebページを以下に紹介する。

ゲームをWebサイトに公開する「GitHub」

もともとhtmlファイルもjsファイルもローカルで作っていたので、アップロードはめちゃくちゃカンタンだった。

変えたのはメインのファイル名をindex.htmlにしなければならない点くらいだったかな。

外部サイトをブログに埋め込む「iframe」

本記事の場合、こうやって書いただけ↓

<div style="width:115%; height:115%;">
	<iframe src="https://youkey69.github.io/megaman_20/index.html" width="460" height="500" frameborder="0" style="transform:scale(0.85); transform-origin:left top;></iframe>
</div>

シンプルではあるが、縮尺の調整にすこし手こずってしまった。

今後の展望

ソースをGitHubに移管したことで、50万字を5000字以下に減らすことができた。

100分の1以下への削減だ、すごい。

ずっとブログに負荷をかけており、気になっていたのでようやく悩みの種をひとつ消すことができた。

個人的にはスマホアプリでブログが編集できるように戻ったのがうれしい。

効果音に対応するようになってからPC版じゃないと更新できなくなり、めっちゃ不便だったからだ。

さて、ロックマンについては相変わらず無双モードが止まらないので、なんとか阻止せねばなるまい。

走る、を創ろう。