2026/09 - 2026/09

あるきスマホ

BunTypeScriptCanvasWeb Audiofal.aiRailway

遊ぶ: https://aruki-sumaho.up.railway.app

概要

  • 一人称視点で 3 本の通路を歩き、向かってくる人・自転車・車・工事の柵を避ける
  • スマホを見ている間は周りが暗くぼやけていく。顔を上げると戻る
  • メッセージが届くと、返信を 1 文字ずつ連打で打ち終わるまで顔を上げられない。SNS の投稿が届くと SNS アプリに切り替わり、いいねを決まった回数押すまで顔を上げられない
  • 通知の間隔は短くなり、暗くなる速さは上がっていくので、遊び続けると必ずぶつかる
  • マナーモード・メガネ・電池切れ・通知まとめのアイテム、歩いた距離の自己ベスト
  • PC はキーボード、スマホは画面を 3 等分したタップで操作する

設計上のポイント

  • 描画は Canvas 2D だけで、画像素材を使わない。道と建物は透視投影で描き、障害物・アイテム・SNS の画像は絵文字
  • 道の広がり方を画面の縦横比によらず一定にし、縦長の画面でも見下ろしにならず目の高さの視点になるようにした
  • 建物は区画ごとに決まった乱数で高さ・色・窓を決め、歩いた距離に合わせて手前へ流す
  • 効果音は Web Audio で合成。周りの音は視界の悪さに応じてこもらせ、スマホの音ははっきり鳴らす。BGM は fal.ai(ElevenLabs Music)で生成した曲を小節の頭でループさせる
  • ゲームの状態と進行は DOM から切り離した純粋な関数にし、bun test で「押さなければ返信が進まない」「3 本同時には塞がない」などを確かめる
  • 難易度の数値は 1 ファイルに集め、経過時間の関数で書く

規模感

  • 期間: 2026/09(数日)
  • TypeScript: 6 ファイル
  • 1 人開発