JavaScriptだけでゲームれるか

できないことはないけどやめておいた方がいいです。素直にFlashでも使いましょう。

ということではネタにならないので、ゲームに必要と思われる各要素で実現可能性について話をしていきたいと思います。約2年前に実際にゲームらしきものを制作してみた時の経験を踏まえているので少しは参考になるはず。

M2J 中野泰人

http://zarame.com/zide/

直接的には無理です。

とこれだけでは淋しいので少し詳しく説明すると、JavaScriptはブラウザ上で動きます。JavaScriptの出力はDOMツリー(HTMLの中身を取り込んでプログラムで扱える形にしたもの)をいじることで行います。例えばテキストを出力するんだったらp要素を追加したり。なのでHTMLで直接できないものはJavaScriptでも直接はできません。HTMLで直接音を扱える機構は今のところないので、JavaScriptで直接音を鳴らすのは無理なのです。

じゃあたまにある開くと音が鳴るWebページはどうなってるかというと、大抵プラグインを使っています。なのでJavaScriptからプラグインをいじれば間接的には音を鳴らすことができます。一番簡単だと思われるのがFlashをいじる方法で、すでにいくつかのツールがあります。一例として soundapi.js を挙げておきます。

でもFlash使うんだったら全部Flashで作った方がいいような気もします。

画像

ちょっと面倒ですが可能です。

これも音と同じように、HTMLで直接できないことはJavaScriptでもできないわけです。ですのであらかじめ用意されている画像をそのまま使用することは至って簡単なのですが、画像をその場で生成したり加工する場合はそうはいきません。

ただいくつかの方法はあるので順に見ていきます。

サーバ側に画像生成スクリプトを置く

クライアントが無理ならサーバでやってしまえという考えです。サーバ側ならGDを始めやりようはいくらでもあるのでどんな画像だろうが自由自在です。

ただあまり大きい画像を作りまくってるとサーバ側の負荷もバカにならないのと、その度に転送しないといけないのでクライアントが要求してから実際に使用できるようになるまで時間がかかり、その時間も一定でないのが難点です。

テーブルアートしてしまう

tableレイアウト全盛だった時代にtableのセルの色を塗り分けて画像っぽくしてるの見たことないですか?あれならHTMLだけで画像に見えるものが生成できるぞ! ということで実際にそういうライブラリがあったりします。

なんかバカっぽく聞こえますがブラウザ互換性はかなり高くてしかも意外と軽いので、ちょっと線を引く程度ならけっこう使い道はあるんじゃないかと思います。

canvasを使う

真打ち登場。実はメジャーなブラウザの最新版にはcanvasというHTML要素が実装されていまして、そいつの中にJavaScriptでいろいろ描画ができます。具体的にはFirefox, Opera, Safariの最新バージョンでサポートされています。

IEでのみ使用できませんがIEの独自機能を使ってcanvasの動作をエミュレートするライブラリが既にGoogleのExplorerCanvasを始めいくつかありますので、事実上ほとんどの最新ブラウザで動くようになっています。

Mozillaのサンプルページではすでにゲームっぽいものも用意されているので、上手くやればけっこう凝ったものも作れそうです。

SVGを使う

Flashとそれなりに似た機能を提供するAbode主導だった技術、SVG。Flashと違ってXMLベースなのでWebページ内に直接埋め込むことが可能で、JavaScriptからも直接操作できます。また規格もデカいので頑張ればかなり立派な画像もいじれます。

ただブラウザのサポートが貧弱なのが弱点で、FirefoxとOperaで表示はできますが制限が多く、他のブラウザではAdobeの古〜いプラグインを入れないと表示できません。

canvasのサポートが広がった現在、特にゲーム用途だとSVGを使うメリットはあまりないと思います。

タイマー

アテになりません。

作るジャンルによっては意外と重要なのがタイマー。幸いJavaScriptにはミリ秒単位で指定可能なタイマーオブジェクトがあるので楽々だー と思いきや、これが思い通りに動きません。ブラウザの実装がタコなんです。特にIE。

以前検証スクリプトを色々なブラウザで走らせてみたのですが、IE6では1/60秒ぐらいの精度しかなかったり、ブラウザによっては設定より1ミリ秒ほど遅れて呼び出しが起こったりで動作にばらつきがあります。

なのであまりタイマーにシビアなゲームを作ってしまうと別のブラウザで動作させた場合最悪ゲームバランスが破綻する可能性があるので、そこらへんは作る前に少し考えておいた方がいいと思います。

ランキング

上手くやると盛り上がるかもしれません。

JavaScriptということはインターネット接続している人限定。ならばネットランキングも作ってしまえというのは自然な流れ。ただネットランキングに付きものなのは不正操作。これは作者さんがそれぞれ頭を使っていろいろな防止策をとっていると思いますが、JavaScriptだとこれがものすごく制限されます。

というのもJavaScriptはクライアント側にインタプリタを持ってるので通信経路でソース丸見えで、ランキングの通信そのものを難読化したところでそのアルゴリズムも丸見えになってしまいます。

なので不正自体を排除する方法としてはリプレイデータも同時に送りつけてサーバ側でトレースして正しくプレイされたデータのみ受理するぐらいしかないと思います。ある意味CAPTCHA。

ただネットランキングが意味を持つということはそれなりにアクティブユーザ数もあるということなので、ランキングをユーザの皆さんに監視してもらって不正なものに素早く対処するという方法の方がこの場合現実的かもしれません。活発なWikiは荒らされにくいのと同じ理屈。

これをさらにもう一段進めて、不正ランキングを正規ランキングと別に用意して人間ではとても真似のできないエキセントリックなリプレイも楽しめるようにしてしまうのも手。ゲームの種類によっては別の需要が生まれるかも。

まとめ

適材適所ですよね。

特に最近はAjaxだWeb2.0やらでJavaScriptがやたら持ち上げられていましたが、そりゃいい面も多いんですが不得意な面もあるわけです。そろそろAjaxだけで喜ばれる時代から実装に因らず真に使いやすいものが求められる時代になってきてるのかなと思います。

その見極めを行うためにも、今回挙げたような力業を一度やってみるのもいい経験かもしれませんよ。多分。