【ボンバーDX 全50ステージ】JavaScriptによる自作ゲームの紹介と、技術解説（初心者向け）

#ボンバーDX（ボンバー デラックス）
![sns.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453200/fd0b1b05-d6b6-370d-175d-0dd56a506039.png)
自作の無料ゲームを宣伝します。
今回のゲームジャンルも「**爆弾アクション**」。
前回公開した「ボンバー60」の進化版です。

**【ボンバー60については、こちら】**
https://qiita.com/hotnews/items/6eeb8fd367ce4137f1c8

##ボンバーDX（ゲーム紹介）
![bomberDX.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453200/d070f6dd-c13b-1abe-c634-4503d73dcbcd.gif)
https://hotnews8.net/game/act/bomberDX/

前作「ボンバー60」が某ネット掲示板で「単調なクソゲー」と酷評…。そのため、ゲーム機能を強化しました。

具体的には、
- 定期的に吹き出てくる蒼炎（吹出量は、時間が経つほど増加）
- 突き出す刃
- 動く鉄球
- 魔法陣（定期的に、周囲にモンスター召喚）
を追加。

また、難易度自体も **初級001から かなり難しく**なっています。

そして「初級ステージ」と「中級ステージ以降」で、フィールドの雰囲気がガラッと変わるのも特長です。

---

**【ボンバーDX 全50画面】**
https://hotnews8.net/game/act/bomberDX/

**【基本ルール】**
レンガ（破壊可能ブロック）のどこかに隠れているゴールを見つけて辿り着けば、ゲームクリア。
ただし、モンスターを全て倒してからでないと、ゴールには入れません。
プレイヤーが、モンスター/蒼炎/刃/鉄球/爆炎 に計5回衝突すると、ゲームオーバーです。

**【操作は簡単】**
操作ボタンは5つ（上下左右の移動と、爆弾投下）しかありません。
複雑そうな機能については、「練習（チュートリアル）ステージ」があるので、そこで動きを説明しています。

**【気分転換に最適】**
1ゲームは5〜10分程度。それが50個（50画面）もあります。
作業中の気分転換や、移動中の暇つぶしに、ぜひ遊んでみてください。
（ゲーム設定で効果音を消せます。）


##ボンバーDX（技術的なこと）
以下、せっかく Qiitaに投稿していますので、技術的なことを書いてみます。
###フルスクラッチでのブラウザゲーム開発
私はもともとC言語の技術者でした。生粋のWebプログラマー（フロントエンジニア）ではありません。
サーバサイドのPHPならば多少は自信ありますが、HTML5、CSS3、JavaScript などのスキルを勉強中の身です。

そのため、まずは言語仕様に精通しようと、**フルスクラッチで開発**しています。
（※ 乱数生成に関してのみ、外部ライブラリを使用しています。Math.random() は、精度が悪すぎて…）

また、「スマホ対応のブラウザゲーム」というと **HTML5 + canvas** が定番ですが、業務でWebサイトを制作する際は DOM操作スキルの方が必要になると考え、canvasを使用していません。


###１．画面表示や操作への反応速度
canvasを使っていないので、
画面表示が遅くなるかな？
反応速度が鈍くなるかな？
アクションゲームとしては致命的かな？
と思っていたのですが、意外にも サクサク動いてくれて驚いています。

（**iPhone5S** でもプレイできています。）

余談ですが、
「**開発環境は高スペック、テスト環境は低スペック**」というのは、とくにWebにおいては鉄則ですよね？？

###２．スレッド処理
ためしに、ボンバーDXの初級001をプレイしてみてください。
https://hotnews8.net/game/act/bomberDX/2001

「
モンスターが移動し、
鉄球の鎖が伸びたり縮んだりし、
蒼炎がボボボ…と噴出し、
ユーザのボタン操作（もしくは、キーボード操作）でプレイヤーが移動し、
ユーザが爆弾を投下したら3秒後に爆発
」
という動きがあります。
（もっとステージが進めば、突き出す刃 や 魔法陣も登場）

こうした動きは、他の言語であればマルチスレッドで実装するところですが、**JavaScriptはシングルスレッド**なんですよね…。

####スレッド処理の解決方法

いろいろ試行錯誤してみましたが
**ゲーム開始〜ゲーム終了まで無限ループを回し続け、そのループ内で個別処理の関数を呼び出すやり方** が、最もプログラミングしやすかったです。

↑これっておそらくは、10年以上昔の「**シングルコアCPU + WindowsOS**」と同じ仕組みですよね。

（WindowsOSはマルチプロセスですが、実際に処理をするCPUコアは1つだけ。
OSがCPUの処理時間を細分化して 各プロセスに割り当てているため、シングルコアCPUでも 複数のアプリが同時に動いている　・・・ように見せかけている技術）

なおJavaScriptの場合は、「無限ループ」とは言っても、for や while を使ってしまうと ブラウザから怒られるため、都度setTimeout()で呼び出しています。また、setInterval()は怖くて使えません。

単純な処理ならば setInterval()は便利なのですが、複雑な処理をさせて 何らかの影響で前回の処理が遅延していると、前回分と今回分の処理が重複してしまう可能性があるためです。
（例：ユーザが、ボタンやキーボードをズーッと押しっぱなしにしている 等）

###３．JavaScriptコードの難読化
PHPで自作した「JavaScript難読化ツール」で、JavaScriptコードを変換しています。
これには下記３つの利点があると考えています。

1. ソースコードをコピペで盗まれない
2. ゲームスコアの改ざんに、ちょっとだけ強くなる
3. 汚いソースコードがばれない

ある程度の技術力があれば、難読化していてもJavaScriptの解析は容易です。そのため、**難読化はセキュリティ対策として信用してはいけません**。そのため、最も意味があるのは「3. 汚いソースコードがばれない」です。

難読化する前の、自分の汚いコードがネットに晒されるのは、恥ずかしくて… 笑

※ なお、JavaScriptの難読化は 下記がとても参考になりました。
https://qiita.com/kacchan6/items/d8576ab6b3c16cf670ca

##その他 ＆ 宣伝
ライブラリを使用せず、フルスクラッチでブラウザゲームを作るのは、かなり勉強になります。
本業のWeb制作においてプラスになることは 間違いないと思います。おすすめです。

また、ブラウザゲームの公開には、**スマホアプリと違って AppleやGoogleの審査が必要ありません**。
何より、**公開後にバグをみつけても こっそり修正できる** のが嬉しいです 笑

---

以下に、フルスクラッチで開発したブラウザゲームをご紹介します。
もしご興味があれば、プレイしてみてください。

■ テトリス風の落ちゲー（85ステージ）
https://hotnews8.net/game/falling-block/

■ レトロな2Dシューティング（77ステージ）
https://hotnews8.net/game/shooting/spacewar/

■ 爆弾アクション（50ステージ）
https://hotnews8.net/game/act/bomberDX/