CRAZY Code ─ 隠しコマンド｜コピペで使える動きのサンプル

S-001ぐるぐるコマンドCRAZY度 ★★★★★

方向キーで ↑→↓← を2周してから C・Z と入力すると、ふつうの会社のサイトがくるりと裏返り、8ビットの隠しステージが現れます。スマホは同じ向きにスワイプしてから C・Z を押します。

KeyboardEventPointer Events3D transformCanvas 2DWeb Audio

これは何？

方向キーで時計回りに2周（↑→↓←↑→↓←）してから、CRAZY の最初と最後の文字 C・Z を打つと発動する仕掛けです。1つ進むごとに下の鍵盤が光り、全部そろうと表のページが一瞬乱れてから裏返り、裏面のドット絵の隠しステージを12秒見せて元に戻ります。

使い方

「全部コピー」して貼り付けます。.ug-cheat-site の中身を自分のページの見た目に差し替えます。
キー入力は、舞台をクリック（タップ）して選んでいるときだけ受け付けます。ページ全体のキー操作は奪いません。入力欄で文字を打っているときも反応しません。
スマホでは、点線の枠の中で上下左右にスワイプし、最後に C・Z のボタンを押します。

カスタマイズ

コマンドは SEQ の配列で変えられます。文字キーは小文字で書きます。
隠しステージを見せる時間は STAY_MS（12000ミリ秒）、裏面の絵は draw() の中です。

注意

点線のスワイプ枠の上だけは、指でページをスクロールできないようにしています（上下のスワイプを読み取るため）。それ以外の場所ではふつうにスクロールできます。

S-002なぞる魔法陣CRAZY度 ★★★★★

円・三角・Z・星をひと筆でなぞると形を見分け、魔法陣・火柱・落雷・流星群がそれぞれ発動します。一致度も出ます。

$1 認識器Canvas 2DPointer EventsWeb Audio

これは何？

なぞった線を、図形認識の定番「$1 Unistroke Recognizer」の簡易版で手本と比べ、いちばん近い形の魔法を出します。線を64点に並べ直し、向き・大きさ・位置をそろえてから比べるので、大きさや傾きが違っても見分けられます。

使い方

「全部コピー」して貼り付け、.ug-glyph の大きさを決めます。
下のボタンを押すと、お手本の形を自動でなぞって発動します。キーボードでも試せます。
形が近くないときは「不発」と出て、煙だけが出ます。

カスタマイズ

発動する一致度は PASS（0.78）です。上げるほど厳しくなります。
形を増やすときは、RAW に点の並び（-1〜1の座標）を足し、cast() に出す魔法を書きます。

注意

線を描くため、この枠の上では指でページをスクロールできません。スマホのページに置くときは、枠を画面の一部にとどめてください。

S-003回しすぎたロゴCRAZY度 ★★★★

ロゴを掴んで回すと惰性で回り続け、毎分150回転を超えたまま回すと、縦に2回転して金色の隠しモードに変身します。

Pointer Events角速度Web Animationsconic-gradientWeb Audio

これは何？

ロゴの中心のまわりで指やマウスを回すと、その角速度でロゴが回ります。離すと惰性で回り、速くなるほど残像と光が増えます。目標の回転数を0.5秒保つと、一瞬止まって光り、金色のロゴと後光に変わります。9秒で元に戻ります。

使い方

「全部コピー」して貼り付けます。ロゴの文字は .ug-twirl-mark、まわりの文字は data-ring で変えます。
キーボードでは、ロゴを選んで左右の矢印キーを連打すると加速します。

カスタマイズ

目標の回転数は GOAL（150rpm）、保つ時間は NEED（0.5秒）、隠しモードの長さは HOLD_MS です。
回り続ける長さは step() の Math.pow(.45, dt) です。1に近づけるほど長く回ります。

注意

ロゴの円の上だけは、指でページをスクロールできないようにしています。音は回している間だけ鳴り、止まると消えます。

S-004ダイヤル式金庫CRAZY度 ★★★★

ダイヤルを指で回すと1目盛りごとにカチッと吸い付きます。メモの番号どおりに回すと、かんぬきが外れて重い扉が開きます。

Pointer EventsSVG3D transformWeb AudioVibration

これは何？

本物の金庫と同じく、右へ回して番号で止め、逆へ回して次の番号で止める、を繰り返して開ける仕掛けです。目盛りの位置で少し止まる見た目とカチッという音で手応えを出し、正しい番号を通るときだけ重い「コトッ」が鳴ります。合うたびにランプが1つ点きます。

使い方

「全部コピー」して貼り付けます。番号は data-combo="R32 L15 R77" で決めます（Rは右回り、Lは左回り）。メモはこの番号から自動で作られます。
最後の番号で0.9秒止めると開きます。扉は5.5秒で閉まり、ダイヤルは0に戻ります。
キーボードでは、ダイヤルを選んで左右の矢印キーで1目盛り、Shiftを押しながらで10目盛り回ります。

カスタマイズ

番号のずれをいくつまで許すかは TOL（2）、手のぶれとして無視する逆向きの動きは REV（1.5目盛り）、止めたとみなす時間は SETTLE_MS です。
番号を行き過ぎても、少し戻して一瞬止めればそこで止めたことになります。戻せる幅は FIX（5目盛り）です。そのぶん、続く番号どうしは6以上離してください。
中身は .ug-vault-inside の中を差し替えます。

注意

ダイヤルの上だけは、指でページをスクロールできないようにしています。振動は Android の一部のブラウザでだけ働きます。見本なので、本当に守りたい情報を中に入れないでください（ページのコードを読めば番号は分かります）。

S-005合言葉を拾う文章CRAZY度 ★★★

文中の文字を「ひ・ら・け・ご・ま」の順に押すと、文字が枠へ飛んで合言葉になり、文章が石の扉のように割れて隠し部屋が出てきます。

Web Animationsclip-pathWeb Audio

これは何？

ふつうの文章の中に合言葉の文字を散らしておき、順に押した人にだけ隠し部屋を開く仕掛けです。正しい文字は弧を描いて上の枠へ飛び、違う文字は赤く震えます。そろうと文章がぎざぎざの線で左右に割れ、裏の部屋が出てきます。

使い方

「全部コピー」して貼り付けます。合言葉は data-word、文章は .ug-pword-text の中身で変えます。合言葉の文字が文中に順番どおり入っているようにしてください。
隠し部屋の中身は .ug-pword-secret に書きます。
キーボードでは、文章を選んで左右の矢印キーで文字を選び、Enterで押します。

カスタマイズ

扉を開けておく時間は CLOSE_MS（7000ミリ秒）です。
割れ目のぎざぎざは openRoom() の R(-9, 9) です。

注意

文章を1文字ずつの span に分けます。リンクや太字を含む文章には使えません。読み上げでは、元の文章とヒントを1つの説明として読みます。

S-006ブラックライト探索PC推奨CRAZY度 ★★★★

電気の消えたページをブラックライトで照らすと、見えないインクの手がかりと鍵が浮かびます。3つ集めると光が部屋じゅうに広がり、ネオンの文字が描かれます。

CSS変数mask-imagemix-blend-modeSVGWeb Audio

これは何？

暗くしたページの上で、カーソルの位置だけを照らす宝探しです。照らした円の中だけに「見えないインク」の層が見え、手がかりの文字と鍵が浮かびます。鍵に光を当てると上のトレーへ飛び、3つそろうとブラックライトが広がってネオン管の文字が1画ずつ点きます。7秒で元に戻ります。

使い方

「全部コピー」して貼り付けます。.ug-uvhunt-page が暗くするページ、.ug-uvhunt-ink が照らすと見える層です。
鍵と手がかりの位置は、それぞれの style="left:…;top:…"（%）で決めます。
スマホではタップした場所へライトが滑っていきます。キーボードでは、舞台を選んで矢印キーで動かせます。

カスタマイズ

ライトの大きさは size() の r0、鍵に反応する距離は HIT（40px）です。
ネオンの文字は .ug-uvhunt-neon の中の text です。

注意

ページは CSS 変数でライトの位置を毎フレーム書き換えて描き直します。中身が重いページに重ねるより、この見本のように専用の場面として置くのがおすすめです。