CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.20
CRAZY度 ★★★★ ─ 遊ビ過ギ注意

ミニゲーム化UI

送信ボタンがスロットになり、メニューの項目がモグラになり、記事の見出しがブロック崩しのブロックになります。どれも10〜30秒で遊べて、遊び終わると送信・選択・いいねといった本来の役目をきちんと果たします。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001スロット送信ボタンCRAZY度 ★★★★★
送信するとリールが回り、STOPを押すと数コマ滑ってから止まります。2本揃うとリーチになり、最後のリールが這うように回って、揃うか1コマずれて止まります。結果に関係なく送信は完了します。
Canvas 2D円筒の投影エルミート補間Web Audio

これは何？

フォームを送信すると、3本のリールが回るスロットになります。リールは円筒に貼った絵柄として描いていて、上下ほど縮んで暗く見えます。STOPを押すと今の速さのまま0〜1コマ滑って止まり、最後に少しだけ行き過ぎて戻ります。2本揃うとリーチになり、最後のリールが這うように回って、揃うか、1コマ手前か1コマ先で止まります。外れたときは、惜しかった絵柄に「あと1コマ」の印が出ます。どの結果でも送信は完了します。

使い方

  1. 「全部コピー」して貼り付けます。
  2. レバーを下へ引くか、送信ボタンを押すと回ります。入力欄が空のときは、ふつうのフォームと同じく送信されません。
  3. キーボードでは、数字の 1 2 3 でもリールを止められます。4秒ほど放っておくと自動で止まります。
  4. 本当の送信処理は、form の ug-reels-sent イベントで受け取って書きます。e.detail.result に win（揃った）・near（惜しい）・lose が、e.detail.message に入力した文が入ります。

カスタマイズ

  • 絵柄の並びは STRIPS、絵柄そのものは drawSym() でキャンバスに描いています。
  • 回転の最高速は VMAX（1秒に17コマ）です。
  • 2本目が1本目にそろいやすくなる率は ASSIST（.45）、リーチが当たる率は HIT（.5）です。

注意

当たりの率は画面に出していません。景品やお金が絡む用途には使わないでください。送信を数秒待たせる演出なので、何度も送るフォームより、問い合わせや感想など1回きりの送信に向いています。大当たりのコインは画面全体を覆う透明なキャンバスに描きます（クリックは下へ素通りします）。

S-002カプセルのおすすめCRAZY度 ★★★★★
ハンドルを回すと、ガラスの中のカプセルがかき回されて1つ転がり出ます。開けると3回揺れて割れ、レア度ごとの色の光と一緒に、おすすめが1つ出ます。
Canvas 2D円の衝突Pointer EventsWeb Audio

これは何？

おすすめの記事やヒントを1つ選んで見せる「引くボタン」です。ガラスの中の14個のカプセルは重力でぶつかり合い、ハンドルを回すと底のほうが渦を巻いてかき回されます。出てきたカプセルは跳ねて手前に転がり、開けると揺れるたびに継ぎ目から光が漏れて、割れるとレア度（4段階）に応じた色の光が広がります。最上位は虹色です。

使い方

  1. 「全部コピー」して貼り付けます。
  2. ハンドルはドラッグで回すか（時計回りに1周）、クリックかEnterで1回転します。
  3. 中身は PRIZES に書きます。r がレア度（0〜3）、t が見出し、d が説明、href が「くわしく見る」のリンク先です。

カスタマイズ

  • レア度の名前と光の色は RANK、出やすさは WEIGHT（合計100）です。
  • カプセルの数は COUNT、色は COLORS です。

注意

お金や有料のアイテム、景品の抽選には使わないでください。この見本は、出やすさを画面に出さない前提で、無料で何度でも引ける読み物向けに作っています。出やすさを変えた場合も、実際より当たりやすく見せる表示は足さないでください。

S-003モグラ叩きメニューCRAZY度 ★★★★
「叩いて選ぶ」を押すと、メニューの項目が穴に沈み、名札を付けたモグラになって顔を出します。20秒でいちばん多く叩いた項目が選ばれます。
Web Animationsborder-radius で切り抜きPointer EventsWeb Audio

これは何？

ふだんは普通のナビゲーションメニューで、「叩いて選ぶ」を押した20秒間だけモグラ叩きになります。項目の文字が穴に沈み、その名札を付けたモグラが顔を出します。後半ほど出てくるのが速く、同時に出る数も増えます。金色のモグラは3点です。終わると、いちばん多く叩いた項目に印が付きます。

使い方

  1. 「全部コピー」して貼り付け、<ul> の中のリンクを差し替えます。穴とモグラはリンクの文言から自動で作られます。
  2. キーボードでは、数字の 1〜5 で左から順に穴を叩けます。リンクにフォーカスしてEnterでも叩けます。
  3. 遊び終わったあと、選ばれたページへ実際に移動させたいときは、<nav> に data-ug-go を付けます。

カスタマイズ

  • 遊ぶ時間は DURATION（20000ミリ秒）です。
  • 次のモグラが出るまでの間は spawnGap()、顔を出している長さは upTime() で、始めと終わりの値を決めています。
  • 金色のモグラが出る率は .12 です。

注意

自己ベストはブラウザ（localStorage）に保存します。保存できない環境でも遊べます。マウスではハンマーがカーソルの代わりになります。項目が多いと穴が2段になります。

S-004コンボいいねボタンCRAZY度 ★★★★★
いいねを連打するとコンボが積み上がり、飛び出したハートが画面の下に溜まっていきます。手を止めると1回分のいいねが送られ、床が抜けてハートが落ちていきます。
Canvas 2DPath2D円の衝突Web Audio

これは何？

押すたびにハートが飛び出し、画面の下に積もっていくいいねボタンです。周りの輪が減りきる前に次を押すとコンボが続き、続くほど飛び出す数が増えて、音程とボタンの色も変わります。10・25・50・100コンボで大きな文字が出て、50からは画面の縁が光り、上からもハートが降ります。手を止めると、いいねが1回送られて、溜まったハートは床が抜けて落ちていきます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 最初の数は .ug-likes-n の文字に書きます。何回連打しても、送られるいいねは1回分です。

カスタマイズ

  • 次を押すまでの猶予は windowMs()（820ミリ秒から、続くほど短く）です。
  • 大きな文字が出るコンボ数と文言は MILESTONES、溜めるハートの上限は CAP（420個）です。

注意

ハートは画面全体を覆う透明なキャンバスに描きます（クリックは下へ素通りします）。手を止めると自動で片づきます。キーボードのEnterを押しっぱなしにした連射は数えません。自己ベストはブラウザ（localStorage）に保存します。

S-005早押し同意チェックCRAZY度 ★★★
「同意する」にチェックを入れようとすると画面が暗くなり、合図が出た瞬間に押せたときだけ、一閃とともに朱色の筆でチェックが入ります。反応の速さをミリ秒で表示します。
Pointer Eventsevent.timeStampCanvas 2DWeb Audio

これは何？

チェックボックスを反応速度テストにしたものです。チェックを入れようとすると「構えて…」と画面が暗くなり、1.4〜3.6秒後に「！」の合図が出ます。合図の瞬間に押すと、画面を斬る一閃と墨のしぶきのあと、朱色の筆でチェックが入り、反応の速さがミリ秒で出ます。合図より先に押すと「お手つき」です。チェックを外すのは、ふつうに押すだけでできます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 合図のあとは、枠の中ならどこを押しても構いません。キーボードではスペースかEnterです。
  3. チェックが入ると、ふつうのチェックボックスと同じく change イベントが起きます。「次へ進む」の有効・無効もそこで切り替えています。

カスタマイズ

  • 合図までの待ち時間は WAIT（1400〜3600ミリ秒）、間に合う時間は LIMIT（1500ミリ秒）です。
  • 速さごとの評価の文言は RANKS です。

注意

見本としての冗談です。実際の規約への同意に使うと、同意したい人が同意できなくなります。100ミリ秒より速い反応は、合図を見る前に押したものとして「お手つき」にしています。自己ベストはブラウザ（localStorage）に保存します。

S-006記事ブロック崩しCRAZY度 ★★★★★
記事の見出しと本文が、単語ごとのブロックになります。太字の言葉を崩すとボールが3つに分かれます。全部崩すか、ボールがなくなると、崩れた言葉が元の場所へ飛んで戻ります。
Intl.SegmenterCanvas 2DWeb AnimationsPointer Events

これは何？

ページの文章そのものをブロックにするブロック崩しです。Intl.Segmenter で日本語を単語に分け、助詞や句読点は前の語にくっつけて、1語を1つのブロックにします。見出しの語は2回当てないと崩れません。崩れた語は放物線を描いて落ち、太字の語を崩すとボールが3つに分かれます。終わると、落ちた語が元の場所へ飛んで戻り、記事は読める状態に戻ります。

使い方

  1. 「全部コピー」して貼り付け、見出しと本文を差し替えます。ブロックにしたい要素に data-ug-brick を付けます。
  2. パドルはマウスか指を左右に動かして操作し、クリックかタップで発射します。キーボードでは左右キーで動かし、スペースで発射、Escでやめられます。

カスタマイズ

  • ボールの数は LIVES（3）、速さは SPEED（最初360、最大640ピクセル/秒）です。
  • 行ごとのブロックの色は ROWS です。見出しは黒、太字は黄緑です。

注意

遊んでいる間は、枠の上での指のスクロールを止めています（パドルを動かすため）。終わると元に戻ります。Intl.Segmenter が使えない古いブラウザでは、3文字ずつのブロックになります。自己ベストはブラウザ（localStorage）に保存します。