#ボンバーDX（ボンバー デラックス）
自作の無料ゲームを宣伝します。
今回のゲームジャンルも「爆弾アクション」。
前回公開した「ボンバー60」の進化版です。
【ボンバー60については、こちら】
https://qiita.com/hotnews/items/6eeb8fd367ce4137f1c8
##ボンバーDX（ゲーム紹介）
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コードを変換しています。
これには下記３つの利点があると考えています。
- ソースコードをコピペで盗まれない
- ゲームスコアの改ざんに、ちょっとだけ強くなる
- 汚いソースコードがばれない
ある程度の技術力があれば、難読化していても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/