SYSTEM NOTICE

Auto translation by AI. Be sure, accuracy, nuances and authorial intent may not be fully reflected.
見出し画像

I made a luck-based game where you just press a button

To play


Click this link ⬇

How to play


chinoru.club.omae.me/4bunno3.htmlの画面
1. Press the button in the center

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.

Success example


Failure example

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.

いいなと思ったら応援しよう!

Chinoru6 よろしければ応援お願いします! いただいたチップは交通費や食費に使われます!