Canvasを使って開発されるゲームは数多くありますが、HTMLエレメント主体でのゲームってそんなに存在しないようです。
今回は、Javascriptだけを使って、ローカル環境でも動くクォータービューのゲームを作ってみました。
ゲームと言っても、実際にRPGのストーリーが楽しめるのではなく、そうしたゲームの基盤になりえるライブラリを作ってみたという事です。
でもさらに言ってしまうと、一昔まえに作ったライブラリなので、作り直さないとイケないのですが、今回はこういうのもアリ？という観点でご紹介します。
リンクと動かし方
ココを押すと、別ウィンドウが立ち上がります。
デモ :
https://mynt-blog-tools.netlify.app/field/game.html
こんな画面が立ち上がります。
PCのブラウザで表示した場合は、カーソルキーを押すと、中心のキャラクターが動かせます。
このプログラムの特徴
今回は、プログラム掲載はしていないのですが、Javascriptだけで作っているので、ブラウザのソースを読むと全てのソースコードは取得できます。
興味のある人は、自分のローカル環境にDLすると、ネットにつながっていなくても動きます。
このプログラムの特徴は、HTMLタグで構成されているという点と、JSのみで動作しているという点なのですが、
キャラクターがmapを移動する時に、木や建物の前後判定が出来ている事に気がつくと思います。
あと、マス目ビューのコリジョン判定も行っており、障害物をキャラクターが突き抜けないようにもなっています。
このプログラムのこの先
このプログラムを発展させると、簡単なRPGぐらいは作れると思うんですが・・・
足りていない要素としては、音楽と、効果音ですかね。
あとは、戦闘シーンなどは、これとは全く別のエンジンにしなければいけないでしょう。
もちろん、シナリオなども重要で、会話や、進行に関する説明文、イベントなどなどを組み込む必要がありますが、そこは非常に開発としては楽しめるポイントでしょう。
なにより、アプリではなく、WEBブラウザで手軽に遊ぶことができる点を考えると、こうしたゲームを作り込んでいくのも
PWA推奨の僕としては、非常に意義のある事なのです。
とりあえず、今回はモックアップだけなのですが、近い将来、このエンジン（バージョンアップをした）でゲームをお披露目する日も近いかもしれませんね。
要望、命令、お待ちしています。
