ちいつる

没入・リッチ演出

ゲーム風UI

制限時間内に動く的をタップ/クリックしてスコアを稼ぐ。的はランダム移動し、ヒットするとパーティクル演出+スコア加算。タイムアップで結果表示、スタート/もう一度ボタンでリトライ可能。

ENGLISH

Gamified UI

  • JS
  • Canvas
299没入・リッチ演出 の一覧 →

プレビュー

クリック

操作クリック/タップで動きます。

コード(コピーして使えます)

<div class="game-wrap">
  <div class="game-header">
    <span class="score-label">スコア</span>
    <span class="score-val" id="gScore">0</span>
    <span class="timer-label">残り</span>
    <span class="timer-val" id="gTimer">15</span>
  </div>
  <div class="game-field" id="gField">
    <div class="target" id="gTarget" hidden></div>
    <canvas class="fx-canvas" id="gFx"></canvas>
    <div class="overlay" id="gOverlay">
      <p class="overlay-msg" id="gMsg">的を狙え!</p>
      <p class="overlay-sub" id="gSub">15秒以内にできるだけ多くの的をタップ</p>
      <button class="start-btn" id="gStart">スタート</button>
    </div>
  </div>
</div>

タグ

関連パーツ