ASURA WORKS. 作品一覧へ

ウェブアプリ / オンラインクレーンゲーム

EZクレーン

つかむ手ごたえを、
あとから巻き戻して見る。

ブラウザの中に筐体を立てた、オンラインのクレーンゲームです。ヘッダーの筐体アイコンから台を選び、アームの位置を決めて景品をつかみます。サーバーが返す481フレームを使ったリプレイで、自分のプレイを時間軸のつまみで巻き戻して見られるところまでを、ひとつの作品にまとめました。

作品を開く

自主制作の作品です。クレジットの購入と景品の配送は模擬で、実際の課金や発送は行いません。

まず無料で、
操作を覚えてもらう。

会員登録より先に触れることを入口に置きました。トップの台一覧には登録もクレジットも要らない練習台を並べ、自由移動と2段階操作という方式の違いをそこで確かめられます。

練習台の景品は獲得と配送の対象外にして、会員向けの台と役割を分けました。登録するとクレジットが入り、同じ操作のまま景品をねらえます。

3Dの筐体を大きく、
操作盤はその横に。

ラムネ色の地にグレープとチェリーを差し色にして、彩度はぬいぐるみの写真とプレイ画面の3Dに預けました。プレイ中は筐体を画面の左側に大きく描き、右側に残り時間と方向ボタン、正面・側面の視点切り替えだけを置いています。

台一覧はカプセルの形のカードを棚に並べ、練習台と会員向けの台、獲得済みの景品を一目で見分けられるようにしました。

プレイを、
あとから巻き戻して見る。

方向ボタンか矢印キーでアームを動かし、つかむを押すと降下します。制限は30秒で、サーバーは判定に使ったフレームをそのまま返すため、プレイ後は時間軸のつまみで0.5倍・2倍に速さを変えながらアームと景品の軌跡を追えます。リプレイはURLで共有できます。

獲得した景品は配送を依頼でき、マイページの配送履歴では受付・準備中・発送済みの3段階を時系列の帯で示します。クレジットの購入と配送はどちらも模擬で、実際の課金や発送は行いません。

縦に積んで、
下半分で操作する。

スマートフォンではヘッダーの筐体アイコンを横スクロールに変え、練習台のカードを縦へ並べます。プレイ中は筐体を上、方向ボタンとつかむを下に置き、指の届く範囲で操作が終わります。

制作情報

種別
自主制作
制作範囲
企画・設計・デザイン・実装
使用技術
JavaScript / React / Vite
three.js / Rapier / Node.js / SQLite
対応画面
PC・タブレット・スマートフォン