掲示板お問い合わせランダムジャンプ

トップスペース

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

脱出ゲームテスト1サムネ
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

【余談】
 「いつか作ろう(書こう)」と言いつつ結局作らないことあるよね。
[ 投稿者:うえぽん at 16:39 | ゲーム | コメント(5) ]

この記事へのコメント
ゲームプレイ感
>ドラッグさせるのか? 一応それっぽい理由があったりします。
この一文を読んでなければ、個人的感想が
面白さ半減になるところでした。
簡単なテストとありましたが
なかなかどうして、面白かったです。
投稿者: ロム at 2010-11-21 17:11:44
感想ありがとうございます
感想ありがとうございます

次はテストじゃないものを作ろうと思っています、が、まだ思ってるだけです。
絵を描くのが一番大変ですね。
絵心がないばかりに…。
投稿者: うえぽん at 2010-11-21 21:20:26
大脱出
痛いのとか怖いのは苦手なので脱出系はあまりプレイしないのですが、
面白かったです。フラッシュでけっこう出来るものなんですね。

>ドラッグ

 そのうち総当たりドラッグ&ドロップツールが・・・。
投稿者: murasaki at 2010-11-22 23:56:02
上間違い
フラッシュじゃなくてジャバスクリプトでした。

そういえば昔HTMLでスイッチを移植しようとしたのを思い出した。
投稿者: murasaki at 2010-11-22 23:57:39
スイッチ
そういえば自分もスイッチみたいなものを作ろうと考えたことがありますね。
結局ネタが思いつかないとか絵が描けないとかで諦めちゃうのですが。
投稿者: うえぽん at 2010-11-23 06:44:46

この記事の固定URL
http://shinshu.fm/MHz/14.30/archives/0000343622.html

記事へのコメント
 
簡単演算認証: 3 x 8 + 5 =
計算の答えを半角英数字で入力して下さい。
名前: [必須]
URL/Email:
タイトル:
コメント:
※記事・コメントなどの削除要請はこちら