ボタンを押すだけの運ゲー作った

遊ぶには

こちらのリンクをクリック⬇

遊び方

中央のボタンを押すと75%で成功し、資金を増やせます。
言うまでもないけど架空の金でなにかに使える訳じゃない

失敗すると金額は没収。
成功しても失敗しても最初の金額が上昇します。

ここから先:詳しく見たい人向け

技術解剖：指数関数的に資産が増殖する「4分の3」ゲームの設計

​本プロジェクトは、HTML5とVanilla JavaScriptのみで構築された、極めてシンプルかつ中毒性の高い「リスク・リターン型」のブラウザゲームです。そのソースコードから読み取れる、開発者の設計意図を技術面から解説します。

​1. ゲームロジック：期待値と指数の魔術

​このゲームの核心は、ボタン押下時に実行される play() 関数内の確率判定にあります。

• ​成功率 75% のロジック: $${Math.random() < 0.75}$$ という判定で成功を定義。

• ​倍率の決定: $${\frac{2}{ Math.random()}}$$ という計算式を採用しています。Math.random() は 0 以上 1 未満の値を返すため、分母が 0 に近づくほど倍率は無限に発散します。これにより、理論上は一撃で数億倍になる可能性を秘めた、夢のある設計となっています。

• ​救済措置: 25% の確率で失敗（リセット）となりますが、単なる 0 への初期化ではなく「初期値 100 + 累計試行回数」へと戻る仕様です。遊べば遊ぶほど「底上げ」がなされるため、プレイヤーの離脱を防ぐ工夫が見られます。

​2. フロントエンドのUX設計

​モバイルユーザーを強く意識した実装が各所に散見されます。

• ​レスポンシブ・フォント: CSS の clamp() 関数を使用し、画面サイズに応じて文字サイズが動的に変化するように調整されています。

• ​操作性の向上: touch-action: manipulation を指定することで、スマートフォン等でのダブルタップによる意図しないズームを抑制し、連打の快適性を確保しています。

• ​リアルタイム・フィードバック: JavaScript の addLog 関数により、実行履歴をタイムスタンプ付きで画面下部に即時表示。ブラウザのコンソールを開かずとも、挙動がユーザーに伝わる設計です。

​3. データ永続化と非同期通信

​ゲームデータの管理とランキングシステムには、以下の技術が用いられています。

• ​ローカルストレージの活用: localStorage を利用し、現在の所持金、過去最高額、試行回数をクライアント側に保存。ページをリロードしてもゲームを継続できる「永続性」を持たせています。

• ​ユニークIDの発行: crypto.randomUUID() を使用してブラウザごとに一意のユーザーIDを生成。ログイン不要でランキングシステムへの参加を可能にしています。

• ​非同期スコア送信: fetch API を用い、外部の PHP エンドポイントへ JSON 形式でデータを送信。

​4. まとめ：ミニマリズムが生む拡張性

​このコードは、一切の外部フレームワークに依存せず、ブラウザ標準の API だけで完結しています。それでいて、サーバー連携やモバイル最適化といった現代的な Web アプリの要件をしっかり押さえています。