JavaScriptでレトロなシューティングゲームを作ってみた

つい先日、ぼくの敬愛するパソコンの師匠から、携帯ゲーム機型のAndroid端末を買ったというメールがありました。

Unisoc T618搭載とのことなのでAntutuで20万点くらい、原神などの重量級ゲームは厳しそうですが、レトロ系のゲームなら十分動きそうなスペック。なにより、コントローラー一体型というのがソソりますよね。

そしてタイミングの良いことに、ちょーどそういうレトロなゲーム作りをしている最中だったので、作りかけですがガワだけハロウィン風にしてアップしちゃおうと思います。ごめんなさい、師匠、コントローラーにはまだ未対応なんです。ゲームパッドAPIなるものがあるそうなので、そのうちコントローラーにも対応したいです。

インラインフレームで埋め込んでいるので、うまく動かない場合は[新しいタブで開く]と動く、かも？

開発のきっかけ

たまたまYouTubeでJavaScriptで作るシューティングゲームの動画を見かけたのがきっかけです。

昔からゲーム開発には憧れがあったのですが、業務プログラマーである自分にはあまりにも畑違いなので手が出せない分野だと思っていました。

ところがどっこい。ふたを開けてみればこんなに簡単なのか！と驚き。それはもちろんこの動画の解説がわかりやすいというのもあるのですが、同時並行処理を難しく考えすぎていたところが大きいです。

講座の第2回目で「Win3.1のなんちゃってマルチタスクと同じことやってたのかよ！」と驚きと共に叫んでしまいました。

インターネット老人会の方はわかるかと思いますが、16bitのWindowsの頃って、マルチタスクとか言いつつ実はメッセージングシステムで順番にリレーしてるだけの仕組みだったでしょう？

あれと同じで、ゲーム内における背景／プレイヤー／敵キャラ／それぞれの弾／ライフバーなどなど、すべてを「ゲームオブジェクト」として考え、60分の1秒ごとに全オブジェクトに位置情報の更新と描画をさせるだけなの。

なんだよー、そんだけで良かったのかよー、と目からぼろぼろ鱗が落ちたぼくは上記のようなシューティングゲームをサクっと作ることができました。

一人で考えていては一生たどり着けなかったきっかけを与えてくれた動画制作者様に心から感謝します。

使用素材

フリー素材、音声を公開されている方々、団体に感謝します。

使用ソフト

弾・・・という名のキャンディーだけはうまいことAI生成できなかったので自分で描きました。

まとめ

本来ならJavaScriptでのゲーム開発のノウハウなんかをブログ記事にするところですが、先述の動画がとても丁寧でこれで以上は必要ないと感じたので、ここでは解説しません。

工夫したのはレスポンシブデザインのブログに掲載するために、ウィンドウサイズを検出してcanvasの実サイズとの差異でUIの大きさを変える等の処理を追加したことと、スマホ対応のためにタッチコントローラー機能を追加したことくらいでしょうか。

このあたりのノウハウについて需要がありそうだったら別途記事にします。