フロントエンド開発Blog

オレには鈍器がある

3D , HTML5 , JavaScript , WebGL , canvas , enchant.js , three.js , ブラウザゲーム

enchant.js、three.jsを組み合わせてブラウザゲーム作りました。Google Chrome(PC)でのプレイを推奨します。

ゲーム概要

【ゲームジャンル】
3Dダンジョン探索RPG

【ゲームタイトル】
INFINITELY SCOUT

【ゲームの内容】
無料ブラウザゲーム「INFINITELY SCOUT」。3Dダンジョンを探索し、襲いかかる敵をスワイプ(ドラッグアンドドロップ)で切り刻む、撃ちまくる。成長に限りがなく、どこまでも強くなれる無限成長システム搭載。

【簡単な操作方法】
3D移動:
Wキー 前進
Aキー 左90度回転
Sキー 後退
Dキー 右90度回転
Qキー 左水平移動
Eキー 右水平移動

戦闘:
ドラッグアンドドロップ(スワイプ)しまくりで敵をボロ雑巾に

メニューなど:
マウスクリック(タップ)によるボタン操作


ゲームの特徴

  • インストール不要 HTML5 canvas / WebGLで制作されたブラウザでゲームがプレイできる、そして(無料)
  • 3Dダンジョンを探索し、襲いかかる敵をスワイプ(ドラッグアンドドロップ)で切り刻む、撃ちまくる
  • 自分より強い敵を倒すと装備品のランクが上がるランク成長システム
  • 一定の条件を満たすと装備品のグレードがあがり、ステータス・成長率が向上するグレードアップシステム
  • 成長に限りがなく、どこまでも強くなれる無限成長システム

技術的な話・・・

今回はブラウザ上で3Dレンダリングを実行させてます。というわけでWebGLが有効なブラウザでしか動作しません。2014年現在ではモバイルブラウザはios含めほぼWebGLが使えないようですが、ios8はWebGLに対応するといっていますし、今後さらにWebGL対応端末が増えることを想定して今から作っておいて損はないと思って製作しました。

ゲームロジック部分はenchant.jsを利用しており、3D部分はダンジョンのみ。WebGL未対応の場合でもダンジョン以外は問題なく動作しました。(手持ちのipad, iphone調べ)

今回は大量のフラグやパラメータを効率よく管理運用する必要があって苦戦しました。前作の「オレには鈍器がある」はモバイルゲームとしての位置づけが強くて視覚的なヴィジュアルも、サウンド的な効果もばっさりとあきらめざるをえなかったのですが(ブラウザ側の仕様が統一されていなかったため、より多くの人にプレイ機会を与えることと、エフェクトやサウンドを取り入れることはトレードオフでした)、今回は「Google Chromeと、そう遠くない未来の端末・ブラウザ」への対応に絞ったため効果をフルで入れることができました。

また、セーブは前回はAJAXでしたがlocalstorageにしました。気軽に大きめのデータ保存が容易に行えて驚きました。localstorageだけだとデータが揮発してしまうことも考えて、プレイヤーのデータを文字列として出力する方式も導入しました。

いろいろと新しいことに取り組んでみた二作目となりました。是非遊んでみてください!また、ご質問や相互リンクなどのお問い合わせはfacebookのページにて受け付けております。

ページトップへ

関連ページ

ページトップへ