I made a luck-based game where you just press a button
To play
Click this link ⬇
How to play

Pressing the center button gives you a 75% chance of success and increases your funds.
Needless to say, this is fictional money and cannot be used for anything.


If you fail, your money is confiscated.
Whether you succeed or fail, the starting amount increases.
From here on: For those who want to see the details
Technical breakdown: Designing a 'three-quarters' game where assets grow exponentially
This project is an extremely simple and addictive 'risk-reward' browser game built solely with HTML5 and Vanilla JavaScript. I will explain the developer's design intent from a technical perspective based on the source code.
1. Game logic: The magic of expected value and exponents
The core of this game lies in the probability judgment within the play() function executed when the button is pressed.
Success rate 75% logic: Success is defined by the judgment $${Math.random() < 0.75}$$.
Multiplier determination: It uses the formula $${2 / Math.random()}$$. Since Math.random() returns a value between 0 and 1, the multiplier diverges toward infinity as the denominator approaches 0. This creates a dream-like design that theoretically holds the potential to multiply your money by hundreds of millions in a single shot.
Relief measures: There is a 25% chance of failure (reset), but it is not a simple initialization to 0; it is designed to return to 'initial value 100 + cumulative number of attempts.' There is a mechanism to prevent player churn because the 'floor' is raised the more you play.
2. Frontend UX design
Implementations that strongly consider mobile users can be seen throughout.
Responsive Fonts: Using the CSS clamp() function, the font size is adjusted to change dynamically according to the screen size.
Improved Operability: By specifying touch-action: manipulation, unintended zooming caused by double-tapping on smartphones and similar devices is suppressed, ensuring a comfortable experience for rapid tapping.
Real-time Feedback: The JavaScript addLog function displays execution history with timestamps at the bottom of the screen immediately. It is designed so that the behavior is communicated to the user without needing to open the browser console.
3. Data Persistence and Asynchronous Communication
The following technologies are used for game data management and the ranking system.
Utilization of Local Storage: Using localStorage, the current balance, all-time high, and number of attempts are saved on the client side. This provides "persistence," allowing the game to continue even after reloading the page.
Issuance of Unique IDs: crypto.randomUUID() is used to generate a unique user ID for each browser. This enables participation in the ranking system without the need for login.
Asynchronous Score Submission: The fetch API is used to send data in JSON format to an external PHP endpoint.
4. Summary: The Scalability Born from Minimalism
This code does not depend on any external frameworks and is completed entirely with standard browser APIs. Despite this, it firmly covers modern web application requirements such as server integration and mobile optimization.
いいなと思ったら応援しよう!
よろしければ応援お願いします! いただいたチップは交通費や食費に使われます!