💣

VueBERMAN2をリリースしました

2022/12/12に公開

(※過去のブログ記事をZennにアップしています。)

Vue.jsとPixi.jsとWebSocketを使ってオンラインボンバーマンを作ってみました。

以前の記事(Vue.jsでボンバーマンを作ってみました)で作ったVueBERMANを改修して、「VueBERMAN2」を作ってみました。

https://zenn.dev/knockknock/articles/dd634ea162c65d

Let's Play VueBERMAN2

http://vueberman2.knockknock.jp/

Pixi.jsで表現力と描画付加が軽減されました

フレームワークとしてVue.jsをメインでつかっていますが、ゲーム画面はPixi.jsを使っています。 Pixi.jsは2D描画ライブラリですが、WebGLレンダリングを行ってくれるので、とてもパフォーマンスがいいです。

WebSocketを使って複数人プレイが可能になりました

ここが1番の改良ポイントです。 WebSocket使って、ソケット接続するサーバをNode.jsで構築しました。 これによりサイトに接続した全員で一つのゲームをプレイすることができます。 ちなみにこのサーバは、AWSのEC2で動いています。

スマートフォン、タブレットでも操作可能になりました

いわゆるブラウザゲームなので、ブラウザの特徴を活かして、レスポンシブを採用しています。 タッチデバイスの判定で、画面上にコントローラーが現れて操作が可能になります。 デバッグはしていないので、iPhone以外で動かなかったらすいません。

まとめ

最近AWSを触ってますが、以前SAKURA VPSでNode.jsでサーバを立てた時よりも、やりやすかった感じがしました。 いまいち料金体型を理解していないのでヒヤヒヤしてますが。 このご時世、普段できないことをやろうと、ゴールデンウィークをすべて費やして、作りましたので、 若干、燃え尽き症候群です。 テレワークのお供に、Slackで電話をつなげながら同僚や上司や部下とPlayしてください。 きっと楽しいはずです。

Discussion