うえぽんSW局

　脱出ゲームはFLASHで作られることが多いですが、JavaScriptとスタイルシートで脱出ゲームを作ってみました。


JavaScriptで脱出ゲーム テスト1

　作っていて思ったことや工夫したことはいくつかありますが、細かいことはソースのコメントに書いてあるので興味がある人はソースを覗いてみてください。
　とりあえず今思いついたことだけ書いときます。

◆ドラッグ＆ドロップ
　最近ドラッグ＆ドロップさせる脱出ゲームが増えてきたような気がします。そこで今回作った脱出ゲームでも流れに乗ってドラッグできるようにしてみました。
　で、なぜドラッグさせるのか？　一応それっぽい理由があったりします。
　それはクリックツール対策です。
　脱出ゲームはほとんどの動作をクリックで行います。ズーム、視点移動、調べる、アイテムを取るなどどれもクリックで行います。プレイしていて困ったときはとりあえずゲーム画面のあちこちをひたすらクリックするなんて邪道なテクニックがあり、仕舞いにはツールでクリック連打するわけです。それを封じるのがドラッグ＆ドロップというわけです。

　まあ難しくしても脱出ゲームが面白くなるわけではないので、ドラッグできる場所ではカーソルが変わるようにしました。
　面白くしようとするなら新しい仕掛け。そういう理由でもドラッグはありだと思います。

◆ソースを見られてもパスワードが分からないようにする
　脱出ゲームではパスワードを入力して箱や扉を開けたりすることがよくあります。
　さて今回の脱出ゲームはJavaScript製なので簡単にソースを見られます。つまり正解のパスワードをそのまま書いてしまうと簡単にネタバレてしまいます。
　そこでパスワードを暗号化します、が、注意しなくてはいけません。
　元に戻る暗号化では簡単に解析されてしまいます（ブックマークレットで復号化する関数を実行すれば良い）。
　そこで元に戻らない暗号化（正確にはハッシュ化）をします。
　入力されたパスワードを暗号化（ハッシュ化）し、正解のパスワードの暗号（ハッシュ）と同じなら正解とするわけです。
　この辺については「パスワード　暗号化」でネット検索すればもっと詳しいことが分かるはず。

◆ブックマークレットで関数を実行できないようにする
　前項で「ブックマークレットで復号化する関数を実行すれば良い」と書きましたが、これの対策もします。
　具体的には全体を
　(function(){ ………… })()
　で囲んでローカル関数にするだけです。
　ついでにオブジェクト指向にしてプライベート関数にもしました。

◆HTML5で音を鳴らすつもりだったが…
　HTML5のAudioで効果音を鳴らすつもりでしたが、WindowsXPのFirefox 3.6.12では鳴らなかったので断念しました。Ubuntuの方ではちゃんと鳴りました。
　Firefox以外ではGoogle Chroma 7.0.517.44が何度も鳴らしているうちに音が鳴らなくなる現象がありました。

◆IE5.5でも遊べる
　偶然ですが、IE5.5でも遊べるようです。あくまでも遊べるだけで、スタイルシート関連で狙った通りの表示がなされません。
　画像を全部dataスキームにしたかったのですが、IE7以前は未対応なので断念しました。

◆影響を受けたサイト
　こちらのサイトがJavaScriptの脱出ゲームを公開しています。かなり影響を受けました。
　・oz-riddle