うえぽんSW局

古いタイプの日記ブログです。気まぐれに更新してます。

2010年11月

 脱出ゲームは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
このエントリーをはてなブックマークに追加

 「追悼でマンデルブロ集合を作成」の続き。
 前回は double の精度の限界に直面してしまったので多倍長計算ライブラリのGMPを使ってマンデルブロ集合を作ってみました。出力部分だけAviUtlを使っていたりします。

 しかし…動画にしてみようと思ったものの、処理に時間が掛かりすぎるために断念。(1920x1440を一枚出力するのに1時間も掛かる)
 静止画で我慢することにしました。

 で、バックベアードのようなものを発見。

マンデル191_ループ少な


 が、漸化式の最大ループ回数を 2048 から一気に 16384 回まで増やすと、黒かった部分に何かあったりしました。

マンデル191


 周りに鎖みたいなのが 8 本ありますが、円の中では 16 本に増えていることに注目。

 中心にズームすると、

マンデル197


 外側に 16 本の鎖、内側に 32 本とさらに倍になってます。

 さらにズーム。

マンデル200


 32本の鎖が円の中で64本へ増えています。
 そして中心に見覚えのあるものが。

 ズームしてみると、いつものあれがザビエルな感じで出現してハッピーエンド。

マンデル202


[追記]
 あとでこのブログ記事を読み返してみましたが、「ザビエルな感じ」とは自分で書いておいてよく分かりません…。後光的なものを見てそう思ったのでしょうか…。
このエントリーをはてなブックマークに追加

 3年前に作った「選択範囲を要約する人工無能ブックマークレット(680バイト)」の(680バイト)という部分がずっと気になっていたので 479 バイトまで短くしてみました。


 選択範囲を要約した振りをするブックマークレット(479バイト)
 ↑右クリックなどでブックマークすればブックマークレット化できます。

 下が中身。479 byteです。
javascript:(function(D,t,U,S,N,s,p,q){s=((t?t():document.selection.createRange().text)+U).replace(/(\u3002+|[!-~\uFF01-\uFFE5\u300A-\u3015]\s)\s*/g,'$1'+U).replace(/\s/g,'').split(U);function F(x,y){return y?D[x]?D[x].push(y):D[x]=[y]:D[x][Math.random()*D[x].length|0]};for(p in s)if(t=s[p]){for(F(U,t[S](q=0,N));q<t.length-N;)F(t[S](q,N),t[S](N+q++,1));F(t[S](q),U)}do{t=p=F(U);for(s=300;q=F(p),q!=U&&s--;p=p[S](1)+q)t+=q}while(confirm(t))})({},top.getSelection,'\b','substr',3)

 ニュースサイトやブログの記事をマウスで選択し、このブックマークレットを実行すれば要約した振りをします。
 マルコフ連鎖を使ったいわゆる人工無能というやつです。詳しくは以前のページ(のリンク先)を見てください。
 コードの最後にある数字の 3 はマルコフ連鎖の接頭文字数を意味しています。4 とか 5 にすればもう少し賢くなります。

 動作確認したブラウザはWindowsXP上の Firefox 3.6.12、Opera 10.63、IE8 のみです。たぶん他のブラウザ上でも動きます。フレームを使ったページでは動作しません。

 以前のと比べて気になった人もいるかもしれませんが、全角文字を \u**** という形式にしました。例えば '。' は '\u3002' となってます。
 逆に長くなっていますが、なぜそうしたかと言うと、全角文字を2バイトとカウントするのがなんとなくインチキぽく感じたからというのと、ブックマークレット保存時にURLエンコードされてもサイズがあまり膨らまないからです。

 以下はJavaScriptのコードを短くするのに参考にさせていただいたページです。
 ・JS のコードを短かくする Tips - 冬通りに消え行く制服ガールは、夢物語にリアルを求めない。 - subtech
 ・空から降ってくる女の子(ゲームっぽく) - 0xFF
 ・ブックマークレットを短くする方法 - Born Neet
 ・Math.floor を使わずに小数を整数にする - IT戦記

 マルコフ連鎖ネタとしてはこんなものも作られています。
 ・「あたし状態遷移図」、あるいは「あたし約5.2MB」 - 理系男子の書斎には、どうしても小説が少ない。っていうか無い。 - ファック文芸部
このエントリーをはてなブックマークに追加

 最近のアニメは実在の風景やアイテムを劇中にさりげなく登場させるのが流行っているようですが、セガハードが出ているのをコツコツ集めてみました。

 白いけどメガドライブ。
SEGA_001


 右のバブルラジカセが気になるけど、左のテレビの前にセガサターン。
SEGA_002


 お弁当箱といったらスーパーだけど、セガサターン。
SEGA_003


 ドリームキャスト。
SEGA_004


 たしか『ハレのちグゥ』。ゲームギア。
SEGA_005


 セガがスポンサーだった。
SEGA_006


 セガがスポンサーの有名なアニメ。オパオパがマスコットキャラとして登場。他にもセガマーク3をプレイする場面があるが、画像はなし
SEGA_007


 実写映画。
SEGA_101


 他にも
 ・アニメ『ハイスクール奇面組』でセガマーク3用の同タイトルのソフトを一堂レイが紹介する場面あり
 ・NHKドラマ『クラインの壷』でセガサターンのクロックワークナイトをプレイする場面あり(アーケードのバーチャロンをプレイする場面もあり)
 ・特撮『シャンゼリオン』で探偵事務所のテレビの上にセガサターン

【ちなみに】
 このポーズはソニックだと思う。
 イカ娘ポーズ1
 イカ娘ポーズ2


【追加 2021/03/03】
 ブログ移行のついでに他のブログ記事に書いたものもまとめておきます。

 イカ娘の2期。
SEGA_201


 ニャル子さん2期。
SEGA_202


 ベン・トー。作者がセガ好きなのは有名。アニメではセガ公認でセガ関連のグッズが数多く登場。
SEGA_203


 日常。地上波のデジタル移行によりゲームギアのテレビチューナーでテレビを見られなくなりました。
SEGA_203
このエントリーをはてなブックマークに追加

↑このページのトップヘ